Re: Changing Header Menu 1 colour .

Changing Header Menu 1 colour .

YogaBear
Excursionist
28 1 4

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
493 154 222

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!


PageFly - #1 Page Builder for Shopify merchants.


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


Optimize your store’s mobile shopping experience with the Blum theme.

YogaBear
Excursionist
28 1 4
PageFly-Amelia
Shopify Partner
493 154 222

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!


PageFly - #1 Page Builder for Shopify merchants.


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


Optimize your store’s mobile shopping experience with the Blum theme.

YogaBear
Excursionist
28 1 4

@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
28 1 4

@PageFly-Amelia 

It looks like that now in our test theme

YogaBear_0-1717421361220.png

 

PageFly-Amelia
Shopify Partner
493 154 222

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!


PageFly - #1 Page Builder for Shopify merchants.


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


Optimize your store’s mobile shopping experience with the Blum theme.

YogaBear
Excursionist
28 1 4

@PageFly-Amelia 

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

Vinsinfo
Shopify Partner
352 125 118

@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
28 1 4

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

Vinsinfo
Shopify Partner
352 125 118

@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