How to create a horizontal dropdown in my mega menu?

Technical Q&A
1

Hello

Is there any way to make the dropdown in my mega-menu horizontal instead of vertical?

I have the theme expanse.

Website: santibo.dk

Password: Santibo123

Thanks in advance

2

Hi @JonasBorum ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/theme.css->paste below code at the bottom of the file:

@media screen and (min-width: 768px) {
    .site-nav__dropdown.megamenu .megamenu__cols {
        display: flex !important;
        flex-wrap: wrap !important;
        column-count: unset !important;
        flex: auto !important;
    }
    .site-nav__dropdown.megamenu .megamenu__cols .megamenu__col {
        width: 20% !important;
    }

}

PageFlyRichard_0-1678499146692.png
PageFlyRichard_0-1678499146692.png1589Ă—593 51.3 KB

I hope it would help you
Best regards,

Richard | PageFly

3

Hello PageFly-Richard

I’ve tried placing it under, but now it only goes down in one vertical line, but the width seems to be alright now.

4

Hi @JonasBorum ,

I’m sorry to hear that. Please give it a try with this new solution:

Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/theme.css->paste below code at the bottom of the file:

@media screen and (min-width: 768px) {
    .site-nav__dropdown.megamenu .megamenu__cols {
        display: flex !important;
        flex-wrap: wrap !important;
        column-count: unset !important;
        flex: auto !important;
        flex-flow: unset !important;
    }
    .site-nav__dropdown.megamenu .megamenu__cols .megamenu__col {
        width: 20% !important;
    }

}

I hope it would help you
Best regards,

Richard | PageFly

5

Hello Richard

Thank you, it seems to work better now. However is it possible to make Layer them on top of each other?

If u take a look at my website, it seems way to cramped after i’ve added all my brands, but also u have to scroll to the right side to see it all.

Thanks in advance!:smiley:

6

Potentially if better, it could also be letters in the left side and then a drop out to the right when hovering above the letter?:smiley:

7

Hi @JonasBorum ,

Thank you, it seems to work better now. However is it possible to make Layer them on top of each other?> > If u take a look at my website, it seems way to cramped after i’ve added all my brands, but also u have to scroll to the right side to see it all.> > Thanks in advance!:smiley:

=> You can try use below code:

@media screen and (min-width: 768px) {
    .site-nav__dropdown.megamenu .megamenu__cols {
        flex-wrap: wrap !important;
    }
}

===================================================================

Potentially if better, it could also be letters in the left side and then a drop out to the right when hovering above the letter?:smiley:

=> I’m sorry but this is out of my scope. You may try contacting Shopify support or finding another expert regarding this issue.
Best regards,

8

Thank you very much Richard, it works just like I wanted it too!:

I greatly appreciate all your help

Have a great day!

9

Yes, you can make the dropdown in your mega-menu horizontal in Shopify by using CSS. Here are the steps you can follow:

  1. Go to your Shopify theme editor and find the code for the mega-menu dropdown.
  2. Add a CSS class to the dropdown element, for example, .mega-menu-dropdown.

Add the following CSS to your stylesheet to make the dropdown horizontal:

.mega-menu-dropdown {
display: flex;
flex-direction: row;
}

This will change the layout of the dropdown from vertical to horizontal, using the CSS flex property to make the child elements (menu items) display in a row.

  1. You may also need to adjust the width and padding of the dropdown items to make them fit properly in the horizontal layout.

.mega-menu-dropdown li {
width: auto; /* or set a fixed width /
padding: 0 10px; / adjust as needed */
}

Save your changes and preview the mega-menu to see the horizontal dropdown in action.

10

Yes, it’s possible to make the dropdown in your mega-menu horizontal instead of vertical. Here are some steps you can follow to achieve this:

  1. First, locate the CSS code for your mega-menu dropdown. This code may be contained in a separate stylesheet or in the HTML code of your website.

  2. Look for the CSS code that controls the positioning and styling of the dropdown menu. This code may include properties such as “position”, “display”, “left”, “top”, and “width”.

  3. Modify the CSS code to change the display property from “block” to “inline-block”. This will cause the dropdown menu to display horizontally instead of vertically.

  4. Adjust the “width” property to control the width of each dropdown item. You may also need to adjust the “padding” and “margin” properties to achieve the desired spacing between items.

  5. Save your changes and refresh your website to see the updated mega-menu.

Keep in mind that the exact CSS code you need to modify may vary depending on the structure and layout of your website. It’s also important to test your changes across different devices and screen sizes to ensure that the mega-menu displays correctly for all users.