How to fix a left-aligned sticky header in Dawn theme?

[Jej]

Hello,

I was trying to do make my header transparent by default and then make it turn white when i scroll or hover over it.

I did it but once i click on preview the header gets on the left like that

So as you can see my header is on the left

And its not showing right when i scroll up

I want it to look like this by default :

And like this when scroll down or hover over it:

That’s what i added to my base.css file :

And my theme.liquid:

.header:hover { background-color: white !important; /* Ensures hover state has priority */ }

So im hoping someone can help me thanks.

[PageFly-Noah]

This is Noah from PageFly - Shopify Page Builder App

I can help you. Please can you provide the website url. Thank you.

Best regards,

Noah | PageFly

[Jej]

Hello here’s the link:

https://d93hsxum8jfamecn-58891632710.shopifypreview.com

[eason_feng]

The setting can be done according to the diagram below.

[tim_1]

The Dawn theme already have most of what you need.

I would undo your changes and then:

Change the “header” section setting “sticky header” to “always” – this will ensure your header is always visible at the top of the page.

Then you would need to add CSS to change background on scroll/hover

sticky-header {
  background: transparent !important;
  transition: background 0.5s linear;
}

sticky-header:hover, 
.scrolled-past-header sticky-header {
  background: var(--gradient-background) !important;
}

Then it’s necessary to overlay header over banner. This one is a bit tricky – simple solution would be like this:

main {
  margin-top: calc(-1 *var(--header-height));
}

However, I doubt you would want your header overlaid on top of product info section or similar.

So I would rather put this code into Custom CSS of your first banner section on the homepage:

.banner {
  margin-top: calc(-1 *var(--header-height));
}

[tim_1]

But to fix your solution, you need to remove display: flex; from the 'header { rule and add max-width: none; instead.

[Jej]

oh alright thank you,

i also wanted to make a change. i want my white logo to become black when the background gets white.

[tim_1]

This depends – would you have an image, inlined svg or simply a text logo, like you have now?

[Jej]

An image

[tim_1]

The you’d need to output 2 image tags and show/hide them in a similar way.

1. modify config/settings_schema.json

Find

{
        "type": "image_picker",
        "id": "logo",
        "label": "t:settings_schema.logo.settings.logo_image.label"
      },

and add right below this

{
        "type": "image_picker",
        "id": "logo_on_transparent",
        "label": "Logo for transparent header"
      },

Then you should be able to select a second image in Theme settings

2. Go to sections/header.liquid, find

{{ settings.logo | image_url: width: 600 | image_tag:
                  class: 'header__heading-logo motion-reduce',
                  widths: widths,
                  height: logo_height,
                  width: settings.logo_width,
                  alt: logo_alt,
                  sizes: sizes,
                  preload: true
                }}

and add this right after:

{%- if settings.logo_on_transparent != blank -%}
                {{ settings.logo_on_transparent | image_url: width: 600 | image_tag:
                  class: 'header__heading-logo motion-reduce',
                  widths: widths,
                  height: logo_height,
                  width: settings.logo_width,
                  alt: logo_alt,
                  sizes: sizes,
                  preload: true
                }}
          {%- endif -%}

3. Then add these CSS rules:

.header__heading-logo:first-child {display: none;}
.header__heading-logo:last-child {display: initial;}

.scrolled-past-header .header__heading-logo:last-child {display: none;}
.scrolled-past-header .header__heading-logo:first-child {display: initial;}

If we stop here, you would see that your logo_on_transparent will show on all pages, even if there is no underlying banner below it. So it may become white-on-white (depending on your logo image – may be not an issue).

This can be avoided by modifying condition in step 2):

{%- if settings.logo_on_transparent != blank  and template.name == "index" -%}

This way the code will only show logo_on_transparent on homepage.

[Jej]

Hello, first of all i really apreciate the quick answer.

but it’s not working i’ve tried putting them in these two orders and it’s still not working

I even added this code: {%- if settings.logo_on_transparent != blank and template.name == “index” -%} and it is still not working

I think it might be an issue with my image but i don’t know

[tim_1]

Just followed my own instructions in my test shop and seems to work fine.

https://bbkmarket.myshopify.com/

The link you’ve shared above does not show any image logo, so I can’t really see what’s wrong.

If you go step by step, then after doing step 1 you should be able to select 2 logo images (looks like you do).

After step 2) you should be able to see both of them on your storefront

After step 3) they should start swapping (as in my link above). (!! CSS code goes to the very bottom of assets/base.css)

Where exactly you’re having problems?

[Jej]

Ok so, my problem is when my background changes to white the logo doesn’t swap.

I have two logos, one white and one black by default the white logo should be showing on the transparent header and the black one should show up when the background turns white.

Heres an exemple of what i want it to look like : https://www.babyboofashion.com/en-ca

and here’s how mine looks : https://girlystars.com/?_ab=0&_fd=0&_sc=1

see how the logo is white as first and then turns black as the background changes on the first website.

So yeah that’s pretty much my problem

[tim_1]

Your shop is under password, so I can’t see the link you’ve posted above.

Again – my logo replacement solution works on my test store I mentioned above.

To help you further I need to understand at what step yours fails and how.

[Jej]

Oh sorry, Here’s the correct link : https://i17auc5xhtpxb2d7-58891632710.shopifypreview.com

I figured it out and it’s now working, but i also wanted the logo to change when i hover over it though, that will be my last question.

Thank you

[tim_1]

Here is the combined and amended CSS code to show second image on hover too.

You need to ensure your logo images has the same dimensions, otherwise your header will exand when hovered over.

sticky-header {
  background: transparent !important;
  transition: background 0.5s linear;
}

sticky-header:hover, 
.scrolled-past-header sticky-header {
  background: var(--gradient-background) !important;
}

.header__heading-logo:first-child {
  display: none;
}
.header__heading-logo:last-child {
  display: initial;
}

.scrolled-past-header .header__heading-logo:last-child,
sticky-header:hover .header__heading-logo:last-child {
  display: none;
}
.scrolled-past-header .header__heading-logo:first-child,
sticky-header:hover .header__heading-logo:first-child {
  display: initial;
}

And do not forget the margin-top code from the above post to overlay header on top of the banner.