// ============================================================================= // 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 } } // Unfix the navbar .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 { display: block; clear: both; } // // Block-level the nav. // .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-navbar-inner .x-nav-collapse .x-nav > li > a, .x-navbar .x-navbar-inner .x-nav-collapse .sub-menu a { height: auto; margin-bottom: 3px; border: 0; padding: 0.75em 1em; @include font-size(1.2); line-height: 1.5; border-radius: 4px; @include transition(#{none}); } .x-nav-collapse .x-nav > li > a { } .x-nav-collapse .sub-menu a { color: $navbarLinkColor; } .x-navbar .x-navbar-inner .x-nav-collapse .x-nav > li > a:hover, .x-navbar .x-navbar-inner .x-nav-collapse .sub-menu a:hover { background-color: $dropdownLinkBackgroundHover; @include box-shadow(#{none}); } // .x-nav-collapse .x-nav > .current-menu-item > a, // .x-nav-collapse .x-nav > .current_page_item > a, // .x-nav-collapse .x-nav > .current_page_parent > a { // color: $navbarLinkColorHover; // background-color: $dropdownLinkBackgroundHover; // &:hover, // &:focus { // background-color: $dropdownLinkBackgroundHover; // @include box-shadow(#{none}); // } // } // // 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; padding: 0; background-color: transparent; border: none; border-radius: 0; @include box-shadow(none); } .x-nav-collapse .sub-menu:before, .x-nav-collapse .sub-menu:after { display: none; } // // Pull right (secondary) nav content. // .x-navbar .x-nav-collapse .x-nav.right { float: none; margin-left: 0; } // // Hide everything in the navbar save .brand and toggle button. // .x-nav-collapse, .x-nav-collapse.collapse { overflow: hidden; height: 0; } // // Navbar button. // .x-btn-navbar { display: block; } // // Makes longer lines break on mobile. // .sf-menu > li a { white-space: normal; } // // 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%; } } // 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; } }