Search bar fixed but to low

[Luxurymrkt]

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

[moshbray]

do you care to explain better regarding the issues you have to get a better understanding?

[Ninthony]

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 </body> 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>

[Ninthony]

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:

<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')
        }
    }
    getHeaderOffset();
})
</script>

Should be good to go. Feel free to reach out if you have any questions.