Create sticky menu in 2022 theme

  • In the linked page, I’d like to make the menu stick when it reaches the top of the screen during scrolling.

    I’d prefer to do this with CSS rather than with a plugin.

    I’m using the Full-Site Editor in WordPress 6.0 and adding custom CSS via the plugin “Site Origin CSS.” (I’ve successfully added other CSS to this theme via the plugin, so it’s working fine.)

    I added the class “sticky” to the nav in Header > Navigation > Additional CSS class(es) and then tried adding CSS from some tutorials online. None of it worked, so I removed it. (I don’t really need that additional class since there are no other menus on the site – correct?)

    I’d be grateful for any help.

    Thanks!

    • This topic was modified 2 years, 6 months ago by Bob.
    • This topic was modified 2 years, 6 months ago by Bob.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter Bob

    (@bobk88)

    By the way, the order of items in the header, from top to bottom, is: site title, spacer, navigation, and another spacer. I want only the menu to stick, not the site title.

    The following will get it to stick in place, but I want it to stick when it reaches the top of the screen.

    nav.wp-container-2.is-responsive.items-justified-center.sticky.wp-block-navigation {
    background:#f6f6f6;
    height:60px;
    z-index:170;
    margin:0 auto;
    width:100%;
    position:fixed;
    top:20;
    left:0;
    right:0;
    text-align: center;
}

    One tutorial says that sticking upon scroll requires javacscript. Is that correct, or can it be done with CSS only?

    • This reply was modified 2 years, 6 months ago by Bob.
    Thread Starter Bob

    (@bobk88)

    As a work-around, I changed the block order to:

    Navigation
    Spacer (30 px)
    Site Title

    and in the code of the previous post changed “Top” to “0”. This makes the nav sticky.

    I’m fine with this, but I’m still curious how it would be done if the site title were on top, if anyone is willing to explain.

    From the research I’ve done, it seems that Javascript is indeed required: it would be used to attach a “sticky” attribute to the nav when it reaches the top.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Create sticky menu in 2022 theme’ is closed to new replies.