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
6167 1476 1827

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.

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.

View solution in original post

Replies 7 (7)

Made4uo-Ribe
Shopify Partner
6167 1476 1827

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.

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
emmaD06
Tourist
5 0 2

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

Made4uo-Ribe
Shopify Partner
6167 1476 1827

Your Welcome!😊

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
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
6167 1476 1827

Hi @Huzaifa_K 

Would you mind to share your store URL? Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
jolynn85
Visitor
1 0 1

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

Made4uo-Ribe
Shopify Partner
6167 1476 1827

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. 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.