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

[bookieboo]

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). 

Any assistance would be greatly appreciated!

Cheers,
Karly

[dmwwebartisan]

@bookieboo 

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

Thanks!

[bookieboo]

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 · 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! 

[bookieboo]

Amazing, worked! Thank you!

[bookieboo]

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

[dmwwebartisan · Accepted solution]

@bookieboo 

Please add this for mobile.

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

[bookieboo]

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

Any ideas? 
Karly

[dmwwebartisan · 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!