[Resolved] Secondary Menu Customizations

[Anthony]

I need help with two things regarding the secondary menu.

1: I was hoping to make the mobile secondary menu to expand over the mobile header instead of pushing it down with it?

2: I was also wondering how to slow down the expanding animation of the menu. I would love for it to expand, or open, slower.

Thank you!

[Elvin]

Hi,

1: I was hoping to make the mobile secondary menu to expand over the mobile header instead of pushing it down with it?

2: I was also wondering how to slow down the expanding animation of the menu. I would love for it to expand, or open, slower.

To achieve those, add this CSS:

@media(max-width:768px){
.secondary-navigation.toggled .main-nav>ul {
    position: absolute;
    width: 100%;
    background-color: #22561f;
    z-index: 100;
    animation: fadeInDown 0.7s ease-out;
}

@keyframes fadeInDown {
  from {transform: translateY(-100%);}
  to {transform: translateY(0%);}
}

.secondary-navigation {
    z-index: 100;
}

nav#mobile-header {
    z-index: 98;
}
}

What this does is, it animates how the menu shows up so it comes down slower. You can play around w/ the animate: 0.7s value.

Reducing its value speeds up the animation, assigning bigger value makes things slower. It’s counted in seconds. 🙂

A wise man once said:
"Have you cleared your cache?"

[Anthony]

Works great! Thank you!

[Elvin]

No problem. 🙂

A wise man once said:
"Have you cleared your cache?"

[Author]

Posts