// ============================================================================= // SCSS/SITE/STACKS/ICON/RESP/_NAVBAR.SCSS // ----------------------------------------------------------------------------- // Necessary styling for a responsive navbar. // ============================================================================= // ============================================================================= // TABLE OF CONTENTS // ----------------------------------------------------------------------------- // 01. Breakpoint: cubs (Tablets and Below) // 02. Breakpoint: mama-bear (Defaut Desktop) // ============================================================================= // Breakpoint: cubs (Tablets and Below) // ============================================================================= @include break(cubs) { // // 1. Remove any padding from the . // 2. Unfix the navbars. // body { &.x-navbar-fixed-top-active, &.x-navbar-fixed-left-active, &.x-navbar-fixed-right-active { padding: 0; // 1 } } .x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right { position: relative; // 2 } .x-navbar-fixed-left, .x-navbar-fixed-right { width: auto; .x-brand { float: left; text-align: none; } .x-nav > li > a { text-align: left; } } // // Collapsible navbar. // .x-nav-collapse { clear: both; overflow: hidden; &.collapse { display: none; &.in { display: block; } } } .x-nav-collapse .x-nav { float: none; margin: 1.5em 0; } .x-nav-collapse .x-nav > li { float: none; height: auto; padding: 0; } // // Nav and dropdown links in navbar. // .x-navbar .x-nav-collapse .x-nav li a { display: block; height: auto; margin-bottom: 3px; border: 0; padding: $navbarLinkPaddingMobile; @include font-size(1.2); line-height: 1.5; white-space: normal; color: $navbarLinkColor; background-color: transparent; border-radius: 0; @include transition(#{none}); } .x-navbar .x-nav-collapse .x-nav li a:hover, .x-navbar .x-nav-collapse .x-nav .current-menu-item > a { background-color: $dropdownLinkBackgroundHover; } // // Search. // .x-navbar .x-navbar-inner .x-nav-collapse .x-nav > li.menu-item-navbar-search { margin: 4px 2px 2px; > a { border: 1px solid; letter-spacing: 1px; } } // // Dropdowns in the navbar. // .x-nav-collapse .sub-menu { position: static; top: auto; left: auto; float: none; display: block; max-width: none; margin: 0 1.5em; border: 0; padding: 0; background-color: transparent; } // // Pull right (secondary) nav content. // .x-navbar .x-nav-collapse .x-nav.right { float: none; margin-left: 0; } // // Forces all dropdown nav items to display on mobile with Superfish. // .sf-menu ul { visibility: visible !important; display: block !important; } // // Reset dropdown font size to match top level nav if set differently on // desktop. // .sub-menu a { font-size: $navbarFontSize; } // // Reset fixed top navbar on tablets. // .x-navbar-fixed-top-active .x-navbar.x-navbar-fixed-top.x-container-fluid.max.width { left: 0; right: 0; width: 100%; } // // Logo and navigation layout styles. // .masthead-inline .x-btn-navbar { display: block; float: right; } .masthead-stacked { .x-navbar { text-align: center; .x-nav { text-align: initial; } } .x-btn-navbar { display: inline-block; } } } // Breakpoint: mama-bear (Default Desktop) // ============================================================================= // // Required to make the collapsing navbar work on regular desktops // @include break(mama-bear) { .x-nav-collapse.collapse { height: auto !important; overflow: visible !important; } }