Sticky position does not work on “Tabs Menu”

Hey guys I’m Emka Emmanuel Katto From Uganda,

I would like my “Tabs Menu” element to stay on screen while scrolling, more specifically: I would like it to stick to the top of the screen when the element touch the top of the screen after scrolling.

I tried with the Sticky more but changing values on the top position doesn’t change anything as shown on the official tutorial.

Could someone give me some help with this?

Best Regards,

Emka Emmanuel Katto

Show us the code you have tried.

1 Like

If your tabs menu is a direct child of the body then you simply need position:sticky and top:0 to make it work.

A direct child of the body means that the tabs menu is not nested in any other html.

e.g. It would look like this:

<body>
  <h1>Mys site</h1>
  <p>Stuff</p>
  <div class="tabs-menu">Tab etc.  </div>

However if your tabs-menu is inside another parent container then it won’t work unless that container holds all the page content. Otherwise there is nothing to scroll and nothing becomes sticky.

That’s why @Gandalf has asked to see your code as solutions will depend on the context of your menu.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.