Webprojekte
moderne, funktionale und ästhetische Webprojekte mit Wordpress erstellt, die man selber pflegen kann oder es der Medienkonditorei überlässt.
<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>