Primary menu/Navigationmenu, the menu is divided into two rows. Any solution?

Hi @boppar – that’s super exciting that you’re using WooCommerce. We always love nice feedback.

Let’s see if we can fix your problem. Do you have a link to your website for us? It might be that your font is too big and there are too many items in your menu to fit on one line. We can fix that with a bit of custom CSS.

But before we get to that I’d like to first have a look at that site of yours.

I think this image shows what I want to do:
https://ibb.co/SmHCsDT

I would try some CSS like this in Appearance->Customize->Additional CSS

.storefront-primary-navigation .site-header-cart {
  margin-top: -220px;
}

.storefront-primary-navigation .main-navigation {
  width: 100% !important;
}

It seems to work ok when testing on the default theme, though you may need to adjust the -220px value depending upon your particular setup.

Thanks Jarret!
It works fine when using the Storefront navigation menu.

However I’m using the Max Mega Menu. With that plugin the menu doesn’t get wider, it stays the same.
Any idea how to solve that?

Change .main-navigation over to .mega-menu-wrap and it may work. At least from a quick test I did, never used Max Mega Menu before so not familiar with it. If that doesn’t work, we may need a link to your site to see more specifics like Job mentioned.

@boppar the Max Mega Menu is a product that’s not made by the team behind Storefront. They will likely use a different set of CSS classes making it challenging for us to help you out, especially if you’re only sharing screenshots.

I’d advise to either get help from their support team. Or opt for the Mega-Menu extension that’s part of Storefront Powerpack.

Thanks guys.
I think I’ll just try to have less menu items.

Sounds good! Have a good one! I’ll mark this thread as resolved.

• This reply was modified 5 years ago by Job a11n.