Menu drop down bar on mobile has no colour

Store Design
, ,

Topic summary

A user is experiencing an issue where their website’s dropdown menu displays correctly with a white background on desktop but appears transparent on mobile devices, causing content to overlap and become unreadable.

Current Situation:

  • Desktop version: White background displays properly on dropdown menu
  • Mobile version: Background remains transparent, creating a jumbled appearance
  • CSS code has already been added to achieve the white background on desktop

Technical Details:

  • The user has shared CSS code that targets specific navigation content classes
  • Screenshots demonstrate the contrast between working desktop and broken mobile versions
  • The issue appears to be a responsive design problem where the CSS styling isn’t being applied across different screen sizes

The discussion remains open with no solution provided yet. The user is seeking guidance on how to extend the white background styling to mobile views.

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

URL: https://tcfgxtmeg1yv0w50-17240367.shopifypreview.com

On my desktop version the drop down menu has a white background but when I view my website from a mobile its still transparent so everything is jumbled up, how do I make the same white background appear on the mobile version

Code initially added to get white background for menu dropdown:

.hidden.lg\:block.absolute.bg-page.shadow-lg.left-0.right-0.bottom-0.translate-y-full.translate-x-0.opacity-0.navigation-item-content.pb-5 {
    background: white !important;
}

Output Desktop:

emekayode_0-1706950261050.png
emekayode_0-1706950261050.png1067×376 88.6 KB

Output Mobile:

emekayode_1-1706950307710.png
emekayode_1-1706950307710.png420×502 262 KB