Reduce width of Main Navigation Dropdown Menu

Store Design
, , ,
1

Hi,

I have scoured the other similar questions and the proposed solutions, but I can’t get any of them to work and they seem to be just different enough to not be applicable for our store. Our dropdown from the main header navigation menu is far too wide and spread across multiple columns. Ideally this would be a single column and much more condensed under the parent menu item. It is so thin that the mouse easily wanders off and the dropdown disappears.

Screenshot 2023-08-09 222740.png
Screenshot 2023-08-09 222740.png1502×905 340 KB

Our store is: https://asterpremium.com/ with the following assets:

BoydAsterP_0-1691635051152.png
BoydAsterP_0-1691635051152.png276×712 16.1 KB

Thanks,

Boyd

2

You can try to use this code and check if it is ok with you

@media only screen and (min-width: 1024px){
.header--logo_left_links_center .nav-standard {
margin-left: 400px !important;
margin-right: 400px !important;
padding-left: 0px !important;
padding-right: 0px !important;
position: relative !important;
}
}

Screenshot 2023-08-10 at 10.22.29.png
Screenshot 2023-08-10 at 10.22.29.png1378×395 534 KB

3

Thank you for the quick reply and the width is much better. I was able to add the code to the bottom of theme.css, which reduced the width to a manageable size. However, the change pushed down the checkout cart, wishlist, search and account icons on the top right. Some contextual user testing also showed the dropdown was too thin when the text doesn’t wrap resulting in their mouse constantly leaving the menu. Is there a way to expand the vertical size and prevent the offsetting of the other menu items?

BoydAsterP_1-1691639075341.png
BoydAsterP_1-1691639075341.png1495×735 287 KB

4

Hello @BoydAsterP ,

Here’s a general guide for you:

Go to Online Store → Themes → Actions → Edit code

Go to Sections → header.liquid file

Add this following code at the bottom of page

.parent-menu-item-class .dropdown-container-class {
    width: auto;
    max-width: none;
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
}

Save and preview

Hope this can help.

Transcy

5

Hi Transcy,

Thank you for the guidance. Unfortunately, that code didn’t alter anything in the header nav menu. Maybe prior code on that section file is preventing it from altering the UI.

6

I changed “relative” to “absolute” in the last line and that resolved the icon displacement issue. This code worked. Thank you Dan. theme.css

@media only screen and (min-width: 1024px){
.header–logo_left_links_center .nav-standard {
margin-left: 400px !important;
margin-right: 400px !important;
padding-left: 0px !important;
padding-right: 0px !important;
position: absolute !important;
}
}