Edition Theme: Changing overflow "3 dots" color or disabling priority navigation

Themes
1

Hi everyone,

I’m using the Edition theme and have customised my header to a Navy background (#002B5B) with White text using Code Injection in the <head>.

The Issue:
My navigation items are correctly white, but when the screen resizes and the “priority navigation” script triggers the 3-dot “More” menu, the dots remain black and are invisible against my navy background.

Desired Solution:

  1. Is there a specific CSS selector or filter I can use in my Code Injection to force these dots to be white?

  2. If changing the colour is too complex due to how the theme’s JS handles the SVG, how can I disable the priority navigation script entirely via Code Injection so the menu stays in a single row until the mobile hamburger triggers?

I’ve already tried several !important overrides on .gh-more-button, but they aren’t sticking. I suspect the theme’s script might be re-applying styles dynamically.

Any guidance on the correct selector or a small JS snippet to stop the re-priority calculation would be greatly appreciated!

2

it inherits from the container, so try:

<style>
button.nav-more-toggle.gh-icon-btn {color: white;}
</style>

p.s. I’m not sure where you got .gh-more-button from. I don’t see that in the theme demo. But you could be running a different version of edition. Or posting an AI hallucination. ;)

1 Like
3

Thanks for the suggestion—it is now white as I wanted. Definitely an AI hallucination, I don’t have front-end experience so it helps me with these kind of configurations.