DAWN THEME: How do I change the background / font color of ONE menu item?

[AshHannah]

Hi there -- I'm trying to make the last menu item (FREE Printables) look like a button so it sticks out from the others. Ideally white font with #F18031 background.

Here is a screenshot of my menu. (Thanks in advance for your help!)

[KetanKumar]

@AshHannah 

yes please share store url 

[eFoli-Marvic]

@AshHannah please share your store URL and password(If it is password protected.). So that I can check and give you the exact solution.

[AshHannah]

Hi there: Affirmativities.com
Password: Open

Thanks!

[eFoli-Marvic · Accepted solution]

Hi @AshHannah 

add this code to your base.css file.

Navigate to online store >> Click edit theme code.

Now find base.css and paste the following code.

.header__inline-menu .list-menu li:nth-child(4){background: #F18031 !important;}

.header__inline-menu .list-menu li:nth-child(4) a{color: white !important;}

I hope it will be helpful for you.

Thanks

Did it solve your issue?

   - If yes, Like & Mark As Solution to help the community

   - If not, let me know. also share a screenshot of the code that you added.

[AshHannah]

That worked! Thank you so much! 🙂 

[J_Clarke_]

Hi there, 

This worked for me, thank you! However it also changed the colour of pages that dropped down, I only want to chain the main menu not items nested underneath... Any help would be great 🙂

[Marta11]

Hi Marvic, how could we do it so it works on mobile as well? Just for this same one item of the menu? Thank you!

[rpm2]

Hello, can you help me with the same issue please?

I have the prestigie theme.

[Marta11]

Hey!

I found a code element that helped me do it, however, it only works for the
desktop version and not on mobile. Also, if you have a dropdown menu, it
will apply as well.

The code is as follows (remember to change the #number with the colour
you'd like):
}
.header__inline-menu .list-menu li:nth-child(1){background: #FAFAFA
!important;}

.header__inline-menu .list-menu li:nth-child(1) a{color: #F8B105
!important;}

You can copy and paste it at the end of your base.css page.

[rpm2]

Mine is the prestige theme, i dont find a base.css page 😞
Thanks anyway!!

[KetanKumar]

@rpm2 

oh sorry for that issue can you please send store url

[rpm2]

I Will send you by email. Many thanks!