Ok, let's see how we can improve the navigation menu bar by adding the following CSS to Additional CSS:

.inside-navigation {
background-color: #beffff;
margin-top: 0px;
}

The navigation bar should now look like this:

It's looking better, but can we improve it even more? Try adding a border top and bottom by adding the folowing CSS to the Additional CSS to inside-navigation:

border-top: 2px #352ece solid;
border-bottom: 2px #352ece solid;
border-left: 2px #352ece solid;
border-right: 2px #352ece solid;
}

This is how the navigation bar should now look:
Want to put a vertical border, or pipe between menu items? Then add the following CSS to the Additional CSS:

.main-navigation .main-nav ul li a {
border-right: 2px solid #352ece;
margin-left: 5px;
margin-right: -5px;
}

The menu bar should now look like this:

You can also highlight a menu item when you place the cursor over it by adding the following CSS to your Additional CSS:

.main-navigation .main-nav ul li:hover> a {
background-color: #352ece;
color: #fff;
}

The menu bar should now look like this when placing the cursor over it:

That's about it for customizing the main header and menu bar. If you would like to customize the H1-H6 headers, text size and color, paragraph spacing, etc, then read on.



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