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.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024