Changing Header Menu 1 colour

Store Design
, , , , , , , ,
1

Hi all,

Kindly advise how do I change the header colour for my Menu 1 Bar in the header section as my accent colour applies to only my Menu 2 background.
I need to know how to just edit the Menu 1 background.

YogaBear_0-1717417532715.png
YogaBear_0-1717417532715.png1154Ă—203 16 KB

YogaBear_1-1717417617678.png
YogaBear_1-1717417617678.png282Ă—655 17.6 KB

My Menu 1 : is using background colour (but changing this colour also changes other parts of the wesbite that share this colour)

YogaBear_2-1717417799884.png
YogaBear_2-1717417799884.png274Ă—680 29.4 KB

YogaBear_3-1717417891917.png
YogaBear_3-1717417891917.png1250Ă—840 204 KB

2

Hello @YogaBear

This is Amelia at PageFly - Shopify Advanced Page Builder app.

Could you please share the URL link of your store so we can check it for you?

1 Like
3

Dear @PageFly-Amelia

https://www.gathererstavern.com/

Here ya go :slightly_smiling_face:

4

You can try the following steps I have provided to help you solve the problem you are facing:

Step 1: Online Store → Themes → Edit Code

Step 2: Choose file theme.liquid

Step 3: Add code above the tag

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

1 Like
5

@PageFly-Amelia
How would I then change the colour of the the text now that it’s black, I need the text to be white.

6

@PageFly-Amelia

It looks like that now in our test theme

YogaBear_0-1717421361220.png
YogaBear_0-1717421361220.png1033Ă—223 21.6 KB

7

@YogaBear Please follow below steps to change the background color of the menu. Let me know whether it is helpful for you.

  1. From admin, go to “Online Store” → “Themes”.
  2. Click action button from the current theme and select “Edit code”.
  3. Go to “base.css” file and paste the below code at the bottom of the file and save changes.
    NOTE: You can change the background color as you want.
.section-header .menu-top {
    background-color: #FFFFFF !important;
}

Result will be like below screenshot,

Vinsinfo_0-1717421420454.png
Vinsinfo_0-1717421420454.png1363Ă—336 141 KB

Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.

8

@Vinsinfo How do i make the text white along with the background change?

9

You can try this code instead
10

@PageFly-Amelia

Omg it worked !
Is there a way I can centralize the text into the middle of the website?

11

@YogaBear Remove existing code and add below code to change the background color to “Black” and text color to “White” and center align the menu. Let me know whether it is helpful for you.

.section-header .menu-top {
  background-color: #000000;
  text-align: center;
}
.section-header .menu-top a {
  color: #FFFFFF !important;
}

Result will be like,

Vinsinfo_0-1717476151524.png
Vinsinfo_0-1717476151524.png1801Ă—469 159 KB

Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.