- This topic has 9 replies, 4 voices, and was last updated 3 years, 3 months ago by
.
-
Posts
-
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
Customer Support
Hi Manuel,
I’m not seeing fixed sidebars, but give this CSS a try:
.site-footer.grid-container { position: relative; z-index: 99; }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
Customer Support
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; } }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
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
120pxvalue in the code to248pxfor instance.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
Customer Support
If you set the
max-heightto100vhand the add some bottom margin to the last widget with this CSS:#left-sidebar .inside-left-sidebar aside:last-child { margin-bottom: 150px; }Now Works perfectly
Thank you very much!!
Glad to hear that
- You must be logged in to reply to this topic.
