Change Color of Desktop Menu Bar in Ware House Theme

Store Design
, , , , ,

Topic summary

A user seeks to change the desktop menu bar background color to hex #DAB25A in the Warehouse theme, while keeping the mobile version unchanged.

Proposed Solutions:

  • CSS Approach: Add custom CSS code using a media query targeting screens with minimum width of 768px, applying the background color to the .nav-bar class.

  • Theme File Edit: Modify the theme.liquid file by adding custom code above the closing </body> tag.

Both solutions involve adding custom code to target desktop displays specifically. The discussion appears to be awaiting confirmation on which method the original poster will implement or whether either solution successfully resolved the issue.

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

Good afternoon friends! We would like to know what code we can input to change the background color of the menu bar on desktop only to hex #DAB25A. We want the menu bar to remain the same on mobile. Thanks in advance for the attention and assistance.

Store: www.mochilo.co

deskedit1.jpg
deskedit1.jpg1790×505 138 KB

2

in your theme custom css section write this code

@media screen and (min-width: 768px) {
.nav-bar {
background: #DAB25A;
} }

3

Hey @MOCHILOCO

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed