[Resolved] Help with alignment and logo in secondary navigation

[Alexandra]

Hey guys,
I’m hoping you can help me with my secondary navigation.
I have set-up the secondary navigation only on shop pages (with the main navigation hidden) and added the site logo to it using the function I found here: https://generatepress.com/forums/topic/logo-in-secondary-menu/

Can you help me please:

1. Keep the navigation alignment to center for desktop and have the logo aligned left?
2. Have the hamburger icon aligned right on mobile?

You can see my shop page here: https://alex.bandiwork.dev/shop

Thank you so much!

[Leo]

Hi Alexandra,

Have you considered using a plugin like If Menu so you can just use the primary menu through out the entire site and hide/show some menu items on specific pages?
https://en-ca.wordpress.org/plugins/if-menu/

I can provide some CSS as you requested but I believe my suggestion would be the better solution.

Let me know 🙂

[Alexandra]

Hey Leo!
Thank you so much!
I did see your plugin suggestion in other threads, but I chose to use the secondary nav for my shop because I also want different colours and behaviours for the nav bar (such as sticky on shop pages and non-sticky on all other pages, etc).
Plus, I usually do prefer some extra CSS instead of yet another plugin…

[Leo]

Can you disable Autopimize and any other caching plugin so I can inspect the code better?

Thanks 🙂

[Alexandra]

Oh, I apologise!!
Sure thing, all caching plugins are deactivated now.

[David]

Hi there,

try adding this CSS:

/* Position desktop secondary nav logo */
@media(min-width: 769px) {
    .secondary-navigation-logo {
        position: absolute;
        left: 0;
    }
}
/* Align secondary mobile toggle right */
.secondary-navigation .menu-toggle {
    text-align: right;
}

[Alexandra]

Thank you so much, David!
This is great! 🙂

[David]

Glad to be of help!

[Author]

Posts