I want to create a sticky nav, inside a container set to but the sticky-ness is always removed when I place the Nav inside the container.
Basically, I create a Div, set it to be an HTML Header tag (for accessibility) and position Relative. I then place the Nav widget in the Header div. When I do the sticky stops working. If the Nav widget is placed directly under the Body element, all works fine.
Hi @SteveT, thanks for your post. When you have an element that is sticky inside of a parent element having relative position, you will need to give that parent element some height, the sticky nav will be sticky for the scroll height of the parent element.
Did the header that you were working with before have a height set? Alternatively, the header could also be full of other content to create height, if not, then you would need to set some height.
Your recommendation to create a div or section with position sticky and then just put the navbar with default position is a good one, this is the approach I myself use when using sticky or fixed navs
Hi @cyberdave No, the previous iteration with the outside container div didn’t have a height set on the outside div (in fact, I thought that would have been one of those issues that would prevent the sticky of the contained element?)
In fact the solution I found works well in other ways. For example, I now contain two sections within the sticky container. The sticky container has a <header> tag for accessibility.
Simply set background colour, high z-index and a minus top offset so that the top part disappears on scroll, leaving just the navigation.
Off-topic, but as a result of doing this I have even considered creating container divs for all sections and assigning them a unique class purely to be easily found in the navigator panel.
