Solved

CHANGE LOGO, MENU TEXT, ICONS, AND DROP DOWN MENU COLOR IN THE DEBUT THEME

GiselleGQB
Tourist
10 0 1

Hello Everyone,

 

I’ve been at this for hours and can’t figure out how to have the menu and icons to be one color and the drop down font to be a different color. The codes I try to use just keeps making everything one color. My header background is black. So I want the header font, the menu options(navigation), and icons(search, account logo, shopping cart) to be white but want the drop down menu font to be black since the drop down menu background is white. I also wanted this change to stay the same for the mobile version as well.

 

Any help would be highly appreciated.

Accepted Solutions (2)
Renika
Excursionist
11 3 3

This is an accepted solution.

Please update previously sahred code with it, it will effect to only main menu.

ul#SiteNav > li > a, ul#SiteNav > li > button
 {color: #fff;}


View solution in original post

Renika
Excursionist
11 3 3

This is an accepted solution.

.h2.site-header__logo {
color: #fff;
}

.site-header__icons-wrapper button, .site-header__icons-wrapper a {
color: #fff;
}

View solution in original post

Replies 18 (18)

Lovvelty
Visitor
2 0 0

I had this problem as well I went on YouTube and I typed it in and the video that help me was under a young lady name (Georgia Denise) how to change background/theme color of you Shopify store. she talks a lot but it’s showing you the correct way.  It also depends on the theme you have but if you type it in YouTube I promise it’s going to pop right up

 

best wishes to you 

GiselleGQB
Tourist
10 0 1

I was able to find her channel and video you were referring to unfortunately, she mainly addresses using the basic features Shopify has to offer(nothing about coding), needed assistance more so on the correct snippet of code to use because this isn’t something the basic Shopify features can do. But thank you for taking the time to reply. I appreciate it.

Renika
Excursionist
11 3 3

Go to Online Store > Customise theme > Theme settings.

You can see the header option to change the logo, and menu navigation. Under color option you can change the color.

For menu text, Please go to Online Store > Navigation > Main Menu.

Hope it will help you.

GiselleGQB
Tourist
10 0 1

Thanks for the reply but that doesn’t help. It doesn’t just change the header color, it changes the color of all titles for the whole site. Shopify doesn’t have an option to just change menu header font color alone. Only editing code will help, just don’t know what code will change each colors independently. Every code I try just does one or the other. Thanks for trying.

Renika
Excursionist
11 3 3

I can help you with the code, please share the store url 

GiselleGQB
Tourist
10 0 1

It’s gisellequeensbeauty.com

Renika
Excursionist
11 3 3
Click to expand...
frontend password?
GiselleGQB
Tourist
10 0 1

Password is temporary

GiselleGQB
Tourist
10 0 1

@Renika the password is temporary

Renika
Excursionist
11 3 3

For Menu text, you can go with below CSS:

ul#SiteNav li a, ul#SiteNav li button {color: #fff;}
Renika
Excursionist
11 3 3

I am shopify developer, if you want, I can assist you to setup your whole store with product within a week with good design. As it seems you are facing issue with color options to setup the store.

GiselleGQB
Tourist
10 0 1

@Renika ok that code was able to change the menu white as I wanted, however it also changed the drop down text to white too, would you happen to know what coding I can use to change the drop down font to black?

Renika
Excursionist
11 3 3

This is an accepted solution.

Please update previously sahred code with it, it will effect to only main menu.

ul#SiteNav > li > a, ul#SiteNav > li > button
 {color: #fff;}


GiselleGQB
Tourist
10 0 1

@Renika THANK YOUUUUUUUU! That worked perfectly. One more thing, is there any coding that you know of that will change the Header font(Site name) and the icons(search, cart, login logo) to white too that wont interfere with the coding you just gave me?

Renika
Excursionist
11 3 3

This is an accepted solution.

.h2.site-header__logo {
color: #fff;
}

.site-header__icons-wrapper button, .site-header__icons-wrapper a {
color: #fff;
}

GiselleGQB
Tourist
10 0 1

@Renika omg I cannot thank you enough, sending hundreds of air hugs your way! Thank you thank you thank you a million times over!!!!!!!!!!!

Renika
Excursionist
11 3 3

Its my pleasure to assist you.

bobbbysmurda
Visitor
1 0 0

yo how do I make my menu icon and my cart icon more thick with bold font