Header menus style

Solved

Header menus style

PabloPier
Excursionist
25 0 4

Hello, I want to make the dropdown-menus Watches and More to be displayed like the currency Menu shown on the picture. I want them to have white background with black letters and when I hover to have shadow effect.
Thank you in advance!

PabloPier_0-1719660909890.png

PabloPier_1-1719660925507.png

PabloPier_2-1719661122910.png

 

Accepted Solution (1)
BSS-TekLabs
Shopify Partner
635 177 207

This is an accepted solution.

.header__submenu .header__menu-item {
    color: #000 !important;
}
.js details>.header__submenu {
 background: white !important;
}
.header__submenu .header__menu-item:hover {
  background: gray!important;
}

@PabloPier can you try it

If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 6 (6)

BSS-TekLabs
Shopify Partner
635 177 207

@PabloPier 

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

step.png

- Then find the base.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

.header__submenu .header__menu-item {
    color: #000 !important;
    border-bottom: 1px solid black !important;
}
.js details>.header__submenu {
 background: white !important;
}
.js details>.header__submenu:hover {
  background: gray!important;
}

- Here is the result you will achieve:

BSSTekLabs_0-1719662203800.png

 

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
PabloPier
Excursionist
25 0 4

Hi, thank you for the reply but when I hover the background is changed on all the tabs:

PabloPier_0-1719663049710.png


And also can we remove the space?

PabloPier_1-1719663084575.png

 

BSS-TekLabs
Shopify Partner
635 177 207

This is an accepted solution.

.header__submenu .header__menu-item {
    color: #000 !important;
}
.js details>.header__submenu {
 background: white !important;
}
.header__submenu .header__menu-item:hover {
  background: gray!important;
}

@PabloPier can you try it

If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

Rahul_dhiman
Shopify Partner
238 44 43

Hello @PabloPier 
Go to online store ---------> themes --------------> actions ------> edit code------->base.CSS
add this code at the very end of the file.

 

 

.js details>.header__submenu {
 background: white !important;
}
.js details>.header__submenu:hover {
  background: gray!important;
}
.header__submenu .header__menu-item {
    color: #000 !important;    
}

If this was helpful, hit the like button and mark the job as completed.
Thanks

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
PabloPier
Excursionist
25 0 4

Hi, when I hover over one tab the background is changed on the whole menu

PabloPier_0-1719663412004.png

 

Rahul_dhiman
Shopify Partner
238 44 43

Please add this code

.header__submenu .header__menu-item:hover {   
    background-color: #c8c8c8 !important;
}

let me know if this works.

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here