How to add the background color of one menu item in the header – theme Sense

[lindcom]

Hi guys!

I would like to add the background color of my header menu item „SHOP“.  Already tried to change the code, but it changed all three menu items’ background colors.  

The header looks like that at the moment:

And that’s what I mean (this example is another Shopify store that is also built on the theme Sense):

Background element style description I would like to achieve:    

    background: #fae8e8;

    padding: 6px 22px;

    border-radius: 3px;

Any assistance would be greatly appreciated!

Cheers,

Helena

[WoodyDev · Accepted solution]

Perfect!

Add this to the bottom of your base.css file :

ul.list-menu.list-menu--inline li:first-child {
    background: #fff !important;
}

Change #fff to whichever color you desire, search hex color codes for a list 🙂

[WoodyDev]

Hi and welcome!

Could you post the URL to your store and I will gladly take a look for you 🙂

[lindcom]

Hi!

Thanks for the reply, gladly. My store is in process, but here it is: https://www.glidie.com/

Also adding example of another store that is also built on the theme Sense and have that background item: https://bleame.com/

Best regards

Helena 

[WoodyDev · Accepted solution]

Perfect!

Add this to the bottom of your base.css file :

ul.list-menu.list-menu--inline li:first-child {
    background: #fff !important;
}

Change #fff to whichever color you desire, search hex color codes for a list 🙂

[lindcom]

Awesome! Thanks a lot, it worked! 😎

Also made it more customized by adding padding, border radius, and font-weight. For some reason couldn't choose the font color for "SHOP" item. Any ideas?

ul.list-menu.list-menu--inline li:first-child {
background: #fae8e8 !important;
padding: 0px 22px !important;
border-radius: 3px !important;
font-weight: 700;
} 

[WoodyDev]

Awesome! Glad to hear it, it will need to look like this to change the font color I believe:

ul.list-menu.list-menu--inline li:first-child {
background: #fae8e8 !important;
padding: 0px 22px !important;
border-radius: 3px !important;
font-weight: 700;
color: #000;
} 

[lindcom]

I thought the same but unfortunately doesn't make any change. 

Also tried this one without any impact:   

color: #fff !important;

[WoodyDev · Accepted solution]

Try adding this to the bottom of your base.css file 🙂

ul.list-menu.list-menu--inline li:first-child span {
    color: #0f0 !important;
}

[lindcom]

This one works, thank you! 😊 👍

[WoodyDev]

You're very welcome!

If you could take a moment to read through my signature below, I would highly appreciate it ❤️