|
|
| Line 20: |
Line 20: |
| padding-left: 25px !important; | | padding-left: 25px !important; |
| background-size: 18px; | | background-size: 18px; |
| }
| |
|
| |
| .city-link {
| |
| display: flex !important;
| |
| align-items: center !important; /* Vertically centers text with icons */
| |
| line-height: 1 !important;
| |
| text-decoration: none !important;
| |
| }
| |
|
| |
| .nav-icon {
| |
| height: 28px !important; /* Slightly smaller looks more elegant */
| |
| width: auto !important;
| |
| margin-right: 8px;
| |
| }
| |
|
| |
| /* Global City Bar Styling */
| |
| #global-city-bar {
| |
| background-color: #202122; /* Dark professional background */
| |
| color: #ffffff;
| |
| width: 100%;
| |
| padding: 8px 0;
| |
| font-family: 'Segoe UI', Roboto, sans-serif;
| |
| border-bottom: 3px solid #36c; /* Blue accent line */
| |
| z-index: 9999;
| |
| }
| |
|
| |
| .city-bar-content {
| |
| max-width: 1200px;
| |
| margin: 0 auto;
| |
| display: flex;
| |
| justify-content: center;
| |
| gap: 30px;
| |
| }
| |
|
| |
| .city-link {
| |
| color: #ffffff !important;
| |
| text-decoration: none !important;
| |
| font-size: 14px;
| |
| font-weight: bold;
| |
| transition: 0.2s;
| |
| }
| |
|
| |
| .city-link:hover {
| |
| color: #36c !important; /* Highlights blue on hover */
| |
| transform: translateY(-1px);
| |
| }
| |
|
| |
| /* Container for the whole bar */
| |
| #global-city-bar {
| |
| background-color: #202122; /* Dark background */
| |
| width: 100%;
| |
| padding: 10px 0;
| |
| border-bottom: 3px solid #36c;
| |
| }
| |
|
| |
| /* Horizontal row for the links */
| |
| .city-bar-content {
| |
| display: flex;
| |
| justify-content: center; /* Centers the whole group */
| |
| align-items: center; /* Centers items vertically */
| |
| gap: 25px; /* Space between each city block */
| |
| }
| |
|
| |
| /* Individual link container */
| |
| .city-link {
| |
| display: flex; /* Makes icon and text sit side-by-side */
| |
| align-items: center; /* Perfectly aligns icon and text vertically */
| |
| color: #ffffff !important;
| |
| text-decoration: none !important;
| |
| font-weight: bold;
| |
| font-family: sans-serif;
| |
| font-size: 15px;
| |
| }
| |
|
| |
| /* Icon styling */
| |
| .nav-icon {
| |
| width: 24px; /* Size of the icon */
| |
| height: 24px;
| |
| margin-right: 8px; /* Gap between icon and city name */
| |
| object-fit: contain;
| |
| }
| |
|
| |
| .city-link:hover {
| |
| color: #36c !important;
| |
| }
| |
|
| |
| /* Hide city names on very small phones to keep it clean */
| |
| @media (max-width: 480px) {
| |
| .city-name { display: none; }
| |
| .city-bar-content { gap: 40px; font-size: 20px; }
| |
| } | | } |
