Sticky navigation bar is blocking the top of my pages

Highlighted
New Member
10 0 0

Hello, I have managed to add a sticky navigation bar to my Shopify store but now it is blocking the top of any page except the homepage.


Here is the code for theme.scss.liquid:

#SearchDrawer {
z-index:1001;
}

.site-header {
position: fixed;
z-index:1000;
left:0;
right:0;
-webkit-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
-moz-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
-ms-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
-o-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
}

#PageContainer {
padding-top: 80px;
}

@media screen and (max-width: 749px) {
#PageContainer {
padding-top: 70px;
}
}



and here is the code for theme.js:

 

function headerSize() {
var $headerHeight = $('div#shopify-section-header').outerHeight();
$('#PageContainer').css('padding-top', $headerHeight);
}

$(window).on("load", headerSize);
$(window).on("resize", $.debounce(500, headerSize));

$(window).scroll(function() {
scroll = $(window).scrollTop();
if (scroll >= 1) {
$('.site-header').css('top', '0');
} else {
$('.site-header').css('top', 'initial');
}
});

 

I have tried playing with the page container padding-top in theme.scss but it did not change anything.
Thanks in advance.

0 Likes
Highlighted
Astronaut
956 83 114

can you please give your website url? also did you try margin?

you are welcome to contact me.
My email - suyash.patankar@gmail.com
0 Likes
Highlighted
New Member
10 0 0
Vivinasjewelry.com
Did not try margin.
0 Likes
Highlighted
Astronaut
956 83 114

@stav219 wrote:
Vivinasjewelry.com
Did not try margin.

I checked about us page, it looks fine, what exactly is it blocking?

you are welcome to contact me.
My email - suyash.patankar@gmail.com
0 Likes
Highlighted
New Member
10 0 0
Please check collection page. Catalog>Rings and you will see that it is blocking the top of the page. Also on about us page it blocks the title of the page which you cannot see.
0 Likes
Highlighted
Astronaut
956 83 114

@stav219 wrote:
Please check collection page. Catalog>Rings and you will see that it is blocking the top of the page. Also on about us page it blocks the title of the page which you cannot see.

put below css to end of file, it should work, if you have any issues do let me know, I will check it at morning, good night. 

 

@media only screen and (max-width: 749px){
.collection-hero__image {margin-top: 108px;}

}

you are welcome to contact me.
My email - suyash.patankar@gmail.com
0 Likes
Highlighted
New Member
10 0 0

This does fix the problem but only on mobile for the collection pages and not for all of the other pages.
Will be grateful for your help tomorrow. Thank you very much.

0 Likes
Highlighted
Astronaut
956 83 114
hi, which other pages are having issue? please give link
you are welcome to contact me.
My email - suyash.patankar@gmail.com
0 Likes
Highlighted
New Member
10 0 0

On web: every single page on the website. except homepage. (including product page)

On mobile: every page except collection pages rings, necklaces and earrings. Other collections (on homepage) still have problems

0 Likes
Highlighted
Astronaut
956 83 114
@media only screen and (min-width: 750px){
.main-content {padding-top: 100px;}
}
 
above code is for desktop web and
below code is for mobile,
 
adjust number as per your need
 
 
@media only screen and (max-width: 749px){
.main-content {padding-top: 100px;}
}
you are welcome to contact me.
My email - suyash.patankar@gmail.com
0 Likes