/*========================= 04. NAVIGATION MENU ===========================*/ .site-branding { float: left; margin-right: @base-margin; .site-title { margin-bottom: 0; a{ &:hover{ color:initial; } } } } .header-left { position: relative; z-index:2; .prr-iconset { position: absolute; right: 0; top: 50%; transform: translateY(-50%); } } nav { float: left; position: relative; z-index: 2; } nav a { font-size: 1.6rem; font-weight: 700; } .main-nav { &:before, &:after { display: table; content: " "; } &:after { clear: both; } ul { border-radius: 3px; .shadow; } li { list-style-type: none; } >li { float: left; >a { color: @dark-color; display: block; padding: 2.4rem 1.6rem; } a:hover { color: @primary-color; } } >li a { color: #2b3948; } .menu-item-has-children { position: relative; .to-left { left: unset !important; // Override by Js right positioning of rightmost menu item submenus right: 25%; } .sub-menu { padding-top: 0; padding-bottom: 0; li { border-bottom: 1px solid @border-color; padding: 1rem 0; position: relative; a { display: block; } &:last-child { border-bottom: 0; } } } ul { background-color: @white-color; position: absolute; padding: 1.6rem 2.4rem; width: 220px; opacity: 0; visibility: hidden; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s; } &:hover, &:focus { >ul { opacity: 1; visibility: visible; .transform( translateY(-10px) ); } } // li>a { // &::after { // margin-top: 7px; // } // } >a { &::after { content: "\ea67"; padding-left: @font-size; font: normal normal normal 18px/1 IcoFont; position: absolute; right: -4px; top: 26px; } } .menu-item-has-children { .sub-menu { .transform( translate( 140px, -25px ) ); } &:hover { > .sub-menu { .transform( translate( 170px, -25px ) ); } } >a { &::after { content: "\ea69"; margin-top: 4px; top: unset; right: 0; } } } } .menu-item-has-children > ul.is-focused { opacity: 1; visibility: visible; } } /* Mobile Navigation Menu */ .nav-menu { position: relative; } .mobile-menu-container { position: absolute; top: 0; right: 3.2rem; ul > li { > a { color: @dark-color; &:hover { color: @primary-color; } } } } .js-ct-menubar-right { &:focus { outline: 5px auto -webkit-focus-ring-color; } } .menubar-right, .menubar-close { cursor: pointer; position: absolute; font-size: 2.7rem; right: 0; top: 1rem; z-index: 2; } .menubar-close { right: 3.2rem; } .menubar-right { padding-right: 15px; top: 50%; .transform( translateY( -50% ) ); } .dropdown-toggle { cursor: pointer; font-size: 2.2rem; margin-top: .2rem; position: absolute; top: 1rem; right: 0; padding: 0 !important; // Override for parent padding line-height: 1; -webkit-transition: -webkit-transform .2s ease-out; -moz-transition: -moz-transform .2s ease-out; -o-transition: -o-transform .2s ease-out; transition: transform .2s ease-out; } .mobile-menu-overlay { background-color: rgba(0,0,0,.5); position: fixed; width: 100%; height: 100%; opacity: 0; visibility: hidden; z-index: 9901; -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s; } .mobile-menu-active { opacity: 1; visibility: visible; } .nav-parent { background-color: #fff; border-left: 1px solid #e3e3e3; padding: 4rem; position: fixed; overflow-y: scroll; top: 0; right: 0; bottom: 0; max-width: 30rem; width: 100%; visibility: hidden; z-index: 9902; -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s ease; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } .mobile-menu-open { -webkit-transform: translate3d(0, 0, 0) !important; transform: translate3d(0, 0, 0) !important; visibility: visible; } .mobile-nav li { position: relative; list-style-type: none; } .mobile-nav>li { border-bottom: 1px solid #e3e3e3; } .mobile-nav>li:last-child { border-bottom: none; } .mobile-nav li a { padding: 1rem; display: block; } .mobile-nav li ul li ul a, .mobile-nav li ul a { display: block; } .mobile-nav>li>ul { display: none; padding-left: 1.6rem; } .mobile-nav>li>ul>li>ul { display: none; padding-left: 1.6rem; } .toggled { -o-transform: rotate(-180deg); -ms-transform: rotate(-180deg); -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } /** * Search Icon */ .search-default { visibility: hidden; } .search-shown { animation-name: ctSlideUpIn; -webkit-animation-name: ctSlideUpIn; animation-duration: 0.2s; -webkit-animation-duration: 0.2s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes ctSlideUpIn { 0% { transform: translateY(20px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @-webkit-keyframes ctSlideUpIn { 0% { -webkit-transform: translateY(20px); opacity: 0; } 100% { -webkit-transform: translateY(0); opacity: 1; } } .search-hidden { animation-name: ctSlideDownOut; -webkit-animation-name: ctSlideDownOut; animation-duration: 0.2s; -webkit-animation-duration: 0.2s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: hidden; } @keyframes ctSlideDownOut { 0% { transform: translateY(0); opacity: 1; visibility: visible; } 100% { transform: translateY(20px); opacity: 0; visibility: hidden; } } @-webkit-keyframes ctSlideDownOut { 0% { -webkit-transform: translateY(0); opacity: 1; } 100% { -webkit-transform: translateY(20px); opacity: 0; } } .search-icon { margin-right: 5px; } .search-form { font-size: @font-size; } .search-submit { cursor: pointer; } .search-dropdown { position: absolute; top: 100%; right: 0; background: #f7f8f8; padding: 2rem; width: 32rem; height: auto; .shadow(); .header-search-form { * { margin: 0; } #search, .input-group-btn { display: block; float: left; } #search { width: 80%; } .input-group-btn { width: 20%; } .prr-icon-close { position: absolute; top: 0; right: 7px; display: none; } .js-shown { display: block; } } .prr-tab-focus { margin: 1rem; } } /** * * #.# Media Queries * */ /* Larger than tablet */ @media (min-width: 991.99px) { .mobile-navigation, .menubar-right, .logo-container .search-icon { display: none !important; } } /* Medium devices (tablets, less than 992px) */ @media (max-width: 992px) { .main-nav, .nav-button, .header-navigation, .menu-wrapper .search-icon { display: none; } .search-icon { margin-right: 3.2rem; } /* mobile social nav */ .desktop .prr-social{ display:none; } .search-icon { padding-right: 20px; } .prr-social{ text-align:center; } } .sticky-header { top: 0; left: 0; max-width: 100%; z-index: 9; background: @white-color; } .nav-button { margin: 0 1.6rem; } @media screen and (max-width: 782px){ .admin-bar .mobile-menu-open { top: 46px; } } .main-nav .menu-item-has-children > a::after, .main-nav .menu-item-has-children .menu-item-has-children > a::after{ color:@primary-color; }