Make nav bar part of header and make both sticky

[Cristo Rey]

Two questions in one: I have read several suggestions here, but not found my answer. I know there is an option to have the menu on top of the header, but that is not what I am trying to do.

I would like to make the menu actually part of my header (with the sky blue background as is). Then, since my menu is sticky, I assume I could then make the header/menu sticky as well.

[Tom]

Hi there,

It is possible to un-hook the header as is and then hook it into the header. However, this will not make the entire header sticky.

To do that, you would need custom CSS. However, I wouldn’t suggest it, as the header is pretty tall and will take up a decent amount of screen space.

To move the navigation inside the header, try this:

remove_action( 'generate_after_header', 'generate_add_navigation_after_header', 5 );

add_action( 'generate_after_header_content', function() {
    generate_navigation_position();
} );

To make the header sticky, try this CSS:

.site-header {
    position: sticky;
    top: 0;
}

Let me know if that does it or not 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Cristo Rey]

Thanks, Tom. Not going to try to un-hook the header…sounds like it could be a mess. Will just leave it as is for now.

[Tom]

No problem!

That code I shared should do it nicely in a backward-compatible way (in case we change things in the future).

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Cristo Rey]

Actually it almost works….pulls up the background image when I highlight one of the tabs in the menu, but not part of the header itself. Good enough for now. Still trying to get rid of the underline in the header title “The Catholic Travel Guide”. I think I must have added some css (probably got it from you since I don’t do css)but not sure how to get rid of it.

[Tom]

Try adding this:

.main-title a {
    text-decoration: none;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts