How to add background-color for buttons inside menu?

[INKLY]

Hi, I am trying to replicate the background color behind the ‘Shop’ button on the bleame website.

How can I get something similar on my menu behind the ‘Imprimante INKLY’.

Store URL: https://inkly.fr/?_ab=0&_fd=0&_sc=1&preview_theme_id=163113730313

Inspiration:

https://bleame.com/products/crystal-hair-eraser?variant=43230880497839

My menu:

[BSSCommerce-TC]

Hi @INKLY ,

Is this final result you want?

Let try insert below code at the end of file base.css and Save them

.header__menu-item:hover {
    color: white !important;
    border-radius: 10px;
    background-color: black !important;
}

[INKLY]

Hi @BSSCommerce-TC , Thank you for your reply, I would like it to be exlusive to the ‘Imprimante INKLY page’ and be static, not on hover,

Like this website: https://bleame.com/products/crystal-hair-eraser

[BSS-TekLabs]

@INKLY

• Here is the solution for you
• Please follow these steps:

• Then find the base.css file.
• Then add the following code at the end of the file and press ‘Save’ to save it.

#HeaderMenu-imprimante-inkly {
 background: rgb(46, 42, 57) !important;
    color: rgb(255, 255, 255) !important;
    border-radius: 10px !important;
}

• Here is the result you will achieve:

• Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.

[BSS-TekLabs]

Hi @INKLY ,

You can follow these steps to make the effect

1. Open Online Store > Theme > Edit Code

2. Find and open the base.css (or theme.css, custom.css) file

3. Paste the code snippet below at the bottom of the file and hit save

#HeaderMenu-imprimante-inkly {
  background: #73cdc2;
  border-radius: 12px;
}

#HeaderMenu-imprimante-inkly span {
  color: #fff;
  text-decoration: none;
}

Here is the result

Hope this helps you solve the issue.

Please don’t forget to Like and Mark it as an Accepted Solution if you find this helpful. Thank you!

[INKLY]

Thank you !!

[BSSCommerce-TC]

Hi @INKLY ,

Let try this one

.header__active-menu-item {
    color: white !important
}

.list-menu__item {
    order-radius: 10px;
    background-color: black !important;
}