[Resolved] sidebar fixed and scrollable and footer overlap

[Manuel Fernández]

Hello,

I have a sidebar on the left with a very long menu and I have it fixed and scrollable, but it overlaps with the footer when i try to set up the footer.

On the right sidebar, I have a sticky sidebar, but it’s not scrollable. I put here the two css that I currently have on the website:

Right sidebar:

@media (min-width: 1281px) {.inside-right-sidebar{
position: sticky;
top: 80px;
}
}

Left sidebar:

@media (min-width: 1281px) {.inside-left-sidebar {
position: fixed;
overflow-y: scroll;
width: 15%;
max-height: 85vh;
}
}

I put a link to my site as an example in case you want to review it:

https://thedataschools.com/sql/

How can i fix this?

Thank you very much in advance,

Manuel

[Ying]

Hi Manuel,

I’m not seeing fixed sidebars, but give this CSS a try:

.site-footer.grid-container {
    position: relative;
    z-index: 99;
}

[Manuel Fernández]

Thank you Ying,

Yes, my left sidebar is fixed and scrollable and the right sidebar is sticky. (with the css code that i sent you in my last message).

I still have some problems with the css that you sent me because the footer because the footer covers the left sidebar and i can’t see the last links of the left sidebar menu. With the sidebar on the right it seems that it works fine.

Can you help me with this?

Thank you in advance,

Manuel

[Fernando]

Hi Manuel,

Yes, we can try to help. Perhaps you can try something like this instead for the left sidebar?:

@media (min-width: 1281px) {
    .inside-left-sidebar {
        position: fixed;
        overflow-y: scroll;
        width: 15%;
        max-height: calc(100vh - 120px);
        top: 60px;
    }
}

[Manuel Fernández]

Hello,

Thank you very much for your response and your help, but the footer is still cover the last items of my left sidebar menu, i am going to set up your css and you can check the problem (when you scroll down to the footer, the footer cover the last items of my left scrollable and fixed sidebar.

You can check this link as an example: https://thedataschools.com/python/

Thank you in advance,

Manuel

[Fernando]

I see. You added a Footer Widget. You just need to account for the height of the Footer Widget section in the max-height set in the code.

Try increasing the 120px value in the code to 248px for instance.

[Manuel Fernández]

Thank you for your response,

If i modify the high, works fine, but the high of the left sidebar looks too short, almost in the middle of the screen, may be is a good idea to use a hook element to display social icons after main content, itsn`t it? What do you think about that? May be i can display social icons and another ítems as a menu with the element options, what do you thonk about that?

Many thanks in advance

Manuel

[David]

If you set the max-height to 100vh and the add some bottom margin to the last widget with this CSS:

#left-sidebar .inside-left-sidebar aside:last-child {
    margin-bottom: 150px;
}

[Manuel Fernández]

Now Works perfectly

Thank you very much!!

[David]

Glad to hear that

[Author]

Posts