How to fix overlapping headers in the Dawn theme?

How to fix overlapping headers in the Dawn theme?

ktcapri
Tourist
17 0 1

My transparent header in the Dawn theme is overlapping on every page. How do I make this not overlap? Screenshot 2024-03-12 at 4.07.34 PM.png

 

Replies 10 (10)

StephensWorld
Shopify Partner
1400 174 384

You can turn off the 'transparent header' functionality within the 'header' settings in the theme editor. 

 

Otherwise, you'd want to add some custom CSS to increase the padding/margin at the bottom of the header. 

★ Did my post help? If yes, then please like and accept solution. ★

https://stephens.world
support@stephensworld.ca

ktcapri
Tourist
17 0 1

Hi, can you help me with the CSS?

StephensWorld
Shopify Partner
1400 174 384

What's the URL of your store?

★ Did my post help? If yes, then please like and accept solution. ★

https://stephens.world
support@stephensworld.ca

ktcapri
Tourist
17 0 1
StephensWorld
Shopify Partner
1400 174 384

The 'transparent header' functionality is definitely broken. I'm guessing you must of tried making custom coding edits to the theme, and broke things. 

 

Specifically for the collection pages, you can add the following CSS to your theme's main CSS file, which should help things:

 

.collection {
    padding-top: 40px;
}

 

However, the rest of your pages are also going to have problems, and padding won't work as well for those. 

 

It's also worth noting that on the homepage, your links can't be read, as you're using black text on a dark images. 

 

The best option would be to turn off the transparent header, or else add a fresh version of the theme to your store, and then start again. 

★ Did my post help? If yes, then please like and accept solution. ★

https://stephens.world
support@stephensworld.ca

ktcapri
Tourist
17 0 1

I am adding a light image to the homepage so that won't be a problem. Also, can't I change the text color?

 

I used a CSS code to make the header transparent. How did it break things? If I started fresh, Can you provide a code to make the header transparent? 

 

Also, would I paste that code in base.css at the bottom? 

 

First time doing this.

StephensWorld
Shopify Partner
1400 174 384

If you change the image + text colour, then the issue on the homepage shouldn't be a problem. 

 

If you added coding to make the header transparent, then that's definitely where you went wrong.

 

I wouldn't be able to provide the coding needed to convert the header. I'd recommend just purchasing/using a theme that already has the transparent header functionality built into it. Almost every premium theme will have this functionality built-in (so you'll know it'll work correctly). 

★ Did my post help? If yes, then please like and accept solution. ★

https://stephens.world
support@stephensworld.ca

ktcapri
Tourist
17 0 1

So you can't make the header transparent in the Dawn theme?

StephensWorld
Shopify Partner
1400 174 384

The Dawn theme doesn't have 'transparent header' functionality built into it. 

★ Did my post help? If yes, then please like and accept solution. ★

https://stephens.world
support@stephensworld.ca

websensepro
Shopify Partner
1854 215 261

Hello Ktcapri,

To fix the issue of the transparent header overlapping content on every page

 

you can follow these steps:

 

1.   Fixing Header Overlapping Issue:

2.  Go to theme editor > Edit code > find 'Header. liquid' file > 

 

3.  Adjust Header Position(In the header.liquid file, look for the CSS class or inline style that sets the header's position to fixed or absolute. This causes the header to overlap with other content on the page.)

 

4.  Change Position Property(Modify the CSS to set the position property of the header to relative instead of fixed or absolute. This will ensure that the header doesn't overlap other content on the page.)

 

Save Changes and Test

 

Custom CSS for Transparent Header:

 

/* Make header transparent */
.site-header {
    background-color: transparent;
}

/* Ensure content is pushed down below the header */
.site-content {
    padding-top: 80px; /* Adjust as needed based on your header height */
}

/* Add a background color or shadow to the header when scrolling */
.site-header.scrolled {
    background-color: rgba(255, 255, 255, 0.9); /* Adjust opacity as needed */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Add a shadow when scrolling */
}

 

Replace 80px in the .site-content padding-top with the actual height of your header. This ensures that content starts below the header.

By following these steps and using the provided custom CSS, you should be able to resolve the header overlapping issue and create a transparent header in the Dawn theme.

(Adjust the CSS as needed to achieve the desired appearance and behavior.)

 

I hope this is helpful to you,

If this is helpful So Please accept the solution and buy me coffee.

 

 

 

Need a Shopify developer? Hire us at WebSensePro For Shopify Design Changes/Coding
For Free Tutorials Subscribe to our youtube
Get More Sales Using Big Bulk Discount APP
Create Your Shopify Store For Just 1$/Month
Get More Sales Using Big Bulk Discount APP