Why can't the Mega Menu (Parent) and dropdown menu of my kalles theme be displayed correctly?

Store Design
, ,

Topic summary

A Shopify store owner using the Kalles theme is experiencing display issues with their mega menu (parent level) and dropdown menus not rendering correctly. The user shared screenshots showing the problem and their desired outcome.

Attempted Solutions:

  • Multiple community members (@AnneLuo and @topnewyork) provided CSS code snippets to add to theme.liquid or theme.css/base.css files
  • Suggested fixes included adjusting height properties, padding, and overflow settings
  • Code was updated and refined multiple times based on user feedback

Current Status:

  • None of the proposed solutions have worked so far
  • The user wants: dropdown menus to display in a specific vertical format, and mega menu parents to properly show their child link lists
  • Store URL provided: https://chosgohearingaid.com
  • Discussion remains unresolved with the user confirming the latest CSS adjustments (including height: 63vh, overflow-x: hidden, overflow-y: hidden) still don’t produce the desired display

The issue appears to require deeper investigation into the theme’s specific menu structure and CSS conflicts.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

HELP ME PLS . THANKS

Why can’t the Mega Menu (Parent) and dropdown menu of my kalles theme be displayed correctly?

2.png
2.png954×660 36.3 KB

1.png
1.png951×722 46.8 KB

2

Hi, @Aiden3408

Can you please share the store URL so that I can assist you?

3

Hi @Aiden3408 , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

4

https://chosgohearingaid.com

5

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code before the tag

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

6

Hello, @Aiden3408

  1. Go to Online Store
  2. Edit Code
  3. Find theme.css/base.css file
  4. Add the following code in the bottom
.cus.sub-menu.calc_pos {
    height: 16vh !important;
    padding: 1rem !important;
}

image.png
image.png596×218 58.2 KB

Thanks!

7

Didn’t work

Aiden3408_0-1735024137368.png
Aiden3408_0-1735024137368.png552×196 2.76 KB

8

I updated the code above. Please try again.

9

没用

超级菜单（父级）-- 可以显示链接列表（子级），像这样

Aiden3408_0-1735024898380.png
Aiden3408_0-1735024898380.png772×380 78.1 KB

下拉显示如下

Aiden3408_1-1735024959565.png
Aiden3408_1-1735024959565.png290×413 25.2 KB

10

is it? pre_theme.cc

base.css can’t find

Aiden3408_0-1735025229895.png
Aiden3408_0-1735025229895.png314×742 21.1 KB

11

@Aiden3408 , you can find theme.liquid
12

don’t work

Aiden3408_0-1735026238496.png
Aiden3408_0-1735026238496.png882×281 49.9 KB

Aiden3408_1-1735026258956.png
Aiden3408_1-1735026258956.png322×225 2.61 KB

i want :

dropdown display like this

Aiden3408_2-1735026367869.png
Aiden3408_2-1735026367869.png281×400 34.7 KB

Mega menu (parent) – can display listlinks (children), like this

Aiden3408_3-1735026388685.png
Aiden3408_3-1735026388685.png400×197 45.6 KB

13

@Aiden3408 replace height

height: 63vh !important;
/* add these properties too below given code*/
    overflow-x: hidden;
    overflow-y: hidden;
14

You can go to my website https://chosgohearingaid.com and see that it doesn’t display as shown in my picture.