Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Changing Header Menu 1 colour .

Changing Header Menu 1 colour .

YogaBear
Excursionist
34 2 5

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_1-1717417617678.png

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_3-1717417891917.png

 

 

Replies 10 (10)

PageFly-Amelia
Shopify Partner
626 165 237

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?

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 
➜ Weekly updated Shopify tutorials on YouTube 


All features are available from Free plan. Live Chat Support is available 24/7.

YogaBear
Excursionist
34 2 5
PageFly-Amelia
Shopify Partner
626 165 237

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

 

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 
➜ Weekly updated Shopify tutorials on YouTube 


All features are available from Free plan. Live Chat Support is available 24/7.

YogaBear
Excursionist
34 2 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. 

YogaBear
Excursionist
34 2 5

@PageFly-Amelia 

It looks like that now in our test theme

YogaBear_0-1717421361220.png

 

PageFly-Amelia
Shopify Partner
626 165 237

You can try this code instead

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

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

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 
➜ Weekly updated Shopify tutorials on YouTube 


All features are available from Free plan. Live Chat Support is available 24/7.

YogaBear
Excursionist
34 2 5

@PageFly-Amelia 

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

Vinsinfo
Shopify Partner
460 158 156

@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

 

 

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.
Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support
YogaBear
Excursionist
34 2 5

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

Vinsinfo
Shopify Partner
460 158 156

@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

 

 
Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.
Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support