Shopify themes, liquid, logos, and UX
Hey Shopify Community! I hope a Shopify Coding Pro can help me out with this important design issue. I am currently really struggling to adjust the design/placement of the header of my shop with scss-liquid. I am using the Minimal theme and my URL is: www.retroarea.de
If anyone has an idea how to solve the issue of letting the header appear fixed/sticky (mobile and desktop) but without including the logo section, as shown in the example pictures shown below. Here is the issue I still have with the code that exists for now:
1. Logo section is still included and I just want the light purple part to be fixed here.
Example pictures for ideal fixed header:
1. MOBILE
2. DESKTOP
My attempted coding, I have put in the end of my theme.scss.liquid:
#shopify-section-header { position: fixed; top: 0; width: 100%; z-index: 99; background-color: $colorBody; } body { margin-top: 120px;
Thanks a lot!
David / RETROAREA
Solved! Go to the solution
This is an accepted solution.
Hello @RETROAREA ,
Use this css
.header-bar{
position: fixed;
width: 100%;
z-index: 9;
}
.site-header .wrapper{
margin-top: -40px;
}
Thanks
This is an accepted solution.
Hello @RETROAREA ,
Use this css
.header-bar{
position: fixed;
width: 100%;
z-index: 9;
}
.site-header .wrapper{
margin-top: -40px;
}
Thanks
@RETROAREA
Paste this code on top of the theme.scss file.
.header-bar {
position: fixed !important;
z-index: 1000 !important;
width: 100% !important;
}
And Paste this code on top of the timber.scss file.
.logo__image-wrapper {
position: relative !important;
top: 32px !important;
}
Thank You.
Thanks for your help, I already received the solution.
Have a nice day!
This worked great! I had to change the margin top to 60px and everything made sense. Thank you so much! David
I NEED YOUR HELP
Hey there!
I would need your help once again if possible! I just discovered that as a user of the mobile version of my website, you cannot scroll through all of the menu points, since the header was fixed / made sticky. I deleted the coding part down below to make it work again. Do you have any clue what was coded wrong or is missing that you can scroll through the whole menu again when using the site via mobile?
My theme: Minimal Theme
My url: www.retroarea.de
This one was my final coding that helped fixing my header bar in the desktop as well as mobile version:
@media only screen and (max-width: 768px) {
.slides__title {display: inline-block;}
.slides__title+.slides__btn {
margin-top: 20px;
display: inline-block;
}
.shopify-section:first-child .index-section {padding: 0 !important;}
.slideshow__mobile-text-container {display: none;}
}
.header-bar{
position: fixed;
width: 100%;
z-index: 9;
}
.site-header .wrapper{
margin-top: 65px;
}
*Sry, Coding only from header-bar part down:
.header-bar{
position: fixed;
width: 100%;
z-index: 9;
}
.site-header .wrapper{
margin-top: 65px;
}
Got it but it's beyond the help. If can share the idea how you can do it.
Use the code which was working for you as it was but in mobile remove it on click of menu hamburger.
In this way fixed header will work in both desktop/mobile and when customer open the mobile menu fixed header will disable and customer can scroll.
Thank
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