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: [lindcom_0-1657810776382.png] And that’s what I mean (this example is another Shopi…

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 :slightly_smiling_face:

Hi and welcome! Could you post the URL to your store and I will gladly take a look for you :slightly_smiling_face:

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

Awesome! Thanks a lot, it worked! :smiling_face_with_sunglasses: 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…

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; }

I thought the same but unfortunately doesn’t make any change. Also tried this one without any impact: color: #fff !important;

Try adding this to the bottom of your base.css file :slightly_smiling_face: ul.list-menu.list-menu--inline li:first-child span { color: #0f0 !important; }

This one works, thank you! :blush: :+1:

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

Store Design

WoodyDev July 15, 2022, 11:25am 10

You’re very welcome!

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

Topic		Replies	Views
Change single menu item background colour Store Design customizations	2	56	November 8, 2024
How to add background colour to single menu item? Store Design customizations	1	29	December 23, 2023
Customize Dawn header with different menu background color Store Design liquid	5	73	May 24, 2024
How to add background-color for buttons inside menu? Store Design menu , design , header , customizations , landing-page , css , html , product-page	6	61	July 8, 2024
Is it possible to change the menu background color in header (Dawn Theme) Store Design menu , design , header , shopify-themes	4	90	October 31, 2024

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

Related topics