Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • April 25, 2018 at 4:31 am #946371
    drewallen

    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, 1 month ago by drewallen.
    April 25, 2018 at 6:13 am #946404
    drewallen

    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…

    April 25, 2018 at 10:23 pm #946882
    drewallen

    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…

    April 27, 2018 at 4:49 am #947592
    Ismael

    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

    April 27, 2018 at 4:54 pm #948034
    drewallen

    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.

    April 30, 2018 at 11:15 am #948980
    Victoria

    Hi drewallen,

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

    Best regards,
    Victoria

    April 30, 2018 at 2:05 pm #949076
    drewallen

    Hi Victoria. I do. See Private Content below.

    May 2, 2018 at 11:58 am #950004
    Ismael

    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

    May 3, 2018 at 8:36 pm #951071
    drewallen

    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.)

    May 4, 2018 at 8:26 am #951431
    Vinay

    Hi,

    Please replace the code with the below CSS

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

    Best regards,
    Vinay

    May 4, 2018 at 8:14 pm #951834
    drewallen

    That did the trick. Thank you!

    May 6, 2018 at 7:04 am #952231
    Rikard

    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

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