[Resolved] Customizing the Navigation Bar

[Philip]

If I want to customize the navigation bar more (gradients, rounded buttons, more margin and padding between buttons) is there a suggested plug-in that plays nice with GeneratePress?

Thanks

[Tom]

I believe you’ll have to use CSS to make those modifications.

If you’d like to make some topics for each of those requests I’ll see if I can come up with it for you 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Philip]

Hey Tom. I looked at your CSS and tried modifying #main-navigation, #main-nav, .main-navigation, .main-nav in a Child theme, but nothing seemed to work.

What would be cool would be being able to do this within the Generate Press plug-in.

[Tom]

You’ll be looking at something like this:

.main-navigation ul li a {
    margin-right: 10px;
    border-radius: 20px;
}

That will separate them and make them more round – you can add more CSS to that selector for gradients etc..

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Philip]

Thanks Tom. I’ll give that a try. I didn’t realize I had to use ul li as part of .main-navigation.

It would be cool if we could create these effects right inside your GP plug-in.

[Tom]

Some people have mentioned a special effect add-on – rounded corners etc.. I’m thinking about it 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[bluebit]

do

[Author]

Posts