Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #946371

    I’d like to have the main menu in the header remain sticky and retain its background color and size while scrolling through a page.

    Examples in the Private Content box.

    My current menu settings are “Logo center, Menu below” with a custom header height of 207px to accomodate the background image behind the logo area. Header style is “Minimal”. Behavior is set to sticky, but I do want the logo area to scroll away while scrolling down the page, just leaving the main menu at the top. The resulting effect would be somewhat like the demo at https://kriesi.at/themes/enfold-lifestyle-blog/

    • This topic was modified 7 years ago by drewallen.
    #946404

    I’m almost there with this:

    .header-scrolled #header_main > .container {
    display: none;
    }

    .av_minimal_header #header_main_alternate {
    background-color: #98252f;
    }

    The scrolling is still just a little funky now. I’d rather have the logo remain the same size as it scrolls up, and not have the momentary double-height of the menu area…

    #946882

    Fixed the menu area behavior with
    .html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 0px !important;
    }

    All that’s left is to figure out how to have the logo maintain its size as it scrolls away and the menu pins to the top…

    #947592

    Hi,

    Thank you for using Enfold.

    You don’t need these modifications if you want the header to stick to the top. Please go to the Enfold > Header > Header Behavior panel and then enable the “Sticky Header” option. You’ll find more options there.

    Best regards,
    Ismael

    #948034

    Thanks Ismael. I DON’T want the header to stick to the top. I only want the MENU to stick to the top, NOT the logo or header background image.

    #948980

    Hi drewallen,

    Do you have a mockup of it should look like when the page scrolled past the logo?

    Best regards,
    Victoria

    #949076

    Hi Victoria. I do. See Private Content below.

    #950004

    Hi,

    Thank you for the update. Enable the “Unstick topbar” and the “Shrinking Header” in the “Header Behavior” panel and then add this css code.

    .header-scrolled .av-logo-container {
        display: none;
    }

    Best regards,
    Ismael

    #951071

    Thanks,
    It’s getting closer, but in the immediate transition after the logo container goes away, the menu bar nearly triples in height for a moment. (See attached screenshot.)

    #951431

    Hi,

    Please replace the code with the below CSS

    .header-scrolled-full .av-logo-container {
        display: none;
    }

    Best regards,
    Vinay

    #951834

    That did the trick. Thank you!

    #952231

    Hi,

    Great, glad you got it working. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.