Fixed top bar & left nav

Hi Paul,

Have you added this CSS?: https://generatepress.com/forums/topic/fixed-left-vertical-navigation-layout-css-and-customizer-only/#post-253050

Ok, that's better on desktop but the top bar and mobile header still overlap. Any chance a vertical nav (full width & boxed) could be a native feature? In some contexts, and depending on the logo, they work much better.

You'll want to remove the position:fixed custom CSS from your top bar.

Then try this CSS instead:

@media (min-width: 769px) {
  .site-header {
    display: none;
  }

  body {
    padding-left: 250px;
  }

  #primary {
    width: 100%;
    left: auto;
  }

  .separate-containers .site-main {
    margin-left: 0;
  }
    
  .sidebar {
    height: 100%;
    background-color: #1a2930;
    width: 250px;
    position: fixed;
    top: 0px;
    left: 0px;
  }
}

I definitely would like to add this as a core feature soon :)

That is better - how can I make that 'boxed' and have it work correctly across different desktop resolutions? I notice if I add a value to left attribute of the sidebar it will overlap the content as I resize the window. The top bar is also flush right on some desktop resolutions.

I'd like to replicate this kind of layout - http://filmpittsburgh.org/

If it's not too far away as a core feature I can probably wait for that.

Thanks,
Paul.

I just adjusted the code above to use fixed pixel values - it should work a lot better now :)

That still has the navigation sitting to the left of the window though as opposed to creating a boxed affect?

Ah, so you want the entire site to be contained?

In that case, your CSS would be something like this:

@media (min-width: 769px) {
  .site-header {
    display: none;
  }
    
  .sidebar {
    background-color: #1a2930;
    height: 100vh;
  }
}

Then if you set your sticky navigation transition option to "None", the sidebar should stay in place.

Let me know :)

I don't see any difference with that css added?

This is the basic layout I'd like to have setup with Divi - https://style960.com/wordpress/

But I'm in no rush to use Divi :)

If there's a way to include widgets as done in this design, all the better - https://www.grayboxpdx.com/

You need to remove the previous CSS we were using and only use the block above.

Yeah the navigation stays in place but the sidebar itself scrolls with the content (see the background). I'll just wait until the header can be set vertically in the customizer assuming this option is coming soon.

Thanks.

There's quite a few things planned in GPP before this feature will be officially added.

If you want to keep working on this, re-add this CSS: https://generatepress.com/forums/topic/fixed-top-bar-left-nav/#post-386298

Then I'll see if I can get it contained :)

No worries, thanks for your help.