sidebar overlaping footer

Shopify Discussion

Topic summary

A Shopify store owner is experiencing an issue where a sticky sidebar overlaps the footer section on their site (sundip1.myshopify.com).

Problem Details:

  • The sidebar functions correctly but extends over the footer area
  • The user wants the sidebar to stop scrolling just above the footer (at a “red line”) while remaining visible

Proposed Solutions:
Multiple community members offered CSS-based fixes:

  1. LizHoang’s approach: Add position: relative !important; to the footer section to establish proper positioning context

  2. nidhidhiman004’s solution: Apply position: fixed with specific width and z-index to the sidebar element in theme.css or base.css

  3. WebDeskSolution’s method: Insert media query CSS targeting the footer with position: relative in the tada-homemarket.css file

Current Status:
The issue remains unresolved as the original poster hasn’t confirmed which solution worked. There was some initial confusion about whether the sidebar should disappear or remain visible near the footer, which was later clarified.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
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.