Shopify themes, liquid, logos, and UX
hello I am having an issue that I cannot seem to resolve. Please see store on mobile: http://experiencecbd.com/
I am trying to hide the logo div id "logomobileheader" on scroll, but it does not seem to work. Also the fixed header transition on scroll is not smooth at all. Please help. I used this below to style fixed header.
<style>
.tt-mobile-header {
background: #1e73be;
z-index: 9999;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
</style>
<script>
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeaderMobile");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
};
$(window).scroll( function() {
if( $(this).scrollTop() > 0 ) {
$("#logomobileheader").hide();
}
else {
$("#logomobileheader").show();
}
});
</script>
Solved! Go to the solution
This is an accepted solution.
You can do it this way then:
#myHeaderMobile.sticky #logomobileheader {display:none!important}
If it is #myHeaderMobile and it is .sticky do not display #logomobileheader (Code above explained)
Try and let me know if it works.
Here's your code modified.
<style>
.tt-mobile-header {
background: #1e73be;
z-index: 9999;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
#myHeaderMobile.sticky #logomobileheader {display:none!important}
</style>
<script>
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeaderMobile");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
</script>
Hello
Welcome to the Shopify Community!
This is Jay from Oakleaf Infoway. I'd be happy to assist you and get out it of you from your current issue
If you wish to move forward with us.
Please add me over the skype/Mail for an instant communication
Email ID: jay@oakleafinfoway.net
Here it is
<style>
.tt-mobile-header {
background: #1e73be;
z-index: 9999;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
@media (max-width: 720px) {.sticky {position:relative!important}}
</style>
<script>
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeaderMobile");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
};
$(window).scroll( function() {
if( $(this).scrollTop() > 0 ) {
$("#logomobileheader").hide();
}
else {
$("#logomobileheader").show();
}
});
</script>
If this helps you out, please accept my answer and give me a thumbs up! Cheers
This is the same thing I wrote? the only different is the position but it needs to be fixed
No, it is not. There's also the code you need to make it work as you want.
Try it
The sticky header doesn't display at all when I copied in your code
Ok,
so you want to hide only the #logomobileheader but leave the menu part with the icons!?
Why are you using that JavaScript?
I don't understand what you're trying to achieve here
Yes! while scrolling on mobile, you should only see the menu icons. The only time you should the logo displayed is at the top. That is why I wondering if there was something wrong I did in the script code? If you inspect our website via mobile view, you will see I have applied div ids and function indicators yet the logo section is still not hidden on scroll.
I am using Javascript to hide when scrolled. What other way is there?
This is an accepted solution.
You can do it this way then:
#myHeaderMobile.sticky #logomobileheader {display:none!important}
If it is #myHeaderMobile and it is .sticky do not display #logomobileheader (Code above explained)
Try and let me know if it works.
Here's your code modified.
<style>
.tt-mobile-header {
background: #1e73be;
z-index: 9999;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
#myHeaderMobile.sticky #logomobileheader {display:none!important}
</style>
<script>
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeaderMobile");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
</script>
It has worked! Now, is there anyway to transition the scroll? The scroll is not smooth at all when the sticky header is activated. Logo fades out on scroll then fades back in with back to the top?
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