[Resolved] Mobile menu animation

[David]

In the CSS – look for;

.line {
    fill: none;
    stroke: black;
    stroke-width: 6;
    transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

Change the stroke: black; to stroke: #fff;

[Dmitry]

David, Thanks a lot! That works!

May be hamb snippets was not ok because I didnt switch to svg in customizer?

Lets handle mobile smooth dropdown:

1. I have mobile header and sticky set to ON. Im lookin forward to make the smooth animation for the dropdown menu

[David]

Try the CSS Tom provided here:

https://generatepress.com/forums/topic/visually-appealing-menus/#post-1457757

[Dmitry]

Ty for this CSS example. Somehow it does work, but anyway it looks rather glitchy. It behaves half-smooth and only backwards way. Check the link I attached.

[David]

Try adding this CSS Rule to that:

.mobile-header-sticky #mobile-header.toggled .main-nav > ul {
    position: static;
}

[Dmitry]

Amazing! Thanks. The last thing. When I click the toggle, I see 1 sec blinking with blue color of the menu? Cant get what CSS drives it to happened.

[Dmitry]

Oh! Already got the answer. I can use this one:

@media (max-width: 768px) {
.inside-navigation button {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-backface-visibility:  hidden !important;
    }
}

[David]

Awesome – glad to hear thats working!!

[Dmitry]

We’ve done a great job! This one looks amazing. I think 99% of GPP users prefer to have this mobile menu instead of the original one.

[Author]

Posts