I would like to have my sidebar menu sticky when scrolling the page.
An example of what I want can be found here: https://codepen.io/hexagoncircle/pen/oNLZmvV
An code example of my website can be found here: https://codepen.io/darkinfore/pen/VwdwKKZ
You can see a live demo of my site here: https://ergonj4.joomlademo.nl/over-ergon/organisatie
The sidebar menu should stick under the top menu when scrolling just like the example does.
I tried to use
#scrollspy{
position: sticky;
top: 200px;
}
But that didn't work.
I can't get my sidebar menu to stick.
Can someone help me figure out how to fix this?
Sticky elements can only stick in their direct parent / wrapper.
So if you want it works, you have to specify a height on the direct parent of scrollspy :
You can use Javascript to get readthis height and set this value on your sticky parent.
document.getElementById('module-365').style.height = document.getElementById('readthis').offsetHeight + 'px' ;
Related
I'm currently working on a website using Elementor. I tried integrating a Footer using a separate plugin (Elementor Footer&Header), however, the footer didn't stick to the bottom of the page if there was only little or no content.
As this seems to be a common issue, I solved the problem by adding the following code:
div.footer-width-fixer {
position: fixed;
bottom: 0;
}
Now, the footer sticks to the bottom of the page, however, there 2 other problems:
The footer overlaps with the content in the bottom of the page (see attached image)
The footer is sticky, although I didn't set it up to be so. I only want the footer to appear at the bottom of the page, not while the visitor is scrolling.
Any ideas how to solve this? Thank you!
Best Regards,
Maurice ( :
overlapping-footer
Its tough to tell if the footer is actually overlapping another sentence (I only speak english so I cant tell if the sentence ends or read it at all). But it looks like its only overlapping the padding on the button and its just snug to the text content.
You could try to add either
padding-top: {desired pixel amount}px;
or
margin-top: {desired pixel amount}px;
to the footer and see if that does the trick.
As for the position sticky, If your familiar with the inspect element feature in google chrome; you can see what the class selector is that is applying the sticky to the element and then you should be able to write a bit of css to overwrite that fairly easily!
I have had the same problem a few times but I simply fix this by setting the height of the section to either "fit to screen" or the VH to 100 - the header height (If you use a transparent header). I hope this has helped you and if you have any questions don't mind asking!
I am using layers framework for my wordpress based website. Checkout here medshopi.I have used left logo style for the menubar. In the menubar the logo and the menu items are overlapping. Same is the case with responsive layout. I dont understand which part of css is overlapping the logo and menu items.Your help is extremely appreciated and thanks in advance.
Remove
position: absolute;
from line number 157 on style.css
Since your .logo div is an absolutely positioned element, the sibling .nav becomes blind to it.
You have to give the nav enough space, via padding or margin to get around the issue. This assumes that you want the menu to start right after the menu. Example
.header-site nav {
margin-left: 200px;
}
Output 1
You could also remove the position absolute and accompanying style applied on your logo which seems to be the right thing to do.
Output 2:
Hi,
I am trying to built a chrome app and decided to use the theme SB Admin 2 for this purpose. I modified the theme to look something like what is show in the image above. The three boxes represents three bootstrap rows. I want row 3 to be fixed to the bottom of the page.Tried suggestions i got from stack overflow[added class "navbar-fixed-bottom" to the row], was able to get the row fixed to the bottom of the page but the footer was overflowing to the left side navigation bar.
What can be done to achieve this.
You can try setting the "left" for the footer. But without any code, we can't help you and we need to guess.
.footer
{
left: 200px; /* Use the width of your left menu */
}
i have a sidebar menu on my WordPress widget area, and sub-menu items are displayed under main content, i can't make it work with z-index, where should i put CSS code to make it work
i tried adding z-index to my style codes, and nothing happened, maybe i put them in a wrong place or i have to use some sort of other code with style code
you can see the problem on the main page
website address is: http://www.nanotajhiz.com
This happens because you have overflow: hidden; on your .sidebar which holds the items, which causes any content that goes outside the sidebar to be hidden.
You should remove overflow: hidden from .sidebar and adjust the other layout styles accordingly. You can use the clearfix method instead ( What is a clearfix? ).
I have a problem with a fluid layout, made using bootstrap and a fixed element made by the bootstrap affix plugin.
What I’d like to achieve is a compound view like on Android tablets, where you have left a list of elements and when you click on one you see the details of that element on the right hand side.
My problem is that as soon as the plugin attaches the affix class to the right side it is taken “out” of the page and the width is strange. The affix class makes the element to have position: fixed. And that makes the width to no longer be relative to the parent, but to the document.
I’ve made a pen of my simplified testcase. You have to scroll to see the effect happening.
http://codepen.io/anon/pen/zDieo
Thank you very much for your time
A quick fix would be add this to your css
.affix , .affix-top {
width: 800px;
}
Modified Code : http://codepen.io/anon/pen/gBHca
Try this - codepen
And read this - question