How can I change the main menu color to black and white?

Store Design

Topic summary

A user seeks to change their Shopify store’s main menu to have a black background with white text.

Solution Provided:

  • Access Shopify admin → Online Store → Themes → Actions → Edit code
  • Navigate to the Assets folder and open the CSS file (base.css, style.css, or theme.css)
  • Add custom CSS code targeting the mobile navigation elements with background: black and color: white properties
  • The CSS specifically targets .header__reward, #mobile-menu-drawer, and .mobile-nav__item classes

Additional Request:
The user also wants product titles to fit within 2 lines maximum on mobile view.

Secondary Solution:

  • Apply letter-spacing: -.5px to .product-item__info class
  • Note: Some titles may still exceed 2 lines depending on their length; further adjustments to product title text may be needed

Both solutions use media queries targeting screens with max-width of 1199px (mobile devices). The discussion appears resolved with working CSS code provided.

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

I want to change colour of main menu to black background and white text

My URL https://houseofsneakers.in/

Screenshot_2023-12-30-00-31-37-01_40deb401b9ffe8e1df2f1cc5ba480b12.jpg
Screenshot_2023-12-30-00-31-37-01_40deb401b9ffe8e1df2f1cc5ba480b12.jpg1080Ă—2400 86.9 KB

1 Like
2

Hi @Emiway

Check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

@media only screen and (max-width: 1199px){
mobile-navigation#mobile-menu-drawer, .drawer__header.drawer__header--shadowed  {
    background: black !important;
}
mobile-navigation#mobile-menu-drawer * {
    color: white !important;
}
.mobile-nav__item:not(:last-child) {
    border-color: white !important;
}
}

And Save.

Result:

Made4uoRibe_0-1703878668212.png
Made4uoRibe_0-1703878668212.png683Ă—778 234 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

3

Screenshot_2023-12-30-01-12-08-89_40deb401b9ffe8e1df2f1cc5ba480b12.jpg
Screenshot_2023-12-30-01-12-08-89_40deb401b9ffe8e1df2f1cc5ba480b12.jpg1080Ă—2400 205 KB

Also want this all text in Max 2 lines

1 Like
4

Please dont forget to likes also.

What I can do for the lines are decrease the letter spacing.

Check this one. Same instruction.

@media only screen and (max-width: 1199px){
.product-item__info {
    letter-spacing: -.5px;
}
}

And Save.

Some may not be on the 2 lines it is because of the titles you put on the product. You need to lesser it in order to fitted 2lines.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!