Multiple column dropdown menu that has dropdowns to product pages

Store Design
1

I am trying to have multiple columns in a dropdown menu for collections. These collections in the dropdown menu would also have dropdowns themselves that link to the product page. This is for the 50 states (collections) that dropdown to show the cities within (product pages). When I entered the code below on component-list-menu.css, the dropdown menu has multiple columns, but the cities are blurring together and going off the dropdown screen as shown in the highlight section of attached screenshot.

@media only screen and (min-width: 750px){
.header__submenu.list-menu{
width: 60rem !important;
}
.header__submenu.list-menu li {
width: calc(100%/3);
display: inline-block;
}

Screenshot.png
Screenshot.png998×495 65.1 KB

2

Hi @804design ,

Please send your site and if your site is password protected, please send me the password. I will check it.

3

@LitExtension The site is lifemappedshop.com and password is ‘sheost’.

4

Hi @804design ,

Go to Assets > base.css and paste this at the bottom of the file:

.header__submenu .header__submenu {
    background-color: #F8F8F8 !important;
}

Hope it helps!

5

@LitExtension I copied that code to base.css and looks like the dropdown menu made a slight improvement, but still not exactly what I am hoping for. Is there addition code I could add so that the other states in their dropdown row will remain in place when a state from that row is selected? Thanks for the help!

6

Hi @804design ,

Can you explain more about it? it’s not really clear for me to check

7

@LitExtension Sure, I attached 2 pictures to demonstrate what I’m hoping for. In this example, I selected Colorado from the Shop by Location menu to view the cities within the state. The first picture is how it is currently after I copied the code you provided above. California should not have been moved to the line below Colorado and Connecticut should not have disappeared. The second picture is a mockup of what I’m hoping for. California and Connecticut are shown in the correct places, and the cities within Colorado are positioned to fit the width of the dropdown menu from left to right. I hope this helps provide some clarity. Thanks!

Now.png
Now.png1030×745 35.3 KB

Redesign.png
Redesign.png942×667 52.9 KB

8

Hi @804design ,

With the current code, this is not possible, you need to change a lot for it.

You can just display it like this:

Screenshot.png
Screenshot.png1013×522 146 KB

Do you want to change it?

9

@LitExtension I understand. I knew it could be too much to ask for. I think that screenshot looks great. Could you please provide the code for that change? Thanks.

10

Hi @804design ,

Go to Assets > base.css and paste this at the bottom of the file:

.header__submenu .header__submenu {
    position: absolute !important;
    left: 0 !important;
    width: 100% !important;
}

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

11

@LitExtension Thanks for your help. I really like the way it looks now.

1 Like