CSS Tricks: A more convincing subtab nav


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 :slight_smile: but people like this one. Take it for a spin and change everything :wink:

Paul Edmonds
Head UX/UI