Archived topic
How to center main nav on page with logo on left and second nav on right ?
10 replies · Started by Nicolas on June 14, 2020
Hi,
I'm trying to accomplish this:
Logo on the left, Main nav is centered… and secondary nav "logo + cart" on left
Everything in the "contained" aera.
I try this code find on the forum
.inside-header {
display: flex;
justify-content: space-between;
}
.inside-header .site-logo {
order: 1;
margin-right: auto;
}
.inside-header .main-navigation {
order: 2;
margin-left: auto;
margin-right: auto;
}
.inside-header .secondary-navigation {
order: 3;
margin-left: auto;
}but i have this for the moment
https://prnt.sc/szfjdl
Secondary nav is at the left of the logo and main navigation is not centered.
Thank's for your response.
Nicolas
Hi there,
Any chance you can link us to the site in question?
You can edit the original topic and use the private URL field.
Let me know :)
Hi Leo,
the website is not live.
But i can give you an access ?
Absolutely, you can email it to us through the form here: https://generatepress.com/contact
Just be sure to mention this topic :)
Thanks!
Hi there,
Did you get this sorted? Looks like you ended up moving the secondary navigation into the main navigation and using it as the header.
Hello,
Yes my objectif was to use primary navigation as header and use secondary navigation in the primary for account and cart links with custom icons.
I have not yet managed to put the custom icons
So are you now only wanting to add icons to the secondary nav? If so, have you checked out the "Menu Icons" WordPress plugin?
Hi,
I still have a problem with the position of the secondary navigation in the header.
I thought at the start to use the custom icon font that I added via CSS code, but if you recommend the plugin then I can try.
On the other and, I do not know how to change the logo of the woocommerce basket via the plugin
Try this:
.inside-navigation .secondary-navigation {
order: 10;
margin-left: auto;
margin-right: 0;
}There are a couple of options for the WooCommerce basket in Customize > Layout > WooCommerce.
It works,
thank you very much tom
You're welcome :)
