Menu cover my sticky sidebar when scrolling

Store Design
1

seantay1993_0-1680769196921.png
seantay1993_0-1680769196921.png2401×1442 234 KB

https://giant-bicycles.com.sg/pages/product-registration-guide

I have created a sticky sidebar for this page, however when scroll it got covered by the sticky menu bar, what can i do so that the sticky menu bar won’t cover my sticky sidebar?

2

I hope this solution will works. feel free to text me back if you have any question.

Please follow below steps

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

@media screen and (min-width: 900px){ .blog-column-right #shopify-section-manual_sidebar, .register-nav { top: 30px!important; } }
3

Thanks for the help. It works.

1 Like
4

Most welcome @seantay1993

5

Hi, I am running into a similar problem except with the sticky side bar nav running into and behind my footer. Do you happen to have a code for the sticky side bar to stop once it hits the footer?

Here is a screenshot of what I’m talking about.

Screenshot 2023-08-03 at 9.10.42 PM.png
Screenshot 2023-08-03 at 9.10.42 PM.png2854×1316 298 KB

This is the code I entered into my theme.scss.liquid file:

// code for sidebar navigation to be sticky -
div.grid {align-items: flex-start; }

#shopify-section-sidebar{

z-index: 999;
position: -webkit-sticky;
position: sticky;
top: 0;
}

// code for sidebar navigation to scroll behind footer menu rather than infront -
#SearchDrawer {
z-index:1001;
}

#shopify-section-footer {
position: relative;
z-index:1000;
left:0;
right:0;
background-color: {{ settings.color_body_bg }};
}

#PageContainer {
padding-top: 80px;
}

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