Change colour of one menu item background in header - Atlantic Theme

Solved
bookieboo
Excursionist
13 0 7

Hi there! I'm hoping to change the background colour of one of my header menu items, as the collection is kind of a sub store within my main store. I'd ideally like white text and the background in #BB724F. I just want to do this for the Mummaboo menu item (see screenshot). 

Screen Shot 2021-01-23 at 2.02.53 pm.png

Any assistance would be greatly appreciated!

Cheers,
Karly

0 Likes
dmwwebartisan
Shopify Partner
4552 1022 1320

@bookieboo 

Please share your website URL and password if any. I will check and provide a solution here.

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
bookieboo
Excursionist
13 0 7

Thank you! My website url is bookieboo.com.au - Don't think there is a password set up or anything, but please let me know if you cannot access.

Cheers,
Karly

dmwwebartisan
Shopify Partner
4552 1022 1320

This is an accepted solution.

@bookieboo 

Please add the following code at the bottom of your assets/theme.css file.

ul.main-header--nav-links li.nav-item.last a {
    color: #fff !important;
    background-color: #BB724F;
}

 

Hope this works.

Thanks! 

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
bookieboo
Excursionist
13 0 7

Amazing, worked! Thank you!

bookieboo
Excursionist
13 0 7

Hate to push my luck, haha - but any idea how to also change this menu item in mobile view??

dmwwebartisan
Shopify Partner
4552 1022 1320

This is an accepted solution.

@bookieboo 

Please add this for mobile.

 

.mobile-dropdown li.list-item.last {
    background-color: #BB724F;
}

 

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
bookieboo
Excursionist
13 0 7

Amazing, thank you! You're awesome.

That worked. The only issue now is because I've added some options under that last menu item on the main header (Mummaboo), this has happened.

The dropdown options are coming up as the original colour scheme but then with the #BB724F background. I'd ideally want it to match the mummaboo colours with that as the background and then just white text (with no green).

Here's the code I have - 

ul.main-header--nav-links li.nav-item.last a {
color: #fff !important;
background-color: #BB724F;
}
.mobile-dropdown li.list-item.last { color: #fff !important; background-color: #BB724F; }

Screen Shot 2021-01-27 at 11.56.50 am.png

Any ideas? 
Karly

dmwwebartisan
Shopify Partner
4552 1022 1320

This is an accepted solution.

@bookieboo 

Please use the following code.

/* for desktop */
ul#header-dropdown-mummaboo {
    background-color: #BB724F;
}
ul#header-dropdown-mummaboo li a span {
    background-color: #BB724F;
}
/* For mobile */
ul#header-mobile-dropdown-mummaboo {
    background-color: #BB724F;
}
ul#header-mobile-dropdown-mummaboo li a span {
    background-color: #BB724F;
}

Hope this works.

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes