Move Nav Bar Above Header

Viewing 3 replies - 1 through 3 (of 3 total)

  • The basic CSS for moving your main menu to the very top is this:

    .main-navigation {
  position: absolute;
  top: 0;
}

    You may also want to push your .site-branding element down to move it away a bit from the menu with something like this:

    .site-branding {
  margin-top: 20px;
}

    You can adjust that as you like but this should get you started.

    Don’t edit the theme files directly, otherwise your changes will be overwritten whenever the theme is updated.

    Since you’re already using Jetpack, an easy way to add custom CSS is to activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

    This worked for me! Thanks Kathryn ??

    example@ https://www.thehuntertraveller.com

    thehuntertraveller – glad this was helpful!

    lizbakerdesigner – I’m going to mark this thread as resolved but if you still need help moving the menu in Sela, let me know.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Move Nav Bar Above Header’ is closed to new replies.