How to change the header's background gradient in Capital | Eight 4 August Theme

Store Design
1

Hi,

I am working with Capital | Eight 4 August Theme.

The background color of the header is a gradient (yellow>white>yellow). I would like to remove it and change it to a solid color.

I can’t find the right place where to make this change. I looked into the code as well but can’t locate the right snippet of code.

Here is the site:

https://camelotgallery.com/

Would anyone be able to help me?

Thanks a lot.

Greta

2

@Camelot44

Go to assets/section-header.min.css and put below css at bottom of file.

.header–full-width, .main-navigation-wrapper–full-width

{
background-color: #FCF6BA !important;
}

3

Hi There,

Thank you for reaching out to the Shopify forums!

Let me quickly fix that issue for you.

Please add below CSS in your section-footer.min.css file.

#shopify-section-header .header-wrapper {
    background: #ede6a4;
    margin-bottom: 20px;
}

If its working on your store then, please do not forget to accept this solution.
Thanks & Regards,
Prezen Tech

4

@Camelot44

yes, please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/section-footer.min.css ->paste below code at the bottom of the file.
.header-wrapper {
background: linear-gradient(21deg, #5a31f4 9%, rgb(0 179 255 / 50%) 51%, #00b3ff 94%);
}
5

Please add below css code in bottom of assets/section-header.min.css file

.header-wrapper{

background: red; (you can change any color code as per your site instead of red )

}

Thank you.

6

Hi @Camelot44 .

I’m Richard Nguyen from PageFly- Free Landing Page Builder

You can go to Online store => themes => actions => edit code and add this code on file section-footer.min.css

.header-wrapper {
background: #FCF6BA;
}

Hope this answer helps.

Best regards,

Richard | PageFly

7

Thanks a lot. This is my first experience with Shopify, I have to try this out. I also received other answers so will go through all of them. Thanks again!

8

Thanks a lot.

9

Thanks a lot. I also received other answers so will go through all of them.

10

Thank you. This code is harder for me to understand, but I appreciate your help a lot!

11

Thank you. (I had already replied to the first person who answered.) Steep learning curve!

Thanks again!

12

Hello again! I am trying to post another question but the system says that I have to correct ‘highlighted errors’ , but I don’t see any…and then it says that I am ‘flooding’… what does that mean? I am stuck! So I thought to send my question to you.

I would like to increase the size of my logo in the header (making sure that also the header gets enlarged along with the logo). Ideally it would be nice also to control the margins (top and bottom) from the logo to the header–in case I will chose to have the logo touch the border of the header. Is there some code that could take care of that?
I looked and looked, but no answers related to this theme.
Thank you.