Archived topic
Hover for navigation menu
1 reply · Started by Yoeri on May 5, 2021
Hello my good GP friends! :)
I'm looking for some assistance regarding the navigation css. I'd like to create a hover like this site: https://imgur.com/a/jmS4SMI
I just want something like the lightblue background while hovering (as with 'Domeinnaam' in the screenshot). I know GP has it as a standard but the color is from the top to the bottom in the navigation, I want to create this button style effect.
Do you have some CSS code available for that?
Thank you!
Hi Yoeri,
To achive that effect, try the following steps:
1. Go to Customizing > Layout > Header, make sure the Use Navigation as Header box is NOT ticked.
2. Go to Customizing > Layout > Primary navigation, adjust the Menu Item Height to the desired value for the background to show properly.
3. Go to Customizing > Colors > Primary navigation, set a hover color for it.
4. Optional: go to Customizing > Layout > Header, adjust the header paddings.
5. Add this CSS for a rounded corner effect for the hover background color:
.main-navigation li a {
border-radius: 10px;
}Hope that works for you :)
