[Resolved] Make nav bar part of header and make both sticky

Home Forums Support Make nav bar part of header and make both sticky

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1095152
    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.

    #1095321
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #1096313
    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.

    #1096587
    Tom
    Lead Developer
    Lead Developer

    No problem!

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

    #1096839
    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.

    #1097465
    Tom
    Lead Developer
    Lead Developer

    Try adding this:

    .main-title a {
        text-decoration: none;
    }
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.