/* ############################################################################################################################################################################ */ /* ############################################################################################################################################################################ */ /* Skye Isle Terrier Sanctuary Public Website */ /* • Page: Navbar Stylesheet (navbar.css) */ /* • Description: Horizontal navigation bar with fixed 350px left/right margins (matches branding + body exactly), labels underneath icons, same icon sizes */ /* • Location: /modules/navbar/css/navbar.css */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* • DEFAULT TARGET RESOLUTION: 1920x1080p */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* • Version: v0.0.01 */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* • Project Start Date: 2026-06-15 */ /* • Last updated: 2026-06-18 @ 1700 EDT */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* • Author: by Conner Rhoads */ /* • Official Site: www.skyeisleterriersanctuary.com */ /* ############################################################################################################################################################################ */ /* ############################################################################################################################################################################ */ /* CHANGE LOG */ /* 2026-06-18: Initial file transfer from old Glyphchronicles.com site as starting base for new Skye Isle Terrier Sanctuary project. Formatting cleaned, duplicate media queries removed to fix layout overrides, headers updated. */ /* ############################################################################################################################################################################ */ /* ############################################################################################################################################################################ */ /* ============================================================================================================================================================================ */ /* NAVBAR CONTAINER — Fixed 350px left + right margins (matches branding + body exactly) */ /* ============================================================================================================================================================================ */ #navbar-container { position: absolute; top: 265px; left: 350px; right: 350px; z-index: 5; margin-bottom: 0px; } /* ============================================================================================================================================================================ */ /* TOP TABS CONTAINER */ /* ============================================================================================================================================================================ */ #top-tabs { display: flex; align-items: center; height: 68px; background-color: #795548; color: #e0e0e0; border-radius: 8px; width: 100%; box-sizing: border-box; overflow: hidden; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6); } /* ============================================================================================================================================================================ */ /* BUTTON / TAB STYLES + LABELS UNDER ICONS */ /* ============================================================================================================================================================================ */ .tab-item, .tab-home { display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; gap: 4px; height: 100%; } /* All icons exactly the same size */ #top-tabs img { width: 28px; height: 28px; object-fit: contain; transition: filter 0.4s ease, transform 0.4s ease; } /* Labels underneath icons */ .tab-label { font-size: 10px; color: #e0e0e0; text-align: center; line-height: 1; white-space: nowrap; } /* Home button */ .tab-home { background-color: #5D4037; min-width: 48px; padding: 8px 12px; } /* Main menu items */ .tab-item { min-width: 20px; padding: 4px 6px; color: #e0e0e0; } /* Hover glow */ #top-tabs a:hover img, .tab-item:hover img { filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.9)) drop-shadow(0 0 24px rgba(255, 255, 255, 0.6)); transform: scale(1.1); } /* Active / pressed effect */ #top-tabs a:active img, .tab-item:active img { filter: drop-shadow(0 0 12px rgba(255, 69, 0, 0.9)) drop-shadow(0 0 24px rgba(255, 255, 255, 0.6)); } /* ============================================================================================================================================================================ */ /* MAIN MENU AREA */ /* ============================================================================================================================================================================ */ #tab-menu { flex-grow: 1; display: flex; align-items: center; justify-content: flex-start; height: 100%; padding: 0 20px 0 0; background-color: #795548; } #tab-main-menu { display: flex; list-style: none; margin: 0; padding: 0 0 0 20px; gap: 40px; } /* ============================================================================================================================================================================ */ /* MOBILE RESPONSIVENESS + SCROLLABLE WITH INDICATORS */ /* ============================================================================================================================================================================ */ /* Scroll indicators (left/right gradients) */ #tab-main-menu { position: relative; } #tab-main-menu::before, #tab-main-menu::after { content: ''; position: absolute; top: 50%; transform: translateY(-50%); width: 24px; height: 100%; pointer-events: none; z-index: 2; opacity: 0.6; } #tab-main-menu::before { left: 0; background: linear-gradient(to right, #795548, transparent); } #tab-main-menu::after { right: 0; background: linear-gradient(to left, #795548, transparent); } /* Hide indicators on desktop */ @media (min-width: 769px) { #tab-main-menu::before, #tab-main-menu::after { display: none; } } /* ============================================================================================================================================================================ */ /* MOBILE RESOLUTIONS (Portrait Mode) */ /* ============================================================================================================================================================================ */ @media (max-width: 768px) { #navbar-container { } #top-tabs { height: 64px !important; } #tab-main-menu { } #tab-main-menu::-webkit-scrollbar { } .tab-item { } .tab-home { } .tab-label { } #top-tabs img { } } /* ============================================================================================================================================================================ */ /* LEGACY RESOLUTIONS */ /* ============================================================================================================================================================================ */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* LEGACY VGA | 640x480 | 4:3 | */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media (min-width: 481px) and (max-width: 640px) { #navbar-container { } #top-tabs { height: 64px !important; } #tab-main-menu { } #tab-main-menu::-webkit-scrollbar { } .tab-item { } .tab-home { } .tab-label { } #top-tabs img { } } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* LEGACY SVGA | 800x600 | 4:3 | */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media (min-width: 641px) and (max-width: 800px) { #navbar-container { } #top-tabs { height: 64px !important; } #tab-main-menu { } #tab-main-menu::-webkit-scrollbar { } .tab-item { } .tab-home { } .tab-label { } #top-tabs img { } } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* LEGACY XVGA | 1024x768 | 4:3 | */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media (min-width: 801px) and (max-width: 1024px) { #navbar-container { } #top-tabs { height: 64px !important; } #tab-main-menu { } #tab-main-menu::-webkit-scrollbar { } .tab-item { } .tab-home { } .tab-label { } #top-tabs img { } } /* ============================================================================================================================================================================ */ /* MODERN RESOLUTIONS */ /* ============================================================================================================================================================================ */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* MODERN 720p | 1280x720 | 16:9 | */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media (min-width: 1081px) and (max-width: 1280px) { #navbar-container { position: absolute; top: 265px; left: 50%; transform: translateX(-50%); max-width: 820px; width: 100%; z-index: 5; margin-bottom: 0px; } .tab-item { min-width: 78px; padding: 8px 11px; } .tab-label { font-size: 9.5px; } } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* MODERN 1080p | 1920x1080 | 16:9 | */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media (min-width: 1281px) and (max-width: 1920px) { #navbar-container { } #top-tabs { height: 64px !important; } #tab-main-menu { } #tab-main-menu::-webkit-scrollbar { } .tab-item { } .tab-home { } .tab-label { } #top-tabs img { } } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* MODERN 2k | 2560x1280 | 16:9 | */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media (min-width: 1921px) and (max-width: 2559px) { #navbar-container { } #top-tabs { height: 64px !important; } #tab-main-menu { } #tab-main-menu::-webkit-scrollbar { } .tab-item { } .tab-home { } .tab-label { } #top-tabs img { } } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* MODERN 4k | 3840x1400 | 16:9 | */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media (min-width: 2562px) and (max-width: 3839px) { #navbar-container { } #top-tabs { height: 64px !important; } #tab-main-menu { } #tab-main-menu::-webkit-scrollbar { } .tab-item { } .tab-home { } .tab-label { } #top-tabs img { } } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* MODERN 6k | 6144x3456 | 16:9 | */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media (min-width: 3841px) and (max-width: 6144px) { #navbar-container { } #top-tabs { height: 64px !important; } #tab-main-menu { } #tab-main-menu::-webkit-scrollbar { } .tab-item { } .tab-home { } .tab-label { } #top-tabs img { } } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* MODERN 8k | 7680x4320 | 16:9 | */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media (min-width: 6145px) and (max-width: 7680px) { #navbar-container { } #top-tabs { height: 64px !important; } #tab-main-menu { } #tab-main-menu::-webkit-scrollbar { } .tab-item { } .tab-home { } .tab-label { } #top-tabs img { } } /* ============================================================================================================================================================================ */ /* MODERN HALF SCREEN RESOLUTIONS */ /* ============================================================================================================================================================================ */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* MODERN HALF 1080p | 960x1080 (1920x1080) | 16:9 | */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media (min-width: 900px) and (max-width: 960px) { #navbar-container { } #top-tabs { height: 64px !important; } #tab-main-menu { } #tab-main-menu::-webkit-scrollbar { } .tab-item { } .tab-home { } .tab-label { } #top-tabs img { } } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* MODERN HALF 2k | ~1280x1280 (2560x1280) | 16:9 | */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media (min-width: 1921px) and (max-width: 2559px) { #navbar-container { } #top-tabs { height: 64px !important; } #tab-main-menu { } #tab-main-menu::-webkit-scrollbar { } .tab-item { } .tab-home { } .tab-label { } #top-tabs img { } } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* MODERN HALF 4k | ~1920x1400 (3840x1400) | 16:9 | */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media (min-width: 2562px) and (max-width: 3839px) { #navbar-container { } #top-tabs { height: 64px !important; } #tab-main-menu { } #tab-main-menu::-webkit-scrollbar { } .tab-item { } .tab-home { } .tab-label { } #top-tabs img { } } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* MODERN HALF 6k | ~3072x3456 (6144x3456) | 16:9 | */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media (min-width: 3841px) and (max-width: 6144px) { #navbar-container { } #top-tabs { height: 64px !important; } #tab-main-menu { } #tab-main-menu::-webkit-scrollbar { } .tab-item { } .tab-home { } .tab-label { } #top-tabs img { } } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* MODERN HALF 8k | ~3840x4320 (7680x4320) | 16:9 | */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media (min-width: 6145px) and (max-width: 7680px) { #navbar-container { } #top-tabs { height: 64px !important; } #tab-main-menu { } #tab-main-menu::-webkit-scrollbar { } .tab-item { } .tab-home { } .tab-label { } #top-tabs img { } } /* ============================================================================================================================================================================ */ /* ULTRAWIDE RESOLUTIONS */ /* ============================================================================================================================================================================ */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ULTRAWIDE WFHD | 2560x1080 | 21:9 | */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media (min-width: 2560px) and (max-width: 2560px) { #navbar-container { } #top-tabs { height: 64px !important; } #tab-main-menu { } #tab-main-menu::-webkit-scrollbar { } .tab-item { } .tab-home { } .tab-label { } #top-tabs img { } } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ULTRAWIDE FHD | 4608x1920 | 21:9 | */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media (min-width: 4608px) and (max-width: 4608px) { #navbar-container { } #top-tabs { height: 64px !important; } #tab-main-menu { } #tab-main-menu::-webkit-scrollbar { } .tab-item { } .tab-home { } .tab-label { } #top-tabs img { } } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ULTRAWIDE UWQHD | 3440x1440 | 21:9 | */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media (min-width: 3440px) and (max-width: 3440px) { #navbar-container { } #top-tabs { height: 64px !important; } #tab-main-menu { } #tab-main-menu::-webkit-scrollbar { } .tab-item { } .tab-home { } .tab-label { } #top-tabs img { } } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ULTRAWIDE WQHD+ | 3840x1600 | 21:9 | */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media (min-width: 3840px) and (max-width: 3840px) { #navbar-container { } #top-tabs { height: 64px !important; } #tab-main-menu { } #tab-main-menu::-webkit-scrollbar { } .tab-item { } .tab-home { } .tab-label { } #top-tabs img { } } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ULTRAWIDE UW5K | 5120x2160 | 21:9 | */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media (min-width: 5120px) and (max-width: 5120px) { #navbar-container { } #top-tabs { height: 64px !important; } #tab-main-menu { } #tab-main-menu::-webkit-scrollbar { } .tab-item { } .tab-home { } .tab-label { } #top-tabs img { } } /* ============================================================================================================================================================================ */ /* END STYLESHEET */ /* ============================================================================================================================================================================ */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media (min-width: 3840px) and (max-width: 3840px) { #navbar-container { } #top-tabs { height: 64px !important; } #tab-main-menu { } #tab-main-menu::-webkit-scrollbar { } .tab-item { } .tab-home { } .tab-label { } #top-tabs img { } } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ULTRAWIDE UW5K | 5120x2160 | 21:9 | */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media (min-width: 5120px) and (max-width: 5120px) { #navbar-container { } #top-tabs { height: 64px !important; } #tab-main-menu { } #tab-main-menu::-webkit-scrollbar { } .tab-item { } .tab-home { } .tab-label { } #top-tabs img { } } /* ============================================================================================================================================================================ */ /* END STYLESHEET */ /* ============================================================================================================================================================================ */