How can I change the header color on the Venue theme?

Store Design
,
1

Hello everyone,

I am using the Venue theme for my store and the header is currently set to transparent. I would really like it to remain a solid color (white would be fine).

I don’t see any option on the theme itself. Probably going to have to do some CSS coding. Can anyone out there give me hand? :slightly_smiling_face:

Thank you!

The URL to the store is loveandhoneybees.com and the password is sawffe

2

Hello @SeanHebein ,

Follow these steps:

  1. Go to Online Store → Theme → Edit code

  2. Open your theme-critical.css file and paste the following code below:

body:not(.header-stuck):not([header-menu-open]) [data-transparent-header=true].header:not(:hover) {
    background-color: #fff !important; 
}

Thanks

3

@SeanHebein

Please add the following CSS code to your assets/theme-critical.css bottom of the file.

body:not(.header-stuck):not([header-menu-open]) [data-transparent-header=true].header:not(:hover) {
    background-color: #fff !important; 
}

Thanks!

4

This worked! Thank you for that! Is there any way to have the hero video shift down now that the header isn’t transparent?

1 Like
5

@SeanHebein

Please add the following CSS code to your assets/theme-critical.css bottom of the file.

@media screen and (max-width: 767px) {
#shopify-section-template--16179853197520__7c15de61-6753-411d-860e-59c1b46c6f08{margin-top: 8rem;}
}

@media screen and (min-width: 768px) {
#shopify-section-template--16179853197520__7c15de61-6753-411d-860e-59c1b46c6f08{margin-top: 6rem;}
body:not(.header-stuck):not([header-menu-open]) [data-transparent-header=true].header:not(:hover) .primary-nav__link, body:not(.header-stuck):not([header-menu-open]) [data-transparent-header=true].header:not(:hover) .secondary-nav__link, body:not(.header-stuck):not([header-menu-open]) [data-transparent-header=true].header:not(:hover) .header__logo-link--text, body:not(.header-stuck):not([header-menu-open]) [data-transparent-header=true].header:not(:hover) .header-trigger__link {
    color: #000000 !important;
}
}

Thanks!