In a previous post (see: ‘navigation fade’) the example had a bold rounded navigation bar
This is really easy to do and only requires a few classes:
Set the background of the subtabs to a dark blue and make the corners rounded.
.SUBTABS ul.nav {
background: rgb(37, 55, 75); /* make the background blue */
border-radius: 5px; /* makes the corners rounded */
}
Change the way the links look… This makes the link white, but at an opacity of 75%.
.SUBTABS ul.nav a {
color: rgba(255, 255, 255, 0.75); /* makes the text white, but notice **rgba** adds the ability to change the opacity value (0.75) */
}
Change the way the link looks when ‘hovered’… This just makes it a different colour.
.SUBTABS ul.nav a.nav-link:hover {
color: rgb(147, 188, 204); /* makes the text a light blue on hover */
}
Change the way the active link looks… This just makes it white and bold.
.SUBTABS ul.nav a.active {
color: rgb(255, 255, 255); /* makes the text colour white */
font-weight: bold; /* makes the font bold */
}
The standard subtab navigation in MATS is deliberately simple, partly to allow you to make changes such as this.
Told you it was easy 
but people like this one. Take it for a spin and change everything 
Paul Edmonds
Head UX/UI