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

Store Design
1

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
Screen Shot 2021-01-23 at 2.02.53 pm.png1424×290 239 KB

Any assistance would be greatly appreciated!

Cheers,
Karly

2

@bookieboo

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

Thanks!

3

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

4

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

5

Amazing, worked! Thank you!

6

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

7

@bookieboo

Please add this for mobile.

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

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
Screen Shot 2021-01-27 at 11.56.50 am.png338×221 45.4 KB

Any ideas?
Karly

9

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

10

What do I need to set up, when I want the selected menu option to be highlighted? Just like the threat starter wanted to have the last option highlighted.

Thanks!