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

Store Design
1

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.

Screen Shot 2022-08-02 at 9.53.46 pm.png
Screen Shot 2022-08-02 at 9.53.46 pm.png3356×1728 343 KB

2

@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
3

wow!

worked beautifully!

thank you!

4

@LuxuryJewellery ,

Your welcome !

5

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?

Screen Shot 2022-08-02 at 10.41.38 pm.png
Screen Shot 2022-08-02 at 10.41.38 pm.png3356×1732 341 KB

6

@LuxuryJewellery ,

ok I will solve.

You removed sale menu ?

7

thank you - nope still there!

8

@oscprofessional any luck?

9

@LuxuryJewellery ,

Please give me the store access on my email Id.

10

@oscprofessional done - thank you!

11

@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
12

thank you! works :slightly_smiling_face:

13

@LuxuryJewellery ,

Welcome.

ask further issue!

Thank you!