Can I Make My Top Menu Sticky with CSS?

• 

  careyjolliffe · Member · Mar 11, 2019 at 8:17 pm

  • Copy link
  • Add topic to favorites

  Is it possible to make my top menu bar always remain visible at the top of the window when the viewer scrolls down the page? Can I do it with CSS? I don’t have a business plan so I can’t use a plugin.

  The blog I need help with is: (visible only to logged in users)

• 

  torres126 · Member · Mar 12, 2019 at 5:47 pm

  • Copy link

  Hi there,

  Absolutely! Try this CSS: https://en.support.wordpress.com/custom-design/editing-css/

  .main-navigation {
  position: fixed;
  z-index: 9999;
  }

  Let me know if that works for you or if you have any further questions or issues. :)

• 

  careyjolliffe · Member · Mar 12, 2019 at 6:09 pm

  • Copy link

  Hi Torres,

  Thanks for the reply. That absolutely works but it moves my header image flush to the top of the page and is overlapped by the top menu bar. My top menu bar is 68px high. Is there a way to make my header image sit 68px from the top?

  Thanks!

• 

  careyjolliffe · Member · Mar 12, 2019 at 6:18 pm

  • Copy link

  Never mind. I figured it out on my own. I added:

  .site-branding {
  top: 68px;
  }

• 

  torres126 · Member · Mar 12, 2019 at 7:52 pm

  • Copy link

  Glad you figured it out! 👍