How to fix media size issues with menu-drawer on desktop?

Store Design
,

Topic summary

A store owner customized their menu-drawer CSS to display properly on mobile phones, specifically positioning submenus at the top of the drawer. However, this optimization created layout problems on desktop when the browser window is resized smaller.

The Issue:

  • Navigation links are pushed too far toward the top when desktop screen size is reduced
  • Content becomes partially hidden, with only the top half of lists visible
  • The menu-drawer triggers on smaller desktop screens, inheriting the mobile-optimized CSS

Technical Details:

  • Custom CSS uses viewport units (vw/vh) and negative margins to position elements
  • Code includes specific styling for .menu-drawer, .menu-drawer__navigation, and .menu-drawer__submenu
  • User questions whether viewport units or media queries might be the root cause

Current Status:

  • User found an “acceptable” workaround but it doesn’t fully solve the original goal
  • Still seeking help to create a properly organized menu-drawer that works across devices
  • An image was shared showing the desktop sizing problem
Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
1

So I spent quite a bit of time making my “Menu-Drawer” work well for phone display, but now I’m having a sizing issue on desktop if I make my screen smaller.

This is what I used to adjust my menu-drawer.

}
.menu-drawer {
  width: 80vw;
  height: 60vh;
  overflow-x: none;
  top: 0;
}
.menu-drawer__navigation {
  height: 30vh;
  width: 80vw;
  top: 0;
  overflow: none;
}
.menu-drawer__submenu {
  margin-top: -40%;
  height: 40vh;
  left: 0%;
  top: 0;
  width: 80vw;
  overflow: none;
}
.menu-drawer__submenu details {
  width: 85vw;
  overflow: none;
}
#link-anime-franchise {
  margin-top: -65%;
  width: 80vw;
}
#childlink-anime-apparel {
  height: 40vh;
  margin-top: -55%;
  width: 80vw;
}

This is the Problem: This is my desktop obviously, so I made the screen smaller so it would change my nav links to the menu-drawer. Everything is pushed tooo far towards the top so you cant even see the top half of the list. I did this on purpose when viewing a cell phone because I couldn’t get the menu-drawer’s submenus to display at the top, and the code above was my work around.

WEBSITE ADDRESS: WWW.TOTALWEEB.STORE

TotalWeeb_0-1712773437764.png
TotalWeeb_0-1712773437764.png1399×1329 356 KB

Please help! I believe this is a media sizing issue, or maybe I shouldn’t be using vh/vw in my css? I have no idea on where to even begin, it took effort trying to make the phone display good.

2

I messed with it quite a bit an have an ‘acceptable’ version, although it’s still not what I was trying to do. If anyone does come up with how to make this a neat organized menu-drawer, I would still appreciate the help.