[Resolved] Sticky Left Sidebar – Top on mobile/tablet

[Matt]

To follow on from this thread, I tried adding the CSS supplied and it didn’t work – as in, the left sidebar didn’t appear at the top when viewed in a mobile browser.

[Ying]

Hi Matt,

Are you trying to move the left sidebar to top on mobile?
https://www.screencast.com/t/gL0wuwT0hjn

If so, you’ll need to add this css before the } of the mobile media query @media (max-width: 1024px):

.site-content {
    display: flex;
    flex-direction: column;
}

Let me know 🙂

[Matt]

Thanks! That puts the nav menu at the very top on mobile (I’d prefer under the breadcrumb). That css also makes it look weird on tablet view

[David]

Hi there,

its not possible to move the sidebar between elements in the post content without using Javascript which i don’t recommend.

Instead you would need to add the ToC to the top of the Post Content ( which is where it will be left for tablet and mobile views ). Keep the now empty left sidebar.

If you want to set that up and let me know – i can then provide some CSS to position it where it currently is for desktop.

[Matt]

Ah I see so you’d use css to move to left sidebar on Desktop only? Smart!
Yes please, I’ve moved TOC, custom css to place TOC in left sidebar on Desktop would be great, and much appreciated!

[David]

Any reason – why you’re using the Customizer > General –> Structure >> Floats option. It would be better all round to use the Flexbox version. If thats breaking stuff let me know. If it isn’t can you change to Flex ?

[Matt]

I dont think so. I’ve just changed to Flexbox

[David]

Try adding this CSS:

/* Position TOC over sidebar on wider screens */
@media(min-width: 1024px) {
  #primary {
    position: static;
  }

  #content {
    position: relative;
  }

  .lwptoc {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    max-width: 220px; /* added this line */
  }

  .lwptoc_i {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }
}
/* remove sidebar on tabet and small devices */
@media(max-width: 1023px) {
    .left-sidebar #primary {
        flex: 1 0 100%;
    }
    .left-sidebar  #primary  .site-main {
        margin-left: 0;
    }
    #left-sidebar {
        display: none;
    }
}

[Matt]

Wow. That’s great! Thanks – Only the sidebar / TOC (when expanded/revealed) is overlapping the main content now?

[David]

Made a tweak to the code above – i commented the line i added:

max-width: 220px; /* added this line */

may need to tweak the max-width value.

[Matt]

That worked a treat! Increased max-width and decreased padding a bit. Thanks!

[David]

You’re welcome

[Author]

Posts