Dawn theme header drop down menu font is 2 different colours

Technical Q&A
1

Hello,

I am using the standard Dawn theme and have ran into an issue with my header drop down menu. The text in the menu is 2 different colours. I have inputted some code into Assets>base.css to change the background colour and the font colour of the drop down but some of the text is still same colour as theme settings.

This is the code I used to change the text colour to white:

a.header__menu-item.list-menu__item.link.link--text.focus-inset.caption-large {
color: #ffffff!important;
}

See screenshot below. I want all the text to be white but any collection headings that have sub collections below them are all still blue in colour and can’t be seen against the background,

Any help would be greatly appreciated!

MH_EC_0-1677711558840.png
MH_EC_0-1677711558840.png418×1146 43.9 KB

2

Hello @MH_EC

It’s GemPages support team and glad to support you today.

Can you give me your Store URL( with pass if your store password is enabled) so I can check it for you?

Kind & Best regards,
GemPages Support Team

3

Hello,

Thank you for your response!

I sent the details to you via private message.

4

Hello @MH_EC

It’s GemPages support team and glad to support you today.

You can add more this custom CSS

header summary.header__menu-item.link.link--text.list-menu__item.focus-inset.caption-large span{
  color: #ffffff !important;
}

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

1 Like
5

Hello,

Thank you for your response. I pasted this into the Asset>base.css but nothing changed?

6

Hello @MH_EC

Sorry for a little incorrect on my custom code. I’ve changed it, can you help me check again

Kind & Best regards,
GemPages Support Team

7

Hello @GemPages

The colour is now all white, thank you for that! There is one final detail, there used to be a down arrow beside any collection with a sub collection. Is there a way to get those to be white as well? I have attached a screenshot of what the drop down looked like before the colour changes:

MH_EC_0-1677723346334.png
MH_EC_0-1677723346334.png418×746 45.8 KB

Thanks!

8

Hello [email removed]MH_EC

Of Course, you can use this code

header summary.header__menu-item.link.link--text.list-menu__item.focus-inset.caption-large svg path{
  color: #ffffff !important;
}

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

1 Like
9

Thank you so much for your help! Both work perfectly!

10

I am glad that my solution is helpful to you.