How can I prevent the Privy Free Shipping bar from blocking my website's header?

Store Design
1

Our Privy Free Shipping bar is blocking the header on our site, which is particularly annoying on mobile as you can’t navigate the site at all once the bar is loaded.

Please advise on how to make the bar push the rest of the page down so the nav header is still visible. Thanks in advance!

Screenshot_20210530-084514.jpg
Screenshot_20210530-084514.jpg1080×2400 120 KB

1 Like
2

@ZLinhart

Please add the following code at the bottom of your assets/theme.scss.liquid file.

@media (max-width: 767px){
.dJrvFS{ top: 67px !important; }
}

Hope this works.

Thanks!

3

www.linhart.nyc

1 Like
4

@ZLinhart

Please add the following code at the bottom of your assets/theme.scss.liquid file.

@media (max-width: 767px){
.page-container {top: 69px;}
.heading-main-wrap.fixed-header {top: 36px;}
}

Hope this works.

Thanks!

5

This worked but still seems to happen on desktop:

ZLinhart_0-1622381422055.png
ZLinhart_0-1622381422055.png2523×1300 200 KB

1 Like
6

@ZLinhart

Please add the following code at the bottom of your assets/theme.scss.liquid file.

Remove previous code and add this

/* for desktop */
@media (min-width: 768px){
.page-container {top: 69px;}
.heading-main-wrap.fixed-header {top: 36px;}
}
/* for mobile */
@media (max-width: 767px){
.page-container {top: 69px;}
.heading-main-wrap.fixed-header {top: 36px;}
}

Thanks!

7

Hey, this isn’t working for me – I’m having the same issue with Privy free shipping bar blocking part of menu on desktop and mobile. site is: https://vermontmaplesyrup.com/