Archived topic
Restyling a site navigation
4 replies · Started by Anonymous on April 29, 2016
Hi
I've been unsuccessfully banging my head against the GeneratePress site navigation in an attempt to change its colours.
I've managed to change the background colour using a #site-navigation declaration in styles.css, but I've had no success with, eg .page_item a:hover in styles.css. I can change the .page_item hover colour by tweaking the navigation_background_hover_color line in the theme's inc/add-ons/colors.php file, but that isn't the recommended way. Yet when I replicate the inc/add-ons/colors.php path and file in a child theme, the tweak to the corresponding line has no effect, even as the child theme's other PHP files are working fine.
What am I doing wrong?
Thanks for any hints!
Do you have this line in your child theme css?
@import url("../generatepress/style.css");
https://generatepress.com/knowledgebase/child-theme-working/
Thanks, Jamal! No, that wasn't it.
It turns out I was just being clumsy figuring out the correct way to target the hover state of the menu items. Something like this works fine:
#site-navigation a:hover{
background-color: #00c;
}
Why the child theme's colors.php file doesn't override the parent theme's equivalent file is still a mystery to me, but the question is irrelevant as long as I can override the parent theme via the child theme's style.css. Problem solved. Sorry for the bother!
Except -- wait. I now find that a styles.css line such as:
.current-menu-item {
background-color: #E10019;
}
doesn't override the colors.php file's 'navigation_background_current_color' line in the generatepress folder.
It might be more convenient and efficient to generate the colour defaults in the child theme's colors.php, if I could get it to override the parent theme's file.
The best way (if you're not using the Colors add-on) is to use your browsers inspect element tool to get the exact selectors for each item.
Then you can write your CSS and it will overwrite what the theme has written.
Let me know if you need more info :)