Customize Dawn header with different menu background color

Retired Boards Appdev Store Design
1

I want to change the background color of the menu. See the attached screenshot. When I try to change the background color in the customizer it changes the background color of the entire header.

Screenshot 2024-03-10 215720.png
Screenshot 2024-03-10 215720.png1036×621 152 KB

2

This is Noah from PageFly - Shopify Page Builder App

I can help you. Please can you provide the website url. I will help you change the color of the header.

Best regards,

Noah | PageFly

3

Here you go:
https://conestoga-microcad.myshopify.com/

4

Hello @a_bains

Please follow the steps

Head to Online Stores>Themes> Edit Code

open base.css

and paste this code to very bottom you can adjust some of the thing according to your need

.header__inline-menu {
    position: absolute!important;
    bottom: 0!important;
    width: 100%!important;
    padding: 10px 0!important;/* You can adjust Padding*/
    background: #395582!important; /*You can set your color*/
    display: flex!important;
    justify-content: center!important;
}

.header {
    padding-bottom: 50px!important;/* adjust header height*/
}

@media screen and (max-width: 990px){
.header__inline-menu {
    display: none!important;
 }
}

If you are unable to implement the same then I’m happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully, it will help you. If yes then Please don’t forget to hit Like and Mark it as the solution!

1 Like
5

Thank you. You can add code to change background header.

Step 1**:** Online Stores > Themes > Edit code

Step 2**:** Choose file theme.liquid
Step 3: Add code above the tag

You can change color gray to other color.

Hope my solution will help you resolve the issue.

1 Like
6

Hi Deepaksharma, I tried to do this to my shopify page however, It is still applying the colour to the entire header/image area rather than just header.

Could you help me out with this?