[Resolved] Move Secondary Navigation Inside Sticky Navigation

Home Forums Support [Resolved] Move Secondary Navigation Inside Sticky Navigation

Home Forums Support Move Secondary Navigation Inside Sticky Navigation

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #800399
    Joe

    I used the CSS from this thread to have the logo floated left and the main navigation centred. I’ve got a secondary menu to display a phone number floating right.

    The problem is I’m using sticky navigation so, as soon as you scroll, the secondary nav is gone. I believe the solution is to move the secondary navigation inside the main navigation. I tried the code snippet from here but there appears to be no effect.

    #800502
    Leo
    Staff
    Customer Support

    Hi there,

    Have you solved this?

    The menu items are exactly the same in static and sticky mode.

    Let me know 🙂

    #800512
    Joe

    Hey Leo. No, I’ve set it back to normal so it doesn’t bother me while I’m trying to figure it out (:

    Also, I decided I don’t want to use up the secondary navigation just for the phone number because I think I may need it for another purpose. I’m hoping to be able to centre all the navigation items except for the last one—the phone number—which should align right.

    #800528
    Leo
    Staff
    Customer Support

    What if you set the navigation to be center and use this method for the float right items?
    https://docs.generatepress.com/article/adding-icons-to-menu-items/#floating-the-icon-to-the-right

    #800905
    Joe

    I would try that but it doesn’t appear to be an option. In the Customizer, Navigation Alignment gives you Left, Center or Right. Selecting any of those has no effect that I can see. The Navigation Position option is set to Float Right, which is the only option to position the navigation to the right of the logo.

    I don’t see any overriding CSS that is not allowing the navigation to sit centred.

    #801060
    David
    Staff
    Customer Support

    Hi there,

    you can try this:

    .main-navigation ul {
        display: flex;
    }
    .main-navigation li:first-child, .main-navigation li.nav-phone {
        margin-left: auto;
    }

    Only thing is you may notice movement in the nav when it goes to sticky. Issue is because where jumping from one nav layout to another. Let me know.

    #801079
    Joe

    That’s almost got it David but it only works when the the nav goes sticky. Trying to figure out what changes because your css is still applied.

    #801086
    David
    Staff
    Customer Support

    You would need to use the Nav as the header as it won’t work with a floated navigation in the header:

    https://docs.generatepress.com/article/navigation-as-a-header/

    #801113
    Joe

    Hot dog! I didn’t know that was a feature. That’s done it. All I have to do now is adjust a bit of CSS and I’m set. Thanks David (:

    #801124
    David
    Staff
    Customer Support

    Awesome. Glad we could be of help.

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.