Why is my .sticky-top class not working in Bootstrap 4?

Question

I am new to Bootstrap, trying to make responsive menu. For some reason sticky-top won\'t work. My browser does support it, and comparing my code to other working versions I

Answer 1

a generic solution : if your navbar is inside any section or div , get rid of it immediately. it will surely work.

Answer 2

Just substitute div tag for nav tag and it will be ok

Answer 3

What browser you are using?

position: sticky is not fully supported in all browsers.

In IE11 and IE10 will render position: sticky as position: relative.

updated: set class name "sticky-top" in <header> will work because it's relative sticky to the parent element, in this case, it's the whole HTML body

<header class="sticky-top">

Answer 4

I was not able to fully solve this with bootstrap. What Jiachen Guo proposed was only a partial solution, as it prohibits me to add anything into the header.

I solved this with just adding javascript from w3schools: https://www.w3schools.com/howto/howto_js_navbar_sticky.asp This enables for more customization as well. So this is what I would recommend to people having trouble with sticky-top class in bs4.

Answer 5

One more thing to check is if any parent element has one of these css properties set:

• overflow
• overflow-y
• overflow-x

If this property is set to one of these vales it will NOT work: auto, hidden, overlay, scroll.

The best solution is to remove it or change its value to 'unset'

Answer 6

As you can see it's easy to implement. However, if your element isn't sticking as expected the first thing to check are the rules applied to the container.

Specifically, look for any overflow property set on the parent. You can't use: overflow: hidden, overflow: scroll or overflow: auto on the parent of a position: sticky element.

If you're not using overflow and still having problems it's worth checking if a height is set on the parent? This may constrain the sticky positioning, stopping it from occurring. Remove the height and see if that fixes the problem.