Sticky header with transparent background and different logo on home page? (Dawn)

[blake1798]

I want to have my header by sticky across the entire site, however on the home page I want the background of the header to be transparent so you can see the image behind it. I also want to use a white logo on the home page and a black logo on all other pages.

[GemPages]

Hello @blake1798

To provide you with the most precise solution in this case, could you please share your page URL ( with pass if your store password is enabled )?

Thank you and hope to hear from you.
Best regards,
GemPages Support Team

[blake1798]

Hello! My site is https://au-ther.com/

I’m also having a problem on the mobile site where the image banner doesn’t scale to fill the entire view, and the footer is massive. The text on the navigation is also white and cannot be seen. Any help appreciated!

[blake1798]

Forgot to mention-- the password is “password123”

[GemPages]

Thank you for reply.

I would like to give you the recommendation to support you so kindly follow steps below:

1. Go to your Online store > Themes > Edit code
2. Open your theme.liquid file
3. Paste the below code before :

I hope the above is useful to you.

[BSS-Commerce]

Hi @blake1798

Please follow these steps:

• Step 1: In Shopify Admin, Go to Online Store → Themes → Edit Code

• Step 2: Find and open the file base.css, and add this code at the end of the file:

#shopify-section-header.shopify-section.section-header.transparent-header, #shopify-section-header.shopify-section.section-header .header-wrapper.transparent-header {
   background-color: transparent !important;
}
#shopify-section-header.shopify-section-header-sticky.black-logo *:not(.announcement-bar__message) {
    color: #ffffff!important;
}
@media screen and (max-width: 749px){
   .banner--large.banner--mobile-bottom:not(.banner--adapt) .banner__media.banner-home-page{
      height: 70rem;
   }
}

• Step 3: Find and open the theme.liquid file, add this code before the tag, as shown below

I hope that it will work for you.

[blake1798]

@GemPages Unfortunately this did not work for me, but I greatly appreciate you taking the time to help out!

[blake1798]

@BSS-Commerce This fixed everything perfectly! Thank you!

[blake1798]

@BSS-Commerce Actually, the footer is still massive for some reason on my larger monitor. Any idea?

[blake1798]

@BSS-Commerce Also, the text on the nav menu on mobile isn’t visible due to white text on white background. Any idea how to make the nav menu background a semi-transparent blur like this (only on home page):

[BSS-Commerce]

Hi @blake1798

• You can go to the file base.css and add this code at the end of the file:

@media screen and (min-width: 750px)
{
  .banner__media {
      height: 127%;
  }
}

• Then you go to the theme.liquid file to add the following code to the code that I sent you before

let menu = document.getElementById("menu-drawer");
menu.style.background = "rgba(0,0,0,0.4);";
menu.style.backdropFilter = "blur(15px);";

I hope that it will work for you.

[blake1798]

@BSS-Commerce that didn’t seem to work, the menu still looks like this: