Community Forums › Forums › Archived Forums › Design Tips and Tricks › navigation menu colors
- This topic has 6 replies, 3 voices, and was last updated 10 years ago by loudivers.
-
AuthorPosts
-
March 4, 2014 at 5:03 pm #93440LaurieMember
I am working with Parallax Pro and made a few adjustments in css to colors. Somewhere along the way the color changed for the header right navigation menu from white to a dark gray/ almost black. You can barely see the words in the menu now. I can't for the life of me find the fix.
Help?
http://www.rocketcitytailgate.com/March 4, 2014 at 5:15 pm #93441RobGMemberHello Laurie, Try to locate the following CSS code in your style sheet.
.site-header .widget-area .genesis-nav-menu a { color: #333;
JUst change the hex color to something lighter. Hope this helps.
To speed up the process please post the link to the website in question.
We recommend using Firebug to view source codes http://getfirebug.com/
RobGoss WordPress Developer
We build WordPress websites for your business or personal goals
http://www.robgoss.com / Follow me Twitter / https://twitter.com/robgossMarch 5, 2014 at 1:24 pm #93567LaurieMemberThanks RobG. However, that code isn't in my css. Here is what I'm looking at in my Widget Area, Site Nav, Primary Nav and Secondary Nav sections:
/* Widget Area
--------------------------------------------- */.site-header .widget-area {
float: right;
text-align: right;
width: 640px;
}.site-header .widget-area,
.site-header .widget-area a {
color: #fff;
}.site-header .widget-area a:hover {
color: #f04848;
}.site-header .textwidget {
margin-top: 27px;
}/*
Site Navigation
---------------------------------------------------------------------------------------------------- */.genesis-nav-menu {
clear: both;
color: #fff;
font-family: Montserrat, sans-serif;
font-size: 16px;
font-weight: 400;
letter-spacing: 1px;
line-height: 1;
width: 100%;
}.genesis-nav-menu .menu-item {
display: inline-block;
text-align: left;
}.genesis-nav-menu li li {
margin-left: 0;
}.genesis-nav-menu a {
color: #fff;
display: block;
font-family: Montserrat, sans-serif;
padding: 27px 20px;
}.genesis-nav-menu a:hover,
.genesis-nav-menu .current-menu-item > a,
.genesis-nav-menu .sub-menu a:hover,
.genesis-nav-menu .sub-menu .current-menu-item > a:hover {
color: #f04848;
}.genesis-nav-menu > .menu-item > a {
text-transform: uppercase;
}.genesis-nav-menu .sub-menu {
left: -9999px;
letter-spacing: 0;
opacity: 0;
position: absolute;
-webkit-transition: opacity .4s ease-in-out;
-moz-transition: opacity .4s ease-in-out;
-ms-transition: opacity .4s ease-in-out;
-o-transition: opacity .4s ease-in-out;
transition: opacity .4s ease-in-out;
width: 200px;
z-index: 99;
}.genesis-nav-menu .sub-menu a {
background-color: #000;
padding: 20px;
position: relative;
width: 200px;
}.genesis-nav-menu .sub-menu .sub-menu {
margin: -56px 0 0 199px;
}.genesis-nav-menu .menu-item:hover {
position: static;
}.genesis-nav-menu .menu-item:hover > .sub-menu {
left: auto;
opacity: 1;
}.genesis-nav-menu > .first > a {
padding-left: 0;
}.genesis-nav-menu > .last > a {
padding-right: 0;
}.genesis-nav-menu > .right {
color: #fff;
display: inline-block;
list-style-type: none;
padding: 27px 20px;
text-transform: uppercase;
}.genesis-nav-menu > .right > a {
display: inline;
padding: 0;
}.genesis-nav-menu > .rss > a {
margin-left: 48px;
}.genesis-nav-menu > .search {
display: block;
margin: 0 auto;
padding: 0 20px 20px;
width: 50%;
}/* Primary Navigation
--------------------------------------------- */.nav-primary {
background-color: #000;
margin-bottom: 60px;
text-align: center;
}/* Secondary Navigation
--------------------------------------------- */.nav-secondary .genesis-nav-menu {
padding: 20px 0;
}.nav-secondary a {
margin: 0 20px;
padding: 0;March 5, 2014 at 4:16 pm #93595RobGMemberHi Laurie, what Color Style are you using for that theme? there are a few elements that control each section of that theme you might want to check out the CSS for the Color Style your using there should be a hex color to control the header widget.
To speed up the process please post the link to the website in question.
We recommend using Firebug to view source codes http://getfirebug.com/
RobGoss WordPress Developer
We build WordPress websites for your business or personal goals
http://www.robgoss.com / Follow me Twitter / https://twitter.com/robgossMarch 5, 2014 at 4:26 pm #93597loudiversMemberopen your style sheet in a text editor like textwrangler and go to line 1882 and edit the code that RobG gave you or install jet pack, turn on custom css and add the code that RobG gave you and edit the text color as he suggested.
March 5, 2014 at 4:50 pm #93601LaurieMemberThank you both!
Loudivers- the Jet Pack solution was the fix!
L
March 5, 2014 at 5:04 pm #93604loudiversMemberyou're welcome. glad it worked
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.