How can I change the menu bar color on the Studio theme?

Store Design

Topic summary

A user seeks help changing the menu bar color in Shopify’s Studio theme after unsuccessful attempts with various code snippets. Screenshots show the current menu bar appearance.

Solution Provided:

  • Navigate to Shopify admin → Online Store → Themes → Actions → Edit code
  • Locate the base.css file in the Assets folder
  • Add CSS targeting header.header.header--top-center.page-width.header--has-menu nav.header__inline-menu
  • Modify background property to desired color
  • Set width: 100% and text-align: center

The original poster confirms this solution works successfully.

Follow-up Issues:

  • Users on different themes (Kalles) cannot locate base.css file; suggested alternatives include style.css or theme.css
  • One user asks how to extend the menu bar to full page width (matching announcement bar)
  • Another user reports changing the width value from 100% to 150% achieved the desired full-width effect

Status: Resolved for original poster; ongoing troubleshooting for users on different themes or seeking width adjustments.

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

Hey all! I’m trying to change the colour of the menu bar on the “studio” theme. I’ve tried literally every single code out there that I could find and nothing is working. Please help me!

Screenshot 2023-06-24 1.45.07 PM.png
Screenshot 2023-06-24 1.45.07 PM.png1359×389 22.3 KB

Screenshot 2023-06-24 1.45.20 PM.png
Screenshot 2023-06-24 1.45.20 PM.png1360×288 43.8 KB

1 Like
2

Hi @emmaD06

Try this.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.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:
  4. And Save.
header.header.header--top-center.page-width.header--has-menu nav.header__inline-menu {
    background: aquamarine;
    width: 100%;
    text-align: center;
}

Result:

Ribe_Dagandara_0-1687635179664.png
Ribe_Dagandara_0-1687635179664.png1357×448 39 KB

I hope it help.

1 Like
3

Thank you so much!!! Youre a lifesaver!!

4

Your Welcome! :blush:

5

Hey bro, I am using the Kalles Theme and can’t find the “base.css” in the edit code section anywhere… Where should I post this code to work?

1 Like
6

Hi @Huzaifa_K

Would you mind to share your store URL? Thanks!

7

Did you find out an answer to this? I also can not find base.css

1 Like
8

Check the style.css, theme.css, or would you mind to share your store URL? Im not sure if thhis code will work in your store since I provide the code base on the post owner.

9

Hello! I also used this for my store and it works great and I was able to change the color! My question is how do I make it the full width of the page, so it’d match the announcement bar width?

Thanks!

10

Hi, i wanted to do this too! i followed the exact steps as the solution on this thread, changed my colour code and changed “100%” to "150% and that seemed to work :slightly_smiling_face: