sidebar overlaping footer

Shopify Discussion
1

hi there i have a store with sticky sidebar everything is fine but my sidebar is overlapping footer my store url is

2

Hey @BDPK

I reviewed your store and do you want to implement the sidebar similarly as shown in the video: https://www.awesomescreenshot.com/video/34940458?key=3e52fda58ac4667293a5f39dade33fb9 ?

Regards,

Abhishek from Swym

3

yes just want to stop it above footer red line

1 Like
4

I got it. To implement a layout similar to the one shown in the video, please add the code below just before the closing body tag, as you did yesterday.

And once you have implemented this code the sidebar will show up as shown in the video: https://www.awesomescreenshot.com/video/34940458?key=3e52fda58ac4667293a5f39dade33fb9

I hope this helps!

If my response helped you, please consider giving it a like ( :+1: ) and marking it as an accepted solution if it resolved your issue. Your feedback helps other community members with similar questions.

Regards,

Abhishek from Swym

5

dear Abhishek sidebar is disappearing at the bottom i need it to be visible above footer

6

Hi @BDPK

You can follow this instruction here :

div#shopify-section-footer {
    position: relative !important;
}

here is the result :

LizHoang_0-1735019448655.png
LizHoang_0-1735019448655.png1271Ă—757 93.5 KB

I hope it helps.

7

Hey @BDPK ,

Thanks for getting back to me! Just to clarify—at first, it sounded like you wanted the sidebar to stop above the footer (the “red line” you mentioned). But now, it seems like you want the sidebar to stay visible until it reaches the footer without disappearing.

Can you confirm what you’d like? Once I understand, I’ll help you get it sorted.

Regards,

Abhishek from Swym

8

Hi @BDPK

Here is solution, add this css on theme.css file or base.css file

Try this css :

try this css :

#top-home-blocks .sidebar-collections {
    position: fixed;
    width: 285px;
    z-index: 99999;
}

if this solution will help you please mark it as accepted solution.

Thanks and regards

9

Hello @BDPK

Please follow the steps below after logging into the Shopify admin:

  • Go to your Shopify Admin panel.

  • Click on Online Store > Themes.

  • Find the theme you want to edit and then click Actions > Edit code.

  • Search tada-homemarket.css

  • Insert the provided CSS code at the end of the file and save the changes.

@media only screen and (min-width: 750px) 
{
   #shopify-section-footer 
 {
   position: relative;
 }
}

Output : https://prnt.sc/9ejw_WI7N6Cz

Please hit Like and Mark it as a Solution if you find our reply helpful.