[Support request] Sticky primary navigation logo slide-in

[Christoph]

I have a logo on my primnary menu when it’s sticky but not when it’s in normal mode (thanks for the detailed options for customizing this!). I also have the sticke navigation transition set to “none” because to me it doesn’t make sense that the menu disappears and then reappears. The result of these settings is that the moment the menue becomes sticky, it suddenly changes to the sticky layout, i.e. the one with the logo (duh). My problem with that is the abruptness of that transition. It’s ugly and gives the impression of a coding mistake. I wonder whether it is possible to make that transition smoother, for example, by having the logo slide in from the left and pushing the other menu items to the right.

Somewhere else (don’t remember where) I have seen a more sophisticated transition where the logo from the header actually jumps into the sticky nav-bar just when the rest of the header disappears. It’s genius because it looks like the logo is escaping deletion by jumping into the save haven of the menu bar. It would be great to have but I am not asking for that now. Just a more smooth transition would be great.

[Tom]

Sorry for not getting back to you sooner! Been under the weather for a little over a week now.

Here’s what I would do:

.sticky-menu-logo .main-navigation .navigation-logo {
    display: block !important;
    position: absolute;
    left: -100%;
    transition: all 100ms ease-in-out;
}

.sticky-menu-logo .navigation-stick .navigation-logo {
    position: relative;
    left: 0;
}

Let me know if that does the trick or not 🙂

[Author]

Posts