Changing Header Menu 1 colour .

[YogaBear]

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. 

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

[PageFly-Amelia]

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?

[YogaBear]

Dear @PageFly-Amelia 

https://www.gathererstavern.com/

Here ya go 🙂 

[PageFly-Amelia]

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 </head>

<style>
.menu-top {
   background-color: #000;
}

.menu-top a {
   color: rgba(#fff, .75)
}
</style>

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

[YogaBear]

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

[YogaBear]

@PageFly-Amelia 

It looks like that now in our test theme

[PageFly-Amelia]

You can try this code instead

<style>
.menu-top {
   background-color: #000;
}

.menu-top a {
   color: #fff !important;
}
</style>

[YogaBear]

@PageFly-Amelia 

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

[Vinsinfo]

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

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

[YogaBear]

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

[Vinsinfo]

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

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