Is there a way to close the large spacing in the navigation page?

Store Design
,

Topic summary

A user encountered excessive spacing at the top of their mobile navigation menu drawer, as shown in their screenshot.

Solutions Provided:

Three community members offered CSS-based fixes targeting the same issue:

  • Quick CSS method: Add custom CSS via Theme Customizer (Online Store > Themes > Customize > Theme settings) to set .menu-drawer__navigation padding-top to 0px on mobile devices

  • Direct code editing: Modify component-menu-drawer.css file by:

    • Adding margin-top: 0px !important; at line 163
    • Adjusting padding values at line 188
    • Alternatively, append CSS rules at the end of the file to remove top margin and padding

Status: Multiple working solutions provided. All approaches use media queries for mobile screens (max-width: 749px) and target the menu drawer navigation element with !important flags to override default spacing.

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

danielbiz_0-1730935761613.jpeg
danielbiz_0-1730935761613.jpeg459×998 44.5 KB

danielbiz_1-1730935771528.png
danielbiz_1-1730935771528.png285×400 97.7 KB

website is: lootworld.shop

2

Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings

@media (max-width: 749px) {
.menu-drawer__navigation { padding-top: 0px !important; }
#menu-drawer .menu-drawer__navigation .menu-drawer__menu { margin-top: 0px !important; }
}

Screenshot 2024-11-07 at 08.19.08.png
Screenshot 2024-11-07 at 08.19.08.png992×842 346 KB

3

Hi @danielbiz

Edit theme code:

Kyle_liu_0-1730945614348.png
Kyle_liu_0-1730945614348.png1145×506 75.2 KB

2.find component-menu-drawer.css,

a. at 163 line, add margin-top: 0px !important;

.has-submenu.list-menu {
  padding: 8px!important;
  margin: 16px!important;
  background-color: rgba(var(--color-background), 1);
  border-radius: 12px;
  backdrop-filter: blur(16px);
  border: 1px solid var(--color-button-hover);
  box-shadow: 0 0px 16px #00000050;
  margin-top: 0px !important;
}

b. at 118 line, modify

.menu-drawer__navigation {
  /*! padding: 5.6rem 0; */
}
4

Hello @danielbiz
Go to online store ----> themes ----> actions ----> edit code ----> assets ---->component-menu-drawer.css
add this code at the end of the file and save.

.menu-drawer__navigation {
padding: 0rem;
margin-top: -1rem !important;
}

result

76.png
76.png480×800 286 KB

If this was helpful, hit the like button and accept the solution.
Thanks