I've read questions from members asking how to change the color of the menu items in the navigation bar in the free version of GeneratePress. Most replies say .it can't be done. It can, and here's how.

Add the following CSS to your Additional CSS:

.main-navigation .main-nav ul li a, .menu-toggle {
font-family: arial;
font-size: 18px;
font-weight: 600;
font-stretch: ultra-condensed;
letter-spacing: 1px;
text-transform: uppercase;
color: #352ece;
line-height: 30px;
margin-left: 20px;
background-color: #beffff;
}

The main navigation bar should now look like this:


It's possible when you click on a menu item it may disappear. If this happens just add the following code to your Additional CSS:

.current-menu-item a {
color: #352ece !important;
}

The menu bar still doesn't look the part, sso let's see how we can improve it.



Join the Discussion
Write something…
Recent messages
mbouteiller Premium Plus
Hey Brian,

I'm very glad I found your tutorial. This is fantastic information. I'm not ready to do this part yet, but here's a question...

In your main navigation, is there a way I can put the navigation headings in each separate box with some spaces between them?

How are you doing? I hope all is going well for you. You're in Spain?

Kind regards,
Monica
Reply
Harrysastar2 Premium
Hi, Monica, in answer to your question, yes, it can be done, see image below, which I think is what your require.

I'm ok, thanks, Monica. I've been in Benidorm, Spain since mid-November, 2020. I only came for 3 months but have been unable to get flights back to the UK under present restrictions both in Sain and the UK. Best wishes
Reply
mbouteiller Premium Plus
Hi Brian,

Thank you. Exactly what I want. Do you know if Generate Press Premium will let me do this or do I have to use coding?

Wow, Benidorm... I never of the place and looked it up. It looks very beautiful. Years ago, I went to Valencia, and that was quite lovely too. It might be awhile then before you can leave. Ummm, I think I envy you. You must be homesick, though.

Please take care and stay well.

Regards,
Monica
Reply
Harrysastar2 Premium
Hi, Moniica, as far as I am aware, you need to generate a css-class for each item in your menu in both the free and paid theme. You also need to add some css code to your Additional CSS to define the size of your border and the space between each item.

It isn't very difficult, if you're not sure how to do it I'll help you.with the coding. Once this is placed in the Additional CSS all you need to do is create a css-class for any additional items added later. Best wishes..
Reply
Harrysastar2 Premium
Hi, Yvonne, glad you found it helpful. Best wishes.
Reply
YvonneBray Premium
Thank you for creating a wonderfull tutorial in codes in CSS. I learned a lot today:
Reply
Top