Menu items not showing horizontally on desktop

Hey @theinternetnerd – I’m not seeing exactly what you mean when I take a look at that site.

Could you please share a screenshot of some more details of what you mean, and what you’re hoping to achieve?

@jordesign

The menu items are not showing horizontally in one line on the desktop version. If you take a lot at the drop down on the Blogs you will see that. I tried using css but it won’t fix that.

Hey @theinternetnerd – I see that the dropdown has the sub-menu items listed going downwards. Are you meaning that you’d prefer that to be a horizontal list that appears as the dropdown instead?

Or do you mean the fact the the items are wrapping (in order to stay within the width of the dropdown menu).

If so – you can try out some CSS like this which may help.

.wp-block-navigation .has-child:not(.open-on-click):hover>.wp-block-navigation__submenu-container {
    height: auto;
    min-width: 320px;
    opacity: 1;
    overflow: visible;
    visibility: visible;
    width: auto;
}

@jordesign

Yes, I want the drop downs listed horizontally.

@jordesign

Thank you for the code but it is not responsive. Especially, for the drop downs under Blogs when you are on the Homepage, Cities or the blog posts themself . If you click on Contact or Blogs menu tab and then hoover to the blog posts dropdown un Blogs you will see it shows better horizontally compared when you are on other pages. How can we fix this?

Hi there,

Do you mean in this case that this CSS should only apply for some screen sizes? Can you share more context, maybe a screenshot?