Shopify themes, liquid, logos, and UX
So heres what it looks like before I made it a sticky header:
Here's what it looks like now:
The code I used in the theme.scss file was:
header.site-header {
position: fixed;
z-index: 999;
width: 100%;
}
Im not sure what I did wrong. I mean it is sticky but the entirety of it is not filled in with color.
Here's the url: https://minimal-design-james.myshopify.com/
Here's the password: FoxHound422
You can use these CSS styles to make that changes
.header-bar {
position: fixed;
z-index: 999;
width: 100%;
}
header.site-header {
padding-top: 60px;
}
On your theme go to Edit code, then at the sidebar go to Assets -> theme.scss.liquid
and paste the code at the end of the file.
That makes my announcement bar a sticky header instead of the line with the home, our menu, and about us nav links. I want the nav links line to be a sticky header. Should i just try and have the whole section a sticky header? When i scroll down only the announcement bar with the search comes with it.
User | RANK |
---|---|
212 | |
150 | |
69 | |
46 | |
40 |
Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...
By Jacqui Mar 10, 2023Upskill and stand out with the new Shopify Foundations Certification program
By SarahF_Shopify Mar 6, 2023One of the key components to running a successful online business is having clear and co...
By Ollie Mar 6, 2023