For a song index website, I wanted to style the desktop navigation to resemble a music staff (stave). You can tweak your WordPress site’s navigation to look and function as you like, so long as you are keen to edit the theme files. Under the main menu item “Appearance” find the last link “Theme Editor.” This gives you access to the stylesheets and other important files such as header and footer.
The way to proceed is to first look at your homepage in a browser and Inspect the nav elements, from the wrapper down to the unordered list (ul) down to the link level. This tells you what file and CSS rule is acting on each element in play.
For a staff, I first wanted to define the space with a border. I put a 3px black border on the unordered list. Next, for each list item (li), I gave a border-right of 2px black. Then, for the first list item, I made a rule (li:nth-child(1)) for a left-border. At this point, we have a nice graph, but no horizontal lines. We will get that from a background image.
To make it, I had to first discern the height of the nav element using a Chrome ruler plugin. 96px. In Photoshop, I created a 960px x 96px image and used the Line tool to make 3 horizontals (the bottom and top provide for the 4th and 5th lines). I uploaded to the WP Media Library and copied its URL.
Instead of applying it to the <ul>, I set it a level higher, to its surrounding <div>. The reason was that I knew I wanted a clef, which I would use as the <ul> background. I found a good clef image online, and edited it for the Web in Photoshop, down to a 96px height. So, we have the staff background in the <div>, setting it so it can repeat horizontally if needed (for wider screens). And we have the clef symbol, no repeat, that we position near the left boundary of the <ul>. But check that your link names appear fine in a space between the horizontal lines. You may have to adjust, as I did, the position of the <a>.
So, what’s missing? Notes! But we don’t want to clog up our nav with static notes. We want our links to be clear. It would be fun instead to make the music notes part of the user interaction; namely, the hover state of the <a>. A note will be hidden, and appear on hover. To keep things simple and consistent, we decide to use the same half-note image for each of the <a>. (We found a good image online). We set it as the background image of each <a>, with a background-position (vertically) of 150%, which hides it from view. On hover, we give it a position so it’s visible on the scale. To add variety, we make a separate rule for the 3rd and 5th links, to make the note display even higher on the scale.
And that’s that! Check it out at ItGoesLike.com in Desktop. Here’s the code from the top down…
.menu-menu-1-container {
background: #fff url(https://itgoeslike.com/wp-content/uploads/2024/10/stave-lines-2.jpg) left top;
}
.main-navigation ul {
display: block;
border: 3px solid #000;
background: transparent url(https://itgoeslike.com/wp-content/uploads/2024/10/treble-clef-2.png) 70px center no-repeat;
margin-top: 20px;
margin-bottom: 24px;
}
.main-navigation li {
display: inline-block;
width: 140px;
border-right: 2px solid #000;
}
.main-navigation li:nth-child(1) {
border-left: 2px solid #000;
}
.main-navigation ul.nav-menu > li > a {
padding: 2px 10px;
background: url(https://itgoeslike.com/wp-content/uploads/2023/07/music-note-l.png) 20% 150% no-repeat;
background-size: 32px 32px;
transition: 1s background;
position: relative;
top: 6px;
}
.main-navigation ul.nav-menu > li > a:hover {
padding: 2px 10px;
background-position:20% 88%;
font-style:italic;
color:red;
}
.main-navigation ul.nav-menu li:nth-child(3) a:hover,.main-navigation ul.nav-menu li:nth-child(5) a:hover {
background-position:20% 20%;
}