//Navbar links colours, font and fadeinout animations. // Media Queries .dropdown-menu { z-index: 25000 !important; } .navbar-inverse .navbar-brand{ color: $navbar-text-color; line-height: $navbar-height; padding-left:15px; } .navbar-inverse .navbar-brand:hover{ color: $brand-primary; } nav#main-navigation { height: $navbar-height; } .mobile-link-inactive{ pointer-events: none; cursor: default; } #tabbed-nav-bar .tabbed-container-fluid { background-color: #fff; } div#tabbed-nav-bar-collapse { padding: 0; } @media screen and (max-width: $screen-lg) and (min-width: 0px){ .sticky-nav#tabbed-nav-bar button.navbar-toggle { margin-right: -5px; } } div#tabbed-nav-bar.non-sticky-nav > .container { padding-left: 0px; padding-right: 0px; } #tabbed-nav-bar .navbar-header { margin-left: 0px; margin-right: 0px; } @media (min-width: $screen-lg) { #navbar-collapse { padding-top: 0px; padding-right: 38px; margin-right: -40px; margin-left: -15px; } ul.dropdown-menu { margin-top: -1px !important; } #navbar-collapse { width: 80%; float: right; } .navbar-right .dropdown-menu { right: auto; left: 0; } } @media (min-width: $screen-sm) { .navbar-right { float: right !important; margin-right: 0px; } } nav#main-navigation.nav-light.navbar-inverse .navbar-collapse{ background-color: transparent; } nav#main-navigation.nav-light #navbar-buttons>li>a { color: #fff; } div#tabbed-nav-bar.sticky-nav { top: 0px; } @media (max-width: $screen-sm){ div#tabbed-nav-bar.sticky-nav li.divider { border-top: 2px solid #272727; } // Style for Home Page Nav - Transparent nav.nav-light > div#navbar-collapse { background-color: $navbar-inverse-bg; } nav.nav-light div#navbar-collapse {background-color: $navbar-inverse-bg;} nav.nav-light #navbar-buttons>li>a { color: $navbar-text-color; } div#tabbed-nav-bar.sticky-nav > .container { padding-left: 0px; padding-right: 0px; } #tabbed-nav-bar.sticky-nav a#sub-navigation-header { padding-left: 5px; } nav#main-navigation.nav-light.navbar-inverse .navbar-collapse{ background-color: $navbar-inverse-bg; } nav#main-navigation.nav-light #navbar-buttons>li>a { color: $navbar-text-color; } } @media screen and (max-width: $screen-lg) and (min-width: 0px) { button.navbar-toggle { margin-right: 10px; } } // Nav Bar Toggle #main-navigation .navbar-toggle { margin-top: ($navbar-height - 18px) / 2; position: static; padding:0px; } #tabbed-nav-bar .navbar-toggle{ color:$brand-primary !important; } button.btn.btn-default.dropdown-toggle { color: $navbar-text-color; } nav{ letter-spacing: 1px; } nav ul.dropdown-menu { min-width: 260px; } nav li a { font-size: 16px; } nav .dropdown-menu li a { padding: 10px 20px; font-size: 14px; } nav .dropdown-menu li a:hover{ transition: color .5s ease; -moz-transition: color .5s ease; -webkit-transition: color .5s ease; } nav li a:hover{ transition: color .5s ease; -moz-transition: color .5s ease; -webkit-transition: color .5s ease; } // Dark and Light Nav Bar nav.nav-light #navbar-buttons > li > a { color:#fff; } nav.nav-dark #navbar-buttons > li > a { color:#000; } nav.nav-light#main-navigation #navbar_svg .cls-2 { fill: #fff; } nav.nav-light { background: transparent; } nav.nav-dark { background: transparent; } nav.nav-light button.navbar-toggle .icon-bar { background-color:#fff !important; } nav.nav-dark button.navbar-toggle .icon-bar { background-color:#fff !important; } // Nav Bar SVG Style svg#navbar_svg { height: 66px; padding-top: 5px; padding-bottom: 5px; } nav.nav-light .cls-2 { fill: #666; } nav.nav-light .cls-2 { fill: #fff; } nav.nav-dark .cls-2 { fill: #000; } // Sub Menu for Boostrap NavBar .dropdown-submenu { position:relative; } .dropdown-submenu>.dropdown-menu { top:0; left:100%; margin-top:-6px; margin-left:-1px; -webkit-border-radius:0 6px 6px 6px; -moz-border-radius:0 6px 6px 6px; border-radius:0 6px 6px 6px; } .dropdown-submenu>a:after { display:block; content:" "; float:right; width:0; height:0; border-color:transparent; border-style:solid; border-width:5px 0 5px 5px; border-left-color:#cccccc; margin-top:5px; margin-right:-10px; } .dropdown-submenu:hover>a:after { border-left-color:#ffffff; } .dropdown-submenu.pull-left { float:none;} .dropdown-submenu:hover>a:after { border-left-color:#ffffff; } .dropdown-submenu.pull-left { float:none; } .dropdown-submenu.pull-left>.dropdown-menu { left:-100%; margin-left:10px; -webkit-border-radius:6px 0 6px 6px; -moz-border-radius:6px 0 6px 6px; border-radius:6px 0 6px 6px; } .dropdown-submenu > ul.dropdown-menu > li > a { color: $navbar-text-color; } .dropdown-submenu > ul.dropdown-menu > li > a:hover { color: $brand-primary; text-decoration: none; transition: 500ms all ease; } .dropdown-submenu.pull-left>.dropdown-menu { left:-100%; margin-left:10px; -webkit-border-radius:6px 0 6px 6px; -moz-border-radius:6px 0 6px 6px; border-radius:6px 0 6px 6px; } .dropdown-submenu > ul.dropdown-menu > li > a { color: $navbar-text-color; } .dropdown-submenu > ul.dropdown-menu > li > a:hover { color: $brand-primary; text-decoration: none; transition: 500ms all ease; } .dropdown-submenu > ul.dropdown-menu { margin-left: -1px; } ul#navbar-buttons > li > ul.dropdown-menu { top: 67px; } // Tabbed nav bar css #tabbed-nav-bar .nav-tabs > li > a { color: black; } ul#tabbed_nav > li.active > a:after { height: 1px; background-color: #fff; } ul#tabbed_nav > li.active > a { border-bottom: none; } ul#tabbed_nav > li > a { border-bottom: 1px solid #eee; border-right: 1px solid #eee; font-size: 13px; } div#tabbed_nav_content { margin-top:0; padding: 10px; border-right: 1px solid #eee; border-left: 1px solid #eee; border-bottom:1px solid #eee; margin-bottom: 20px; } div#tabbed_nav_content > div.tab-pane { margin-top:0; padding: 10px } ul#tabbed_nav { border: 1px solid #eee; margin-bottom:0 !important; } // Navbar Brand .navbar-brand { @media (min-width: $screen-md-min){ padding-top: 0px; padding-bottom: 0px; padding-left: 15px; } @media (max-width: $screen-md-min){ padding-top: 0px; padding-bottom: 0px; padding-left: 5px; } } #brand-image { height:66px; width:auto; padding-top: 5px; padding-bottom: 5px; } #brand-image { @media (max-width: $screen-md-min){ height:70px; width:auto; } } .navbar-collapse { position: relative; max-height: 270px; } .input-group-btn { min-width: 50px; } nav > li { font-size: 14px; } nav > li.active > a, nav > li.active > a:focus, nav > li.active > a:hover { border-width: 0; } nav > li.active > a, nav > li > a:hover { border: none; } nav > li > a { /* adjust padding for height*/ padding-top: 4px; padding-bottom: 4px; } nav > li > a::after { content: ""; height: 2px; position: absolute; width: 100%; left: 0px; bottom: -1px; transition: all 250ms ease 0s; transform: scale(0); } nav > li.active > a::after, nav > li:hover > a::after { transform: scale(1); } nav > ul.navbar-right { min-width: 620px; } #tabbed-nav-bar > nav.navbar-inverse { background-color: $navbar-inverse-bg; height:$navbar-height; } #tabbed-nav-bar .navbar-default .navbar-toggle .icon-bar { background-color: $brand-primary; } @media(max-width: $screen-md-min){ .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form { border-color: $navbar-inverse-bg; background-color: $navbar-inverse-bg; } } #tabbed-nav-bar .collapse{ margin-bottom:-1px; z-index: 1; } #tabbed-nav-bar.non-sticky-nav button.navbar-toggle { margin-right: -5px; } .sticky-nav { position: fixed; top: 0; z-index: 1000; left: 0; right: 0; transition: all 1s ease; } @media(max-width:$screen-sm-min - 1){ #tabbed-nav-bar .tabbed-nav-btn{ width:100%; } #sub-navigation-header { font-size: 14px; } #tabbed-nav-bar .nav-tabs{ background-color: $navbar-inverse-bg; margin-top: 0px; margin-bottom: 20px; } #tabbed-nav-bar .nav-tabs>li>a::after { background: transparent; } #tabbed-nav-bar .nav-tabs>li>a { color: $navbar-text-color; font-size: 12px; font-weight: bold; padding: 10px; padding-left: 20px; text-transform: uppercase; letter-spacing: 0px; line-height: 21px; } #tabbed-nav-bar .nav-tabs>li>a:hover { color: $brand-primary; } #tabbed-nav-bar .nav-tabs>li.active>a, #tabbed-nav-bar .nav-tabs>li.active>a:hover, #tabbed-nav-bar .nav-tabs>li.active>a:focus { color: $brand-primary; background-color: transparent; cursor: default; } #tabbed-nav-bar { z-index:10000; } } #sub-navigation-header{ display:none; height:100%; font-size: 19px; line-height: $navbar-height; } #tabbed-nav-bar a#sub-navigation-header { color: #000; padding: 0px; } #tabbed-nav-bar.sticky-nav a#sub-navigation-header{ color: $navbar-text-color; } /* Sub Navigation Side Bar Hover Style */ .nav-pills>li.side-nav-button>a:hover { color: $navbar-inverse-bg; } .navbar-header { position: relative; z-index: 4; overflow: hidden; } // Tabbed Nav bar /* -------- Tabbed Content Sections ------- */ .tab-pane { background-color: white; margin-top: -20px; padding: 21px; overflow: hidden; } .tab-content { margin-top: 40px; } .nav-tabs > li { font-size: 14px; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { border-width: 0; } .nav-tabs > li > a { border: none; line-height:40px; //Set the line height to change the size of the tabs. font-size: 18px; } .nav-tabs > li.active > a, .nav-tabs > li > a:hover { border: none; } .nav-tabs > li > a { /* adjust padding for height*/ padding-top: 4px; padding-bottom: 4px; } #wrapper li.tabbed-nav-btn { border-right: 1px solid #f9f9f9; border-left: 1px solid #f9f9f9; border-bottom: 1px solid #f9f9f9; background-color: black; color: white; text-align:center; } #wrapper li.tabbed-nav-btn a { color: white; } .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus, .nav-tabs>li>a:hover { color: $brand-primary !important; } #wrapper .nav-tabs { border-bottom: none; } .nav-tabs > li > a::after { content: ""; height: 2px; position: absolute; width: 100%; left: 0px; bottom: -1px; transition: all 250ms ease 0s; transform: scale(0); } .nav-tabs > li.active > a::after, .nav-tabs > li:hover > a::after { transform: scaleY(2); } .tab-row-faq > li { height:20px ; } .nav-tabs { border-bottom: 2px solid $gray; } .nav-tabs > li > a { color: $navbar-text-color; } .nav-tabs > li.active > a, .nav-tabs > li > a:hover { color: black; background: transparent; } .nav-tabs > li > a::after { background: $brand-primary; } .tab-nav > li > a::after { background: $brand-primary none repeat scroll 0% 0%; color: $navbar-text-color; } //Changed the default navbar text colour .navbar-inverse .navbar-nav > li > a { color: $footer-text-color; } button#closeForm { color: $navbar-text-color; } @media (max-width: $screen-md-min){ .navbar-inverse .navbar-nav .open .dropdown-menu > li > a.dropdown-item { color: $navbar-text-color; } } // Style for stacked nav li.side-nav-button { border-top: 1px sstackedolid $gray-lighter; border-right: 0px; border-left: 0px; margin-bottom: -3px; } li.side-nav-button:first-child { border-top: 0px; } .nav-pills > li.side-nav-button>a { border-radius: 0px; font-size: 16px; } .dropdown-menu li:hover { background-color: #eee; transition: all 500ms ease; } .dropdown-menu li { transition: all 500ms ease; } #navbar-buttons .dropdown-menu { background-color: #fff; border-top: 2px solid $brand-primary; } /* Bold the first li in nav-stacked */ ul.nav.nav-pills.nav-stacked li:first-child { font-weight: bold; } li.side-nav-button:hover > a { color: $brand-primary; } /* Stacked Nav Icon Div */ .ext-left{ float:left; } .ext-right { height: auto; vertical-align: middle; display: table-cell; padding-right: 10px; padding-left: 10px; } #navbar-buttons .dropdown-menu>li>a { color: $navbar-dropdown-text-color; letter-spacing: 0; font-size:12px; outline: 0; } #navbar-buttons .dropdown-menu>li>a:hover { color: $brand-primary; letter-spacing: 0; font-size:12px; } #main-navigation.navbar-inverse .navbar-nav>li>a { color: $navbar-text-color; font-size: 14px; font-weight: normal; padding-right: 20px !important; padding-left: 20px !important; text-transform: none; letter-spacing: 0px; } .navbar-inverse #navbar-buttons >li>a { color: $navbar-text-color; } .navbar-inverse #navbar-buttons>li>a:hover{ color: $brand-primary; } // Search Bar i.glyphicon.glyphicon-search { font-size: 16px; } div#search_bar { width: 100%; position: absolute; text-align:right; height: 66px; right: 43px; display: none; background-color: $navbar-inverse-bg; z-index: 99999; } div#search_bar input { width:100%; right: 0; height: 66px; border-radius:0; outline:0; border:0; text-align: right; font-size: 26px; background-color: $navbar-inverse-bg; color: $navbar-text-color; border-color: inherit; -webkit-box-shadow: none; box-shadow: none; } div#search_bar input:focus { border-color: inherit; -webkit-box-shadow: none; box-shadow: none; outline: none; } #search_bar .input-group{ width: auto; } div#search_bar button { width:50px; margin-left: -10px; border-radius: 0px; height: 66px; padding-top: 13px; font-size: 16px; background-color: $navbar-inverse-bg; border:0; color: $navbar-text-color; } div#search_bar button:hover { background-color: $navbar-text-color; color: $navbar-inverse-bg; } div#search_bar input::-webkit-input-placeholder { color: $navbar-text-color !important; } div#search_bar input:-moz-placeholder { /* Firefox 18- */ color: $navbar-text-color !important; } div#search_bar input::-moz-placeholder { /* Firefox 19+ */ color: $navbar-text-color !important; } div#search_bar input:-ms-input-placeholder { color: $navbar-text-color !important; } // NavBar Subtle Animations li.dropdown-submenu.sub-menu:hover > a:after { margin-right:-6px; margin-top: 8px; transform: rotateZ(90deg); border-left-color:#a5a5a5; } li.dropdown-submenu.sub-menu > a:after { transition: all 100ms linear; } li.dropdown.menu.open > a { color: $brand-primary !important; } ul.dropdown-menu.menu { padding-top: 0; padding-bottom: 0; border-radius: 0 !important; } @media(min-width:$screen-sm-min){ div#tabbed-nav-bar.sticky-nav li.divider { border-right: 1px solid $navbar-inverse-bg; height: 48px; width: 1px; } div#tabbed-nav-bar.non-sticky-nav li.divider { border-right: 2px solid #272727; } #main-navigation a.navbar-brand { padding-left:15px; } } @media only screen and (max-width: $screen-lg-min) and (min-width: $screen-sm-min) { div#search_bar { right: 0px; } } /* Tabbed Nav Bar Mobile Style*/ @media (max-width: $screen-sm) { ul#tabbed_nav > li { width: 100%; } ul#tabbed_nav > li > a { border:0; } ul#tabbed_nav > li > a:after { height: 1px; background-color: #fff; } } // Nav Bar SVG Base Style #navbar_svg .cls-1 { fill: none; } #navbar_svg .cls-2 { fill: #666; } #navbar_svg .cls-3 { fill: #9c3; } #navbar_svg .cls-8 { fill: #9c3; } #navbar_svg .cls-4, #navbar_svg .cls-5 { fill: #c03; } #navbar_svg .cls-5 { opacity: 0.6; } #navbar_svg .cls-6, #navbar_svg .cls-7 { fill: #909; } #navbar_svg .cls-7, #navbar_svg .cls-8 { opacity: 0.7; } // Style for sidebar stacked nav sub pages li.side-nav-button.sub-page a { padding-left: 40px; } nav#main-navigation { transition: all 300ms ease; } nav#main-navigation.navbar-static { height: $navbar-height + 20; padding-bottom: 10px; padding-top: 10px; } nav#main-navigation.navbar-fixed-top { height: $navbar-height; padding-top:0px; padding-bottom:0px; } #main-navigation div#navbar-collapse { z-index: 2; } // CSS for the left aligned dropdowns li.dropdown-submenu.sub-menu.pull-left { width: 100%; } #main-navigation .pull-left ul.dropdown-menu.sub-menu { margin-left: -3px !important; margin-top: 0px !important; text-align: right; } #main-navigation ul.dropdown-menu.sub-menu { margin-left: 1px; border-radius: 0px; border: 0px; padding-top: 0; margin-top: 5px; padding-bottom: 0; } li.dropdown-submenu.sub-menu > a { cursor: pointer; } // Import the CSS for the iuniversal NavBar @import "universal-nav"; // Animated navbar toggle .navbar-toggle { border: none; background: transparent !important; } .navbar-toggle:hover { background: transparent !important; } .navbar-toggle .icon-bar { width: 22px; transition: all 0.2s; } .navbar-toggle .top-bar { transform: rotate(45deg); transform-origin: 10% 10%; } .navbar-toggle .middle-bar { opacity: 0; } .navbar-toggle .bottom-bar { transform: rotate(-45deg); transform-origin: 10% 90%; } .navbar-toggle.collapsed .top-bar { transform: rotate(0); } .navbar-toggle.collapsed .middle-bar { opacity: 1; } .navbar-toggle.collapsed .bottom-bar { transform: rotate(0); } // Scroll Track .navbar-collapse::-webkit-scrollbar { width: 1em; } .navbar-collapse::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: darken($navbar-inverse-bg, 80%); } .navbar-collapse::-webkit-scrollbar-thumb { background-color: $brand-primary; outline: 1px solid lighten($navbar-inverse-bg, 90%); }