Submenu format

Store Design
,

Topic summary

Issue: A Shopify submenu (mega menu) displays full-width across the page; the goal is to have a compact dropdown positioned directly under its parent menu and remove the full-page white background.

Key steps and suggestions:

  • Initial CSS advice suggested positioning the submenu under the parent and limiting width (set parent relative; dropdown width auto; left 0). Screenshots illustrated the current full-width layout and the desired compact style.
  • Store preview URL and password were shared for review. A tailored CSS fix was proposed targeting the theme’s submenu selectors.
  • Implemented fix: Adding CSS (with !important) to the theme stylesheet resolved positioning/width:
    • .menu-list__submenu { left: initial !important; }
    • .menu-list__submenu .mega-menu.section { display: block !important; }
      The user placed it in base.css when styles.css wasn’t found, and confirmed it works.

Current status:

  • Positioning issue resolved.
  • Outstanding request: remove the full-page white background so only the area beneath the menu text is shown. No final CSS for background removal has been provided yet; discussion remains open.
Summarized with AI on December 11. AI used: gpt-5.
1

Good Day,

i have sample submenu, and its being full page but i want to be just below of parent menu, how can i fix it

image
image1920×1140 254 KB

1 Like
2

Set your submenu CSS to sit under the parent instead of full-width:

.site-nav--has-dropdown { position: relative; }
.site-nav--dropdown { width: auto; left: 0; }
3

@AlexRatii can you please share the website link? so I can provide the css

4

pickandmix.ae

pass: aaa12345

5

@suyash1 please check

1 Like
6

@AlexRatii please add this css to the very end of your styles.css file and check

shopify admin->online store->themes->edit theme code->assets->styles.css

.menu-list__submenu{left: initial;}
.menu-list__submenu .mega-menu.section {display: block;}

image
image1366×768 136 KB

7

@suyash1
thank you for your comment i haven’t find styles.css and do same in base.css

the result is :

image
image2302×528 89.8 KB

and also i prefer to eliminate the fullpage white background for submenu, something like this just under menu text not full page:

image
image1118×366 68.7 KB

8

need to add !important to the css, so please remove previous css and add this

.menu-list__submenu{left: initial !important;}
.menu-list__submenu .mega-menu.section {display: block !important;}
1 Like
9

@suyash1 its work perfectly , thank you

how can i remove white background ? just have background below of text

1 Like