• Skip to primary navigation
  • Skip to main content
OsomCode

OsomCode

Awesome code tutorials for WordPress and Genesis

  • Subscribe
  • My account
    • Edit profile
    • Favorites
    • Update credit card
  • Login

Highlight the last menu item with a button in WordPress

Discover how to turn the last item in the top menu of a WordPress theme into a button with a little bit of code.

Highlighting the last item of the main menu is a very effective trick to place the call to action (CTA). So much so that on this website it’s like this. 😉

To include a button in the last menu item, you just need to make some CSS modifications.

Example of last button highlighted as a button
Example of last button highlighted as a button

Here we go:

Snippet to add a button in the top menu a WordPress theme

If you want to get the same result as you see in the image above, insert this code at the end of the style.css file:

To see this and another 839 code snippets of this website, login or subscribe here.

With this snippet you apply the styles you’re looking for to the last item in the main menu.

In this specific example, you’re using the highlight color of this website, but you can change it to your liking.

And that’s it! You’ve turned the last menu item into a perfect CTA.

Conclusions

As you can see, it is very easy to insert a call to action button in the top menu of a WordPress theme.

Any questions? Let me know in the comments.

And if you want to give me any suggestion for future tutorials, leave it in the contact form. Advantages of being a subscriber. 😉

CSS Menu

To leave read and make questions about this code, you can login or register.

  • About OsomCode
  • FAQ
  • Contact

Legal Notice · Privacy Policy · Cookie Policy · Terms and conditions
Copyright © 2023

Lost your password?