sticky logo on navigation element

  • Arnoud
    May 27, 2026 at 12:28 pm

    I’m wondering how to set up a sticky logo that only appears when I enable the header element as sticky on desktop.
    In the old setup, I could configure a sticky header via the Customizer under Layout → Sticky Header, but that doesn’t work when using Elements.
    Currently, I have:

    A header block placed on the “Above Header” hook, containing a Navigation element with the primary menu
    A separate Site Header Element with a large logo on the left and a secondary navigation on the right

    What I’m trying to achieve:

    When I scroll down, the primary navigation becomes sticky
    At that point, I only want to show a small logo inside that sticky navigation
    This small logo should not be visible when the sticky navigation is not active

    The sticky site header only works properly when set to “Always Sticky”.
    With the other options, a gap appears between the header bar and the menu, and the menu overlaps the logo.

    image: https://postimg.cc/MvP91fk0

    How can I set this up correctly?

  • Ying
    May 27, 2026 at 1:29 pm

    Hi there,

    1. Add your logo to the Menu container block, and add a class to the image block, eg. logo.
    https://app.screencast.com/BzU7W9vdP7BsZ

    2. Set the logo image’s display to none.
    https://app.screencast.com/RAVaIclfV0PsV

    3. Select the Site header block, click the manage selector button, and create a new selector &.gb-is-sticky .logo, and set its display to block.
    https://app.screencast.com/ExFaIdUetuVxR

  • Arnoud
    May 27, 2026 at 1:48 pm

    Thank you very much, this works!

  • Ying
    May 28, 2026 at 6:33 am

    Glad to hear that 🙂

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