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.
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