Need navigation bar to stay on top of page while scrolling

• 

  pch44 · Member · Jul 18, 2016 at 8:04 am

  • Copy link
  • Add topic to favorites

  Hi, I would like the main navigation bar for my SELA themed website to stay on top, while someone scrolls down the page. Please let me know, thanks

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

• 

  siobhyb · Member · Jul 18, 2016 at 10:45 am

  • Copy link

  Hi there!

  You could fix the menu bar to the very top of your page by adding the following snippet to the CSS panel of the WordPress.com Customizer:

  @media screen and (min-width: 768px) {
  .main-navigation {
      position: fixed;
      top: 0;
      left: 0;
      width: 92.5%;
      z-index: 999999;
  }
  
  .admin-bar .main-navigation {
      top: 32px;
  }
  
  .site {
      margin-top: 58px;
  }
  }

  Give that a try and let me know if it works out for you. :)

• 

  pch44 · Member · Jul 18, 2016 at 3:59 pm

  • Copy link

  Thank you, the code works well.

  Also, I was wondering if I could keep the original format of Sela and have both the title/header and navigation bar stay fixed at the top, while I scroll down the page. If you have any ideas, would appreciate it. Thanks again.

• 

  siobhyb · Member · Jul 18, 2016 at 5:12 pm

  • Copy link

  You could try the following to fix the whole header to the very top of your site:

  @media screen and (min-width: 768px) {
  header#masthead {
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 999;
      left: 0;
  }
  
  .admin-bar header#masthead {
      top: 32px;
  }
  
  .site {
      margin-top: 214px;
  }
  }

  Let me know how that goes. :)

• 

  pch44 · Member · Jul 18, 2016 at 9:03 pm

  • Copy link

  Ok thanks, I appreciate it. Works well

• 

  siobhyb · Member · Jul 19, 2016 at 6:20 am

  • Copy link

  Perfect! If you have any extra questions on customising your theme, please feel free to start another thread here or on our dedicated CSS forum:

  https://en.forums.wordpress.com/forum/css-customization

  Thanks!