A Shopify store owner is experiencing a positioning issue with their search bar on mobile. When a top announcement bar displays (showing “who you’re shopping with”), the search bar appears correctly positioned. However, when the announcement bar is hidden, the search bar sits too low on the page.
Solution Provided:
A community member offered a JavaScript solution that dynamically calculates the search bar’s position based on whether the sticky header is active. The script:
</body> tagThe solution includes code snippets and screenshots showing proper implementation. The issue appears resolved with this dynamic positioning approach.
Hi,
so I have this top bar that says who you’re shopping with, I lowered the search bar to show which works good now in pic #1
but nis if they aren’t shopping with someone and no top bar it sits to low. Any help would be apprexiated
my site is https://vazluxe.com
mike
do you care to explain better regarding the issues you have to get a better understanding?
Hey there. I wrote you a script that will calculate the position the quick-search needs to be based on if the sticky header is active on mobile. You can put this in your theme.liquid file right before the closing tag:
<script>
document.addEventListener('DOMContentLoaded', function(){
document.addEventListener('scroll', getHeaderOffset)
function getHeaderOffset(e) {
let header = document.querySelector('header.header')
let announcementBar = document.querySelector('.announcement-bar')
let headerOffset = null;
let stickyHeaderActive = document.querySelector('.sticky-header-enabled.sticky-header-active')
if(stickyHeaderActive){
headerOffset = header.offsetHeight
}else {
headerOffset = header.offsetHeight + announcementBar.offsetHeight;
}
let quickSearch = document.querySelector('.quick-search');
if(quickSearch && window.innerWidth < 959){
quickSearch.setAttribute('style', `top: ${headerOffset}px`)
}else {
quickSearch.style.removeProperty('top')
}
}
})
</script>
Hey there, I wrote you a script that will offset your search on mobile depending on if the sticky bar has been activated or not. Open up theme.liquid in your layouts folder and paste this at the bottom before the closing body tag, or right after the opening body tag:
Should be good to go. Feel free to reach out if you have any questions.
