- This topic has 13 replies, 2 voices, and was last updated 7 years, 1 month ago by Paul.
-
AuthorPosts
-
September 14, 2017 at 4:45 am #385223Paul
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.September 14, 2017 at 6:23 pm #385662TomLead DeveloperLead DeveloperHi Paul,
Have you added this CSS?: https://generatepress.com/forums/topic/fixed-left-vertical-navigation-layout-css-and-customizer-only/#post-253050
September 15, 2017 at 9:26 am #386039PaulOk, 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.
September 15, 2017 at 7:53 pm #386298TomLead DeveloperLead DeveloperYou’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 π
September 17, 2017 at 3:15 am #386785PaulThat 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.September 17, 2017 at 10:02 am #386962TomLead DeveloperLead DeveloperI just adjusted the code above to use fixed pixel values – it should work a lot better now π
September 17, 2017 at 11:56 am #386995PaulThat still has the navigation sitting to the left of the window though as opposed to creating a boxed affect?
September 17, 2017 at 8:07 pm #387151TomLead DeveloperLead DeveloperAh, 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 π
September 18, 2017 at 2:20 am #387237PaulI 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 π
September 18, 2017 at 2:22 am #387238PaulIf there’s a way to include widgets as done in this design, all the better – https://www.grayboxpdx.com/
September 18, 2017 at 8:52 am #387415TomLead DeveloperLead DeveloperYou need to remove the previous CSS we were using and only use the block above.
September 18, 2017 at 12:45 pm #387563PaulYeah 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.
September 18, 2017 at 7:17 pm #387702TomLead DeveloperLead DeveloperThere’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 π
September 19, 2017 at 2:28 pm #388283PaulNo worries, thanks for your help.
-
AuthorPosts
- You must be logged in to reply to this topic.