Is it possible to make dropdown menu horizontal, instead of vertical?

Hi @boppar,

I’m sorry we missed your post. Have you been able to resolve this issue?

If not, you should be able to make the dropdown menu horizontal by adding this CSS code to the Additional CSS section of your site’s Customizer:

/* Horizontal dropdown menu for desktop devices /*
@media (min-width: 768px)
.main-navigation ul li.focus>ul, .main-navigation ul li:hover>ul, .secondary-navigation ul li.focus>ul, .secondary-navigation ul li:hover>ul {
    display: inline-flex;
}

This code should work for desktop devices and some larger tablet devices.

Please let us know if you need any further help! ??

@wpniall
Hi Niall.
Thanks, but unfortunately that didn’t work.

Hmm, would you mind sharing your site’s URL so we can take a further look? I tested the code on my test site, and it worked for me.

@wpniall
Of course, Niall.
https://hangmattor.se/

Thanks @boppar!

To make sure we are on the same page here, would you mind explaining if that is what you meant by `horizontal menu or if you meant something else?

I had a look at your site and set the same code using my Chrome browser’s developer tools to create this horizontal dropdown menu:

Link to image: https://d.pr/i/VAmWyH

I recommend clearing the cache of any caching plugins you may have set up on your site.

@wpniall
Hi Niall.

/* Horizontal dropdown menu for desktop devices */

@media (min-width: 768px)
.main-navigation ul li.focus>ul, .main-navigation ul li:hover>ul, .secondary-navigation ul li.focus>ul, .secondary-navigation ul li:hover>ul {
    display: inline-flex;
}

My only cache plugin is LiteSpeed Cache and I’ve purgad all caches.
Still no horizontal menu.
https://ibb.co/1LMTJbR

Hi @boppar

Thanks for the update.

I have slightly modified the code provided by my colleague and it seems to work for me:

<img src=”https://d.pr/i/5wYSGf
+” alt=”Horizontal menu”>
Link to image: https://d.pr/i/5wYSGf

/* Horizontal dropdown menu for desktop devices */

@media (min-width: 768px) {
    .main-navigation ul li.focus>ul, .main-navigation ul li:hover>ul, .secondary-navigation ul li.focus>ul, .secondary-navigation ul li:hover>ul {
        display: inline-flex;

    }
}

Can you please try it again?

Cheers!

@wpniall and @danielinhou.
Hi Niall and Dani.

Now the menu becomes horizontal:
https://ibb.co/z5Fb4YJ

The problem is that if the browser window isn’t wide enough the subemnu after Information > Praktisk information won’t be visible.

Is it possible to make submenu of the navigation menu to open up more to the left (staying below the navigation menu)? I think this image explains what I want (an image of my old site where I used Maxmegamenu).
https://ibb.co/37t6Jzd

Can this be done?

Hi @boppar,

Glad to hear Dani fixed my code (I forgot to add the extra {}!).

Please try this code to move the horizontal dropdown more to the left:

/* Move dropdown menu to the left for desktop devices */
@media (min-width: 768px) { 
  .main-navigation ul li.focus>ul, .main-navigation ul li:hover>ul, .secondary-navigation ul li.focus>ul, .secondary-navigation ul li:hover>ul {
    left: -180px;
  }
}

It should look like this:

Link to image: https://d.pr/i/jmCR93

Please let us know if that works for you!

@wpniall

That works very well for the dropdown below “Information”. Is it possible to apply this code just ju “Information” and not to the dropdown below “H?ngmattor” (the first dropdown)?

@wpniall and @danielinhou

Is it possible to apply this code just ju “Information” and not to the dropdown below “H?ngmattor” (the first dropdown)?

Hi @boppar,

Do you mean you would like the horizontal menu to display only for the “Information” dropdown and not the “H?ngmattor” dropdown?

@wpniall
Hi Niall

I would like the dropdown below “H?ngmattor” to open below the main navigation menu. Like this:
https://ibb.co/wR31dvf

The “Information” dropdown I would also like to open below the main navigation menu. Just like it does now. However, the “Praktisk information” dropdown (below “Information”) I would like to open below the other dropdown.
Something like this:
https://imgbb.com/37t6Jzd

• This reply was modified 3 years, 10 months ago by boppar.

@wpniall
Hi Niall

I would appreciate if you can take a look on the issue above.
Thanks!

Hi @boppar,

Sorry for the late reply, I seem to have missed your reply.

I had a look at your request and it looks like that will require quite a bit of customization, which we would not provide. I will leave this thread open for a bit to see if someone else can chime in and help you out.

I can also recommend the Storefront developer documentation for help with Storefront code.

I also recommend visiting the WooCommerce Facebook group or the #developers channel of the WooCommerce Community Slack for further help.

We’re lucky to have a great community of open-source developers for WooCommerce, and many of our developers hang out there, as well.