How do I add a background color to the header or footer of my Dawn store?

Store Design
, ,
1

@LitCommerce

After looking for weeks for a solution I came across this post https://community.shopify.com/post/1855239 on how to add a background image to my Dawn store.

I made the changes and it worked which I am so grateful for.

However, I need to change it so that the header and /or footer have a background colour as it looks bad when I scroll.

Can you help me sort this?

Thanks

woolkind_0-1671358049055.png
woolkind_0-1671358049055.png2780×404 80.5 KB

2

Hello @woolkind

It’s GemPages support team and glad to support you today.

To provide you with the most precise solution in this case, could you please share the store link?

3

my website is www.woolkind.com

4

@woolkind

Please share password?

5

sent privately! Thanks

6

Hello @woolkind

It’s GemPages support team and glad to support you today.

I would like to give you a solution to support you:

  1. Go to Online Store → Theme → Edit code:

GemPages_0-1669618959296.png
GemPages_0-1669618959296.png1857×907 102 KB

  1. Open your theme.liquid theme file

  2. Paste the below code before :

Result:

Screenshot at Dec 18 18-09-00.png
Screenshot at Dec 18 18-09-00.png1281×495 542 KB

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

7

Hi @woolkind ,

Please send me the password, I will check it for you

8

Amazing!! Thank you for your help. if I was to want to change the colour to one of the theme background colours is there an easy way to put code in place of the “white” so its dynamic?

9

Hey, sorry @GemPages helped me out. Thanks so much for the original code and replying!

10

@woolkind

You can change the text: ‘white’ to another color:

Screenshot at Dec 18 18-42-22.png
Screenshot at Dec 18 18-42-22.png729×145 36.8 KB

11

Yes but is there a way to link this to the background colour selection in the customiser so I dont have to edit the code when I want to change the colour?

12

Unfortunately this isn’t really working as any drop down menus are transparent - both when the menu is at the top and when it is floating. Is there a way to always have the static menu and drop-down menu turn white when you use it and also ensure the drop down menu is white when it is floating?

13

No I just want to be able to see the drop down menus - they are currently transparent so you can’t see them.

14

Hi @woolkind ,

Go to Assets > base.css and paste this at the bottom of the file:

.js details > .header__submenu {
    background: #fff !important;
}
.menu-drawer__navigation {
    background: #fff !important;
}
15

@LitCommerce Thanks so much!! this is brilliant.

1 Like