- This topic has 9 replies, 3 voices, and was last updated 5 years, 1 month ago by David.
-
AuthorPosts
-
February 3, 2019 at 11:53 am #800399Joe
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.
February 3, 2019 at 3:21 pm #800502LeoStaffCustomer SupportHi there,
Have you solved this?
The menu items are exactly the same in static and sticky mode.
Let me know 🙂
February 3, 2019 at 3:56 pm #800512JoeHey 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.
February 3, 2019 at 4:51 pm #800528LeoStaffCustomer SupportWhat 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-rightFebruary 4, 2019 at 6:16 am #800905JoeI 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.
February 4, 2019 at 7:02 am #801060DavidStaffCustomer SupportHi 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.
February 4, 2019 at 7:27 am #801079JoeThat’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.
February 4, 2019 at 7:39 am #801086DavidStaffCustomer SupportYou 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/
February 4, 2019 at 8:09 am #801113JoeHot 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 (:
February 4, 2019 at 8:20 am #801124DavidStaffCustomer SupportAwesome. Glad we could be of help.
-
AuthorPosts
- You must be logged in to reply to this topic.