Support » Theme: Storefront » Is it possible to make dropdown menu horizontal, instead of vertical?

Viewing 15 replies - 1 through 15 (of 15 total)
  • Niall a11n

    (@wpniall)

    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! 🙂

    Thread Starter boppar

    (@boppar)

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

    Niall a11n

    (@wpniall)

    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.

    Thread Starter boppar

    (@boppar)

    @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:

    hangmattor.se - horizontal 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.

    Thread Starter boppar

    (@boppar)

    @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!

    Thread Starter boppar

    (@boppar)

    @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:

    hangmattor.se dropdown menu layout
    Link to image: https://d.pr/i/jmCR93

    Please let us know if that works for you!

    Thread Starter boppar

    (@boppar)

    @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)?

    Thread Starter boppar

    (@boppar)

    @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?

    Thread Starter boppar

    (@boppar)

    @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 1 week, 2 days ago by boppar.
    Thread Starter boppar

    (@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.

Viewing 15 replies - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.