Change Drop Down Menu

Store Design
, ,

Topic summary

A Shopify store owner using the Vivid theme is experiencing dropdown menu alignment issues. The main problems are:

Current Issues:

  • Headers are too close together and need more spacing
  • When subheader titles are longer than their parent header, the alignment breaks completely
  • Cannot locate the base.css file

Store Details Provided:

Solutions Offered:

One contributor provided CSS code to hide image sections in the mega menu by adding code to theme.css:

.image-section.mega-list.mega-list-logo {
    display: none !important;
}

Another contributor offered an alternative menu layout design that could resolve the alignment issues.

Current Status:
The original poster prefers step-by-step guidance to learn the process rather than just receiving code. The discussion remains open as they evaluate different layout options to fix the alignment problems when menu items vary in length.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

Hi, I have very, very rudimentary knowledge in CSS (pretty much none) and I have no idea how to fix this drop down menu. I’m using the Vivid theme, and I’d like to space out the headers, they’re all too close together and compact. I also cannot find base.css in my files.

Screenshot 2025-05-16 232330.png
Screenshot 2025-05-16 232330.png2491×303 13 KB

Also, when I make any of the subheader titles underneath my header longer than the header, it completely messes up the alignment.

Screenshot 2025-05-16 232649.png
Screenshot 2025-05-16 232649.png2311×329 24.7 KB

I don’t currently have my website published as it’s very much a rough draft, but if that is necessary please let me know.

1 Like
2

Could you please share your Store Password so that I take a look and provide you solution code.

Thanks

3

Hi @SB50 , can you share store URL and password?

1 Like
4

Hello @SB50

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

5

Thanks.

https://rarepearlskauai.com/

The password is AB2007.

1 Like
6

https://rarepearlskauai.com/

The password is AB2007

7

Hi @SB50

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file theme.css and add this code at the end of the file

.image-section.mega-list.mega-list-logo {
    display: none !important;
}

Result

DaisyVo_0-1747533845593.png
DaisyVo_0-1747533845593.png1878×804 173 KB

Best,

DaisyVo

1 Like
8

Thanks. I’d prefer to be guided through the steps, as I’d like to learn a bit more about it.

https://rarepearlskauai.com/

The password is AB2007

9

Thank you! Is there any way to keep the headers and subheaders from getting misaligned when they get longer?

10

Hello @SB50

You want like this.

devcoders_0-1747537052377.png
devcoders_0-1747537052377.png1346×349 256 KB

11

I wouldn’t mind that layout, the menu looks quite nice. If it would fix the issues I’m currently having as well, then I suppose yes.

1 Like
12

https://rarepearlskauai.com/

The password is AB2007

13

hey dear i also want such menu for my webiste but i am using different hosting, is it possible,

14

now i facing my another website, with same menu style,