[Resolved] Secondary Navigation how to float some menu items to the left?

[bluebit]

For my site, I’m trying to float all my menu items to the left except the shopping cart icon. I added the below css class to each menu item but it doesn’t work:

menu-item-float-left

[Leo]

Hi there,

Try adding the menu items that you want to float left using a menu widget in top bar:
https://docs.generatepress.com/article/top-bar-widget-area/

Then activate merge with secondary navigation:
https://docs.generatepress.com/article/top-bar-widget-area/#secondary-navigation

Let me know if this helps 🙂

[bluebit]

that works except the shopping cart can’t get added into the menu, there is no option and the cart needs to float to the right.

[bluebit]

i just installed a wordpress woocommerce add shopping cart to menu plugin and trying to get this to work.

[bluebit]

nice I got it to work, now how do I add padding to the left and right sides of the top menu?

[Leo]

What padding are you referring to?

It looks really good to me right now?
https://www.screencast.com/t/zCeVBTliMPV

[bluebit]

the padding for the merged topbar/second navigation menu, I’d like to adjust the far left and far right side padding. I’d like to add some extra padding to the left of My Account and to the right of the shopping cart.

[bluebit]

also for some reason on mobile my footer links: Copyright text should be centered in the middle and the Privacy Policy should be aligned to the right, but has moved down 1 row. The footer should look exactly like my other website: mineralstudy.com

but I can’t figure out why on mobile it messes up on my new site

[David]

Hi there,

probably easier to reduce the max-width of the secondary navigation like so:

.secondary-navigation .inside-navigation {
    max-width: 1000px;
}

You’re footer is quite complex with Widgets inside a page builder widget and the styles form text alignment are defined using inline CSS…. try this CSS to force it to center on mobile:

@media(max-width: 768px) {
    .footer-bar .textwidget p {
        text-align: center !important;
    }
}

[bluebit]

Will this still work if I disabled generatepress mobile with a snippet? I have mobile show the desktop version always.

[David]

It will do but on smaller devices the screen width will be smaller then that max-width. So you won’t notice any difference. If thats an issue then add padding to the container ie.

.secondary-navigation .inside-navigation {
    padding-left: 10px;
    padding-right: 10px;
}

[bluebit]

This code isn’t working for mobile:

@media(max-width: 768px) {
.footer-bar .textwidget p {
text-align: center !important;
}
}

[bluebit]

ok, i see what the problem is, for some reason on mobile it only is creating two footer widgets instead of 3. So the center widget is moved to the left and the 3rd widget is pushed the next row.

[bluebit]

i just fixed it, there was a setting in siteorigin layout builder where i had to uncheck responsive for mobile and tablets

[David]

Glad to hear you got it resolved.

[Author]

Posts