Debut Theme - How to highlight a specific menu item in menu bar?

Hi Guys,

website - www.luxurybrandjewellery.com

I am wondering if it is possible to highlight a specific menu item in the menu bar?

image attached below of something I would like to add.

currently I have put “SELL” in capitals to try and emphasise it however I would like to create a background similar to the “sell” I have added next to it. Is it possible to add a background box behind one specific menu item?

thanks in advance, much appreciated.

@LuxuryJewellery ,

ul#SiteNav li:last-child {
    background: red;
    border-radius: 5px;
}
ul#SiteNav li:last-child a {
    color: #fff;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

1 Like

wow!

worked beautifully!

thank you!

@LuxuryJewellery ,

Your welcome !

Sorry!

it is now changing to the colour of all the last menu options??

is there a way to change it to do just one menu item?

@LuxuryJewellery ,

ok I will solve.

You removed sale menu ?

thank you - nope still there!

@oscprofessional any luck?

@LuxuryJewellery ,

Please give me the store access on my email Id.

@oscprofessional done - thank you!

@LuxuryJewellery ,

ul#SiteNav li:last-child:nth-child(10) {
background: teal !important;
border-radius: 5px;
}

ul#SiteNav li:nth-child(10) a {
color: #fff;
}

Update the css please!

1 Like

thank you! works :slightly_smiling_face:

@LuxuryJewellery ,

Welcome.

ask further issue!

Thank you!