0

I've created a sticky navbar:

.topnav {
    min-height: 48px;
    position: sticky;
    top:0;
    left:0;
}

The items in the topnav class are just a elements:

.topnav a {
    float: left;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

This is applied to the html:

<div>...some content...</div>
<div class="topnav">...a few links...</div>
<div class="container">
    <div>...dynamic created table resolves to much wider than 100%...</div>
</div>

The navbar successfully sticks to the top as I scroll down the page.

However, my page also has the dynamically created tables which allow the page to scroll to the right - and the left:0; doesn't do anything - the navbar just scrolls away into the distance if I scroll to the right.

I can see the parent div with class="container" resolves to the width of the screen only so am wondering if this is why sticky left doesn't work?

Is it the wide table element that's causing the issue and how can I fix it?

jamheadart
  • 5,047
  • 4
  • 32
  • 63
  • 1
    Trying to get position: sticky to work with horizontal scrolling is complicated. Check out this demo page to see one implementation https://horizontal-scrolling-sticky-section.webflow.io/ – TylerH Mar 19 '20 at 16:31
  • *resolves to the width of the screen only so am wondering if this is why sticky left doesn't work?* --> yes, you need to make the container inline-block with min-width:100% and also make topnav inline-block – Temani Afif Mar 19 '20 at 20:15

0 Answers0