[Resolved] Hamburger menu on sticky only

Home Forums Support Hamburger menu on sticky only

  • This topic has 9 replies, 2 voices, and was last updated 7 months ago by David.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1305969
    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

    #1306120
    David
    Staff
    Customer Support

    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;
    }
    #1306143
    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?

    #1306228
    David
    Staff
    Customer Support

    Is it possible to see the site ?

    #1306230
    Christophe

    Not yet, still on a local machine

    #1306765
    David
    Staff
    Customer Support

    Can you explain what you mean:

    change the offset when the header becomes sticky

    #1308408
    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.

    #1308573
    David
    Staff
    Customer Support

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

    #1333062
    Christophe

    Ok, thanks!

    #1333156
    David
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.