Change the menu header color and size

Store Design
, , , ,
1

Hello !

I’m having trouble changing the color of the menus in my header on the Dawn theme. I’d like to be able to change the text color of the menus only, but that’s where my problem lies. I have tried different codes that did not work, but I think it is because of a code I implemented in “header.liquid” to make my header transparent (it works fine), but I feel that because of this, I can no longer change the color of the text in the menus on my home page.

If you also know how to change the size of the menus, that would be great !

Thank you in advance for your help :slight_smile:
Here is my menu i try to modify :

image
image1920×361 128 KB

Joyo Jewelry: joyojewelry.com

Here is the code i put for the transparent header, maybe it can help :
{% if template.name == ‘index’ %}

.header-wrapper { position: absolute; width: 100%; background: transparent; color: white; } .header-wrapper .list-menu span, details[open]>.header__menu-item, .header-wrapper summary svg, .header-wrapper a svg, .header-wrapper h1.header__heading span.h2, .header-wrapper details>span, .header-wrapper .disclosure__button>span, .header-wrapper .disclosure__button svg { color: white !important; } .header-localization .disclosure .localization-form__select:hover { text-decoration-color: white; } .section-header { margin-bottom: 0; } .header-wrapper--border-bottom { border-bottom: .1rem solid rgba(255, 255, 255, .08); } .overflow-hidden-desktop .header-wrapper, .overflow-hidden-tablet .header-wrapper { position: initial; width: initial; background: initial; color: initial; background: var(--gradient-background); } .header-wrapper summary.header__menu-item+ul span, .header-wrapper summary.header__menu-item+ul svg, .overflow-hidden-desktop .header-wrapper .list-menu span, .overflow-hidden-desktop details[open]>.header__menu-item, .overflow-hidden-desktop .header-wrapper summary svg, .overflow-hidden-desktop .header-wrapper a svg, .overflow-hidden-desktop .header-wrapper h1.header__heading span.h2, .overflow-hidden-desktop .header-wrapper details>span, .overflow-hidden-desktop .header-wrapper .disclosure__button>span, .overflow-hidden-desktop .header-wrapper .disclosure__button svg, .overflow-hidden-tablet .header-wrapper .list-menu span, .overflow-hidden-tablet details[open]>.header__menu-item, .overflow-hidden-tablet .header-wrapper summary svg, .overflow-hidden-tablet .header-wrapper a svg, .overflow-hidden-tablet .header-wrapper h1.header__heading span.h2, .overflow-hidden-tablet .header-wrapper details>span, .overflow-hidden-tablet .header-wrapper .disclosure__button>span, .overflow-hidden-tablet .header-wrapper .disclosure__button svg { color: rgba(var(--color-foreground), .75) !important }

{% endif %}

2 Likes
2

Hey @Bipperly

Can you remove this code completely and then I’ll provide you a clean code according to your requirements?

Best,
Moeed

3

Hi @Moeed and thank you for your reply :slight_smile:

Yes i can remove it completely ! But I would like to keep my header transparent while keeping the announcement bar active and clearly visible because I once used a code that caused my announcement bar to crash!

Thanks !

Joyo

4

The code is still there, let me know once you have removed it.

image
image1894×915 253 KB

5

Hi @Moeed

I deleted it !

6

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
{% if template.name == ‘index’ %}
<style>
.header {
    position: absolute !important;
    width: 100% !important;
    max-width: 100% !important;
}
.list-menu__item {
    font-size: 19px !important;
    color: black !important;
}
</style>
{% endif %}

RESULT:

image
image1897×917 269 KB

If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

7

Hi @Moeed

I tried to copy your code above </ body> tag at the bottom of the file but it doesnt change as your screenshot :confused:

8

Can you show me a screenshot of where you’re adding the code? The code is completely fine.

9

Sure, there you go :

image
image1903×838 74.9 KB

10

Hm, that’s a bit weird. Can you share the collaborator code in my DMs and I’ll sort it out for you