Community Forums › Forums › Archived Forums › Design Tips and Tricks › Need to refine primary menu CSS
- This topic has 5 replies, 2 voices, and was last updated 9 years, 3 months ago by
michelefree.
-
AuthorPosts
-
October 21, 2015 at 10:50 am #168668
michelefree
MemberHi. I was wondering if anyone could help me to fix my primary menu CSS.
Using Genesis and Executive Pro.
My CSS is getting to be spaghetti code, and I don't like that! I want to know which code to use and use only that code. Changing something and then testing to see what is does is bad. I want to know what does what.
I tried the tutorial at: http://wpsites.net/web-design/changing-the-primary-navigation-colors-in-studiopress-themes/, and it didn't work for me. My main problem right now is the menu-item color.
I want the menu to be a bar above the slider with the following characteristics:
http://wordpress.themortgagedoctorco.com/
background-color: #056905;
font color: #fff;
hover background-color: #fff;
hover font color: #fff;
current menu-item background-color: #fff;
current menu-item font color: #056905;October 25, 2015 at 12:38 pm #168985Pixel Frau
MemberFirst off, remove the !important from this:
.nav-primary, .responsive-menu, .genesis-nav-menu .sub-menu a:hover { color: #056905 !important; }
Then change this:
.responsive-menu, .genesis-nav-menu, .nav-primary .current-menu-item > a { background-color: #056905; color: #fff; text-decoration: none; }
to this:
.responsive-menu, .genesis-nav-menu, .nav-primary .current-menu-item > a { background-color: #fff; color: #056905; text-decoration: none; }
Also, the font and background colours are currently the same (white) on hover. You'll want to change that so people can read the text when hovering on a menu item.
October 26, 2015 at 2:52 pm #169111michelefree
MemberThank you so much for your response Julia!
However, I have tried what you said, which HAS to be correct because the language doesn't lie, but it ends up making a menu that looks like the attached. The bkg goes to white, the font goes to white, the hover is white, etc. Everything is white!
Can't figure it out.
Thanks again, M@=)
http://wordpress.themortgagedoctorco.com/wp-content/uploads/2015/10/The-MOrtgage-Doctor-window.jpg
October 27, 2015 at 2:04 am #169174Pixel Frau
MemberAh, I see. You'll want to separate the .nav-primary from .responsive-menu and .genesis-nav-menu. Right now it's changing the color for all of them, which is why you're getting all white. Define the styling for .nav-primary separately so that the colours only apply to that.
October 27, 2015 at 2:19 pm #169242michelefree
MemberI tired that. It seems that when I separate out the primary menu, it makes no difference.
October 27, 2015 at 3:12 pm #169254michelefree
MemberI solved the problem!
These are the steps I took--putting them here in case anybody else has this problem.
1) Backed up styles.css. Pasted the whole contents into a text file.
2) Edited styles.css and removed all color references of ANY nav menu in styles.css. Pasted them all into a text file.
3) Opened "Lazyest Stylesheet", a plugin for WordPress that is executed after styles.css, so the commands take priority.
4) Placed the nav menu commands for the primary menu from the text file into the Lazyest Stylesheet one by one until the menu looked like I wanted it to look.The Lazyest Stylesheet editor found typos in my css coding. That helped a lot.
Again, thanks for your help!
micheleM@=) free for The Mortgage Doctor of Colorado
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.