Customize the Last Menu Item Using CSS

Programmers

We all know that your homepage should have a call to action – whether that be connecting on social media, buying a product, or contacting us. One of the fairly popular ways to make that happen is by adding a bright button to the end of the navigation at the top of your website. Sure, you could do this with HTML, but we’re going to do it with pure CSS3 because simple code is beautiful.

change last menu item using css

Why do it with CSS only?

Anytime you choose one route of coding over another you should have a good reason. The image above came from Web Tech Academy in Florence, Italy (a website I’ve been working on), which was created in WordPress. But this reason really applies to any CMS.

If I hard coded it, here’s a few of the issues I’d come up against:

  • moving the menu over
  • hard-coding the button in the template
  • fixing spacing issues for responsive
  • moving the management of button on the backend or removing the ability of the client to change the text on the button

Not pretty.

But with CSS3, we skip all of these issues.

Referencing using CSS

We used a few CSS techniques in this instance that you might not be as familiar with. Mainly, the last-child property.

#navigation > ul > li:last-child { }

The first thing we do is reference it correctly. In the website above, the menu is inside of the Div ID “navigation”. Next the menu is actually a list, so we’re referencing the “ul” (the HTML for a list) and then the “li” (the HTML for each item in the list).

Next we add on “:last-child”. This tells the CSS that all the properties we’re going to be adding will only apply to the last item/child in the list. This can be a bit confusing because we’re not referencing the last child of the last list item, but the last list item itself. Think of it as saying “the last child that is a li”.

Finally, did you notice those greater than signs (>)? Normally when we reference items inside of one another you just put a space inbetween like this:

#navigation ul li:last-child { }

BUT this comes with a problem. What if you have a submenu/sublist drop-down item from one of the main menu items? That item (or rather, the last item in that sub-list) will also receive this coding which is not what we want. The greater than signs tell the coding to only apply it to immediate children, not children and grandchildren.

The CSS Properties

We really only used a few properties here:

border-radius: 7px;
background-color:#c41616

That’s it!

Ok, to be fair, I had to add some overriding CSS styles to deal with some of the styles we had applied to the other menu items. I removed/changed padding, margins, text color, and borders. Of course those extra items won’t apply to everyone as they’re specific to that theme, so I’m not going to include them here (you can check out the Web Tech Florance website to see exactly what I did). But those are the most likely items you’ll be editing to make the button go where you want.

Summary

Once you reference the “:last-child” correctly, the rest just comes together. And now your client (or you) can edit the button’s text within the CMS menu area just like normal!

Comments