Community Forums › Forums › Archived Forums › Design Tips and Tricks › Primary Navigation Menu – Streamline Theme
Tagged: navigation menu color, streamline
- This topic has 3 replies, 2 voices, and was last updated 7 years, 2 months ago by pgmeyers.
-
AuthorPosts
-
January 22, 2017 at 5:50 pm #199810pgmeyersMember
I was hoping someone could give me some guidance. I'm pretty new to the wordpress arena and am having issues with changing my primary navigation menu background color.
My website is here: http://healthierthanapancreas.com/
Right now it appears to have taken the view of the background image I uploaded. I was hoping to make the actual navigation menu a solid blue. I have made no adjustment to date to my style.css file.
Thanks again for the help.
http://healthierthanapancreas.com/January 24, 2017 at 12:26 am #199917Victor FontModeratorYour menu area is transparent. You are seeing the background image because of the absence of any color. Add this to style.css and it will give you the darkblue background:
#nav .wrap { background-color: darkblue; }
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?January 26, 2017 at 8:48 am #200069pgmeyersMemberSorry Victor that didn't work.
Here is my style.css snippet in case it helps.
/* Header / Primary / Secondary Navigation
------------------------------------------------------------ */.menu-primary,
.menu-secondary,
#header .menu {
clear: both;
color: #aaa49f;
font-size: 12px;
margin: 0 auto;
overflow: hidden;
text-shadow: 1px 1px #000;
text-transform: uppercase;
width: 100%;
}#header .menu {
background: url(images/bg.jpg);
}.menu-primary ul,
.menu-secondary ul,
#header .menu ul {
float: left;
width: 100%;
}#header ul.menu {
float: right;
padding: 10px 0 0;
width: auto;
}.menu-primary li,
.menu-secondary li,
#header .menu li {
float: left;
list-style-type: none;
}.menu-primary a,
.menu-secondary a,
#header .menu a {
color: #aaa49f !important;
display: block;
padding: 25px 20px;
position: relative;
text-decoration: none;
}.menu-primary li a:active,
.menu-primary li a:hover,
.menu-primary .current_page_item a,
.menu-primary .current-cat a,
.menu-primary .current-menu-item a,
.menu-secondary li a:active,
.menu-secondary li a:hover,
.menu-secondary .current_page_item a,
.menu-secondary .current-cat a,
.menu-secondary .current-menu-item a,
#header .menu li a:active,
#header .menu li a:hover,
#header .menu .current_page_item a,
#header .menu .current-cat a,
#header .menu .current-menu-item a {
background: url(images/nav-link.png) top center no-repeat;
color: #fff !important;
}.menu-primary li li a,
.menu-primary li li a:link,
.menu-primary li li a:visited,
.menu-secondary li li a,
.menu-secondary li li a:link,
.menu-secondary li li a:visited,
#header .menu li li a,
#header .menu li li a:link,
#header .menu li li a:visited {
background: url(images/bg.jpg);
border: 1px solid #53504e;
border-top: none;
color: #aaa49f;
font-size: 12px;
padding: 9px 10px 8px;
position: relative;
text-transform: none;
width: 138px;
}.menu-primary li li a:active,
.menu-primary li li a:hover,
.menu-secondary li li a:active,
.menu-secondary li li a:hover,
#header .menu li li a:active,
#header .menu li li a:hover {
color: #fff;
}.menu-primary li ul,
.menu-secondary li ul,
#header .menu li ul {
height: auto;
left: -9999px;
margin: 0 0 0 -1px;
position: absolute;
width: 160px;
z-index: 9999;
}.menu-primary li ul a,
.menu-secondary li ul a,
#header .menu li ul a {
width: 140px;
}.menu-primary li ul ul,
.menu-secondary li ul ul,
#header .menu li ul ul {
margin: -36px 0 0 159px;
}.menu li:hover ul ul,
.menu li.sfHover ul ul {
left: -9999px;
}.menu li:hover,
.menu li.sfHover {
position: static;
}ul.menu li:hover>ul,
ul.menu li.sfHover ul,
#header .menu li:hover>ul,
#header .menu li.sfHover ul {
left: auto;
}.menu-primary li a.sf-with-ul,
.menu-secondary li a.sf-with-ul,
#header .menu li a.sf-with-ul {
padding-right: 25px;
}.menu li a .sf-sub-indicator {
background: url(images/arrow-down.png) no-repeat;
height: 16px;
position: absolute;
right: 0;
text-indent: -9999px;
top: 32px;
width: 16px;
}.menu li li a .sf-sub-indicator {
background: none;
}#wpadminbar li:hover ul ul {
left: 0;
}January 26, 2017 at 8:48 am #200072pgmeyersMemberI'm pretty new to this so I appreciate you helping me here.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.