[Resolved] Hamburger menu on sticky only

[Christophe]

Hi,

Just started rebuilding my site using GP + Elementor (both pro). Not too much layout-changes, mainly optimizing it a bit using GP
I’d like to achieve the following:

On the desktop frontpage a regular menu that changes to a hamburger menu when navigation is sticky.
Instead of a regular hamburger i’d like another icon. I thought of creating an elementor template with just the button that opens a popup. Or would using the off-canvas panel a better option?

On mobile I’d always have this alternative hamburger icon.

I know I could build the header completely in Elementor but then I’d loose GP functionality of having different logo for mobile, sticky, …

Thanks for your advice

[David]

Hi there,

i would do something like this:

1. Customizer > Layout > Header –> Enable Navigation as Header.
2. Enable the Off Canvas Panel for Desktop and Enable Sticky Nav.
3. Add your Navigation menu to Primary Nav and Off Canvas Panel.
4. Add this CSS:

.main-navigation li.slideout-toggle,
.main-navigation.is_stuck li:not(.slideout-toggle)  {
    display: none;
}

.main-navigation.is_stuck li {
    display: inline;
    margin-left: auto;
}

[Christophe]

Hi David,

getting closer 😉
I had to change the css to to get it working.

.main-navigation li.slideout-toggle,
.main-navigation.is_stuck li:not(.slideout-toggle)  {
    display: none !important;
}

.main-navigation.is_stuck li {
    display: inline !important;
    margin-left: auto;
}

Can I change the offset when the header becomes sticky?

[David]

Is it possible to see the site ?

[Christophe]

Not yet, still on a local machine

[David]

Can you explain what you mean:

change the offset when the header becomes sticky

[Christophe]

Hi David,
Something like the fade or slide effect without the navigation disappearing first.
Now the effect takes place on the first scroll, if possible I would like to increase the nbr of pixels that must be scrolled before the effect kicks in.

[David]

Unfortunately there (currently) isn’t a filter to change the Javascript that controls that effect. We’re looking at updating this in the future

[Christophe]

Ok, thanks!

[David]

You’re welcome

[Author]

Posts