Solved

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

emmaD06
Tourist
5 0 2

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.pngScreenshot 2023-06-24 1.45.20 PM.png

Accepted Solution (1)

Made4uo-Ribe
Shopify Partner
6037 1450 1788

This is an accepted solution.

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

I hope it help.

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


View solution in original post

Replies 7 (7)

Made4uo-Ribe
Shopify Partner
6037 1450 1788

This is an accepted solution.

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

I hope it help.

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


emmaD06
Tourist
5 0 2

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

Made4uo-Ribe
Shopify Partner
6037 1450 1788

Your Welcome!😊

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


Huzaifa_K
Visitor
1 0 1

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?

Made4uo-Ribe
Shopify Partner
6037 1450 1788

Hi @Huzaifa_K 

Would you mind to share your store URL? Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


jolynn85
Visitor
1 0 1

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

Made4uo-Ribe
Shopify Partner
6037 1450 1788

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. 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com