How to center main nav on page with logo on left and second nav on right ?

[Nicolas]

Hi,

I’m trying to accomplish this:

https://prnt.sc/szfgxk

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

[Leo]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Nicolas]

Hi Leo,

the website is not live.
But i can give you an access ?

[Tom]

Absolutely, you can email it to us through the form here: https://generatepress.com/contact

Just be sure to mention this topic 🙂

Thanks!

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

[Tom]

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.

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

[Nicolas]

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

[Tom]

So are you now only wanting to add icons to the secondary nav? If so, have you checked out the “Menu Icons” WordPress plugin?

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

[Nicolas]

Hi,

I still have a problem with the position of the secondary navigation in the header.

https://prnt.sc/t0juvf

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

[Tom]

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.

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

[Nicolas]

It works,
thank you very much tom

[Tom]

You’re welcome 🙂

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

[Author]

Posts