In part one of this series here we looked at adding in a stand out tab in the horizontal menu running across the top of your store, helping you to promote special offers or articles you've added.
Guess what? You can add it to the vertical drop down menu too!
Let jump in and show you how it's done...
As per the other article, we just need to add a simple piece of code into the CSS Block.
@media only screen and (min-width: 769px) {
.cd-dropdown .cd-dropdown-content > li:nth-of-type(6) {
background: red;
}
}In the example above, we're saying the we want to target the 6th menu item
li:nth-of-type(6) and we want to make it red background: red;
To highlight a different menu item it's a case of counting the position of that menu item and editing the code. To change the color just edit this to your preference.
If you needed the last menu item to be highlighted (no matter how many you added in the future, you need this code:
@media only screen and (min-width: 769px) {
.cd-dropdown .cd-dropdown-content > li:nth-last-of-type(1) {
background: red;
}
}When you've had some fun with this, why not check out this more advanced article and add some navigation bubble highlights to the store!