Shopify themes, liquid, logos, and UX
My transparent header in the Dawn theme is overlapping on every page. How do I make this not overlap?
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
Hi, can you help me with the CSS?
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
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
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.
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
So you can't make the header transparent in the Dawn theme?
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
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.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025