Theme Settings Colors - how to change menu text color?

New Member
6 0 0

Hi,

I'm using the New Standard theme, and am trying to customize the colors of my site.  I can change most colors, but for some reason I can't find where to change the color of my menu text.  I want to change the text and the hover text colors.  Strangely I can change the "current page link" in the menu, but not the other links.  Is there a missing setting somewhere?  Will I have to edit the code?  Does anybody know how to edit the code to do what I want?  The list of color settings in the theme is below, as well as the site and password if you need it.

Thanks!

http://superrcshop.com/

password: glaiyu

Global

Store Title / Headings
Page — Background
Content area transparent?
Content area — Background
Primary Borders
Secondary Borders
Cart Total / Buy Button — Background
Cart Total / Buy Button — Background Hover
Cart Total / Buy Button — Font
Text Input — Borders
Text Input — Font
Text Input — Hint

Header

Header Text / Link - this is only for the cart text in the header
Header Link — Hover - this is only for the cart text in the header
Header Link — Underline - this is only for the cart text in the header
Header Link — Underline Hover - doesn't seem to do anything
Current Page Link - this I figured out
Drop-down Background
Drop-down Link
Drop-down Link — Hover

Body

Text — Font
Text — Highlight
Text — Blockquote
Text — Blockquote Border
Table — Background
Table — Border
General Link
General Link — Hover
Slideshow Navigation
Slideshow Navigation — Hover
Price
Sale Price
"Sale" Circle
"Sold Out" Circle
Make product background transparent?
Product — Background
Meta Text / Link
Meta Link — Hover
Meta Link — Underline
Meta Link — Underline Hover
Pagination — Background Hover
Pagination — Border Hover
Search — Highlight
Comments Quote Icon

Sub Footer

Text
Link
Link Hover

0 Likes
Highlighted
Shopify Expert
351 0 34

I'm not as familiar with new standard but yes, looks like you'll have to change the CSS - in the style.css file (or maybe it's style.css.liquid) at the very bottom of the file you can add this.

.nav-item .nav-item-link {
   color:  #000000 !important;
}

.nav-item .nav-item-link:hover {
  color: #FFFFFF !important;
}

the first one affects the font color of normal nav-item links (not dropdown link colors) and the second affects the colors when hovered.  The !important tells the viewer's computer that no matter what those colors are anywhere else in the code use these colors.  And the fact that you're putting this at the bottom of the style.css sheet ensures it will have the 'final say'

#000000 is black and #FFFFFF is white - it should look pretty awful ;)  so pick your own six digit hex colors and put them in there.  Don't know what color you want?  ... have fun (https://kuler.adobe.com/create/color-wheel/) -- if you want to define the color a different way you can look at this for more info http://www.w3schools.com/cssref/css_colors.asp

 

0 Likes
Highlighted
New Member
6 0 0

Worked, thanks!

0 Likes