Header
15. Februar 2023
<style> /*==== Start Underline Grow hover====*/ .ba-menu6-underline ul li a { position: relative;} /*==== Start Underline Center ====*/ .ba-menu6-underline nav ul li { position: relative;} .ba-menu6-underline nav ul li a::after { content: ""; position: absolute; bottom: 12px; height: 2px; width: 10px; left: calc(100% + 20px); opacity: 0; background-color: #0a0b24; z-index: 2; display: block; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; -webkit-transition-timing-function: cubic-bezier(.58, .3, .005, 1); -o-transition-timing-function: cubic-bezier(.58, .3, .005, 1); transition-timing-function: cubic-bezier(.58, .3, .005, 1);} .ba-menu6-underline nav ul li:hover a::after { width: 100%; left: 0; opacity: 1;} .ba-menu6-underline nav ul.sub-menu li a::after { display: none } .bricks-nav-menu > .current-menu-item > a, .bricks-nav-menu > .current-menu-ancestor > a, .bricks-nav-menu > .current-menu-parent > a{ border:none!important} /*==== End Underline Center ====*/ /*==== Start Underline Grow current ====*/ .ba-menu6-underline .current-menu-ancestor > a { position: relative;} .ba-menu6-underline .current-menu-ancestor > a::after { content: ""; position: absolute; bottom: 12px; height: 2px; width: 100%!important; left: 0!important; opacity:1!important; background-color: #0a0b24 ; z-index: 2; display: block; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; -webkit-transition-timing-function: cubic-bezier(.58, .3, .005, 1); -o-transition-timing-function: cubic-bezier(.58, .3, .005, 1); transition-timing-function: cubic-bezier(.58, .3, .005, 1);} /*==== End Underline Center ====*/ /*==== Start Submenu hover background color====*/ .ba-menu6-submenu ul li.menu-item-has-children ul.sub-menu li{ display:block; padding:0;} .ba-menu6-submenu ul li.menu-item-has-children ul.sub-menu li a{ padding: 14px 25px 14px 13px; position: relative; border-bottom: 1px solid #d3dce8!important; display: block; text-transform: uppercase; width: 100%; margin-top: 0px; width: 100%; transition: all .500s ease-in-out;} .ba-menu6-submenu ul li.menu-item-has-children ul.sub-menu li a:hover { padding: 14px 25px 14px 25px!important; transition: .3s ease; background-color: #0a0b24!important; opacity: 1!important; color: #fff!important} /*=====================*/ .ba-menu6-submenu ul.sub-menu li.current-menu-item a { padding: 14px 25px 14px 25px!important; transition: .3s ease; background-color: #0a0b24!important; opacity: 1!important; color: #fff!important} /**============*/ .ba-menu6-submenu ul.sub-menu { min-width: 240px!important; padding-top: 10px; padding-bottom: 10px; margin-top: 6px!important; } .ba-menu6-submenu .bricks-nav-menu .sub-menu .sub-menu{ min-width: 240px!important; padding-top: 10px; padding-bottom: 10px; top: 0!important; margin-top: -7px!important;} .ba-menu6-submenu nav>ul>li>ul:before { position: absolute; left: 10%; margin-left: 0; top: -14px; width: 0; height: 0; content: ''; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 12px solid #0a0b24; } .bricks-nav-menu .sub-menu > li.menu-item > a{ overflow: hidden;} .bricks-nav-menu > .current-menu-item > a, .bricks-nav-menu > .current-menu-ancestor > a, .bricks-nav-menu > .current-menu-parent > a{ border:none!important} /*========{{Mobile menu}}=============*/ /*** Responsive Styles Tablet And Below ***/ @media all and (max-width: 980px) { .ba-menu6-underline .current-menu-ancestor > a::after{ display: none} .ba-menu6-underline nav ul li:hover a::after{ display: none} } /*============================ * ////////////////////////// * Header 29 * ///////////////////////// * ==========================*/ .et-bricks-sticky-toggle { visibility: hidden; opacity: 0; transition: all 400ms; } .et-bricks-sticky-toggle:hover { cursor: pointer; } .et-bricks-sticky-toggle.et-show-toggle { visibility: visible; opacity: 1; } .et-bricks-sticky-header { transition: all 400ms !important; } .et-bricks-sticky-header.et-hide-sticky-header { transform: translateX(0%) translateY(-100%) !important; } .et-bricks-sticky-toggle .brxe-icon { margin-bottom: 0px; transition: all 400ms; } .et-bricks-sticky-header .et-bricks-sticky-toggle.brxe-icon{ transform: rotateX(180deg); border-top-right-radius: 40px !important; border-top-left-radius: 40px !important; border-bottom-right-radius: 0px !important; border-bottom-left-radius: 0px !important; } .brxe-icon { border-bottom-right-radius: 40px; border-bottom-left-radius: 40px; } </style>
<script> //Header 29 jQuery(document).ready(function ($) { // variables for header and toggle $stickyHeader = $(".et-bricks-sticky-header"); $stickyToggle = $(".et-bricks-sticky-toggle"); // attach scroll event handler function to window that // uses the windows scroll position (winScrollTop) and // the height of the header (headerHeight) to hide/show // toggle once the user scrolls beyond the header height. $(window).on("scroll", function () { winScrollTop = $(window).scrollTop(); headerHeight = $stickyHeader.height(); if ( winScrollTop >= headerHeight && !$stickyToggle.hasClass("et-show-toggle") ) { $stickyToggle.addClass("et-show-toggle"); } else if ( winScrollTop < headerHeight && $stickyToggle.hasClass("et-show-toggle") ) { $stickyToggle.removeClass("et-show-toggle"); $stickyHeader.removeClass("et-hide-sticky-header"); } }); // attach click event function on toggle tab that // toggles the "et-hide-sticky-header" class. $stickyToggle.on("click", function (e) { $stickyHeader.toggleClass("et-hide-sticky-header"); }); }); </script>