[Resolved] Fixed top bar & left nav

Home Forums Support [Resolved] Fixed top bar & left nav

Home Forums Support Fixed top bar & left nav

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #385223
    Paul

    I’m trying to recreate a fixed top bar and vertical left navigation layout same as used on FB – https://www.facebook.com/GeneratePress/

    I’ve followed the customization instructions and directions I found in this post – https://generatepress.com/forums/topic/fixed-left-vertical-navigation-layout-css-and-customizer-only/page/2/

    The top bar is also fixed using css.

    I have two problems:

    The navigation isn’t fixed until it hits the top of the browser window on scroll. This also means that scrolling to the bottom of the page will eventually cause the navigation to sit flush against the footer widgets, with no margin. How can I correct that?

    I also need to add a 20px space between the top bar and nav/content, and change it’s z-index. I can set this to 1 which gives the top bar display priority over the content, but not the nav. That won’t be an issue though if I can get the nav to be truly fixed.

    https://style960.com/smb-sidenav/2017/09/13/hello-world/

    Thanks in advance,
    Paul.

    #385662
    Tom
    Lead Developer
    Lead Developer
    #386039
    Paul

    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.

    #386298
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #386785
    Paul

    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.

    #386962
    Tom
    Lead Developer
    Lead Developer

    I just adjusted the code above to use fixed pixel values – it should work a lot better now πŸ™‚

    #386995
    Paul

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

    #387151
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #387237
    Paul

    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 πŸ™‚

    #387238
    Paul

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

    #387415
    Tom
    Lead Developer
    Lead Developer

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

    #387563
    Paul

    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.

    #387702
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #388283
    Paul

    No worries, thanks for your help.

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.