Keeping your site up to date is a really important job, so if you want your customers to experience different areas of your website or to find new content that you're carefully adding why not highlight the fact that there is a new article or perhaps a special offer to be grabbed!
Let's say we've added in a page show all of the latest offers into the top navigation and we want the customer to be drawn to this new area. We can do this by changing the color of the tab, like this:
It's a great way to grab the users attention! We can do this really easily by simply adding a couple of line of code into the CSS Block of the store Theme Options.
.additional_links li:nth-last-of-type(1) {
background-color: orange;
}You'll notice that in the example above we're running the additional link navigation menu horizontally across the screen (not a category navigation).
It's easy to change the color of the code by using the background-color property and alter to color of your choice.
The code we've just added will always turn the last menu link the color of your choice. What if we wanted to target the second item, and make it green? Well, you'll be pleased to learn that's easy too!!
We'd just need to use this code instead and control the highlight on the menu using the number in nth-of-type. Below we're targeting menu item 2.
.additional_links li:nth-of-type(2) {
background-color: green;
}
This is just scratching the surface of the topic and by adding in other code you can add some really cool effects!
We'd always suggest using these stand out tabs in a limited way and use them sparingly. That way, when you have something to shout about it will have maximum effect! 🚀
We've also a link here to an even more advanced article on adding stand out bubbles into your navigation!