- This topic has 13 replies, 2 voices, and was last updated 6 years, 7 months ago by
.
-
Posts
-
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.Lead Developer
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.
- You must be logged in to reply to this topic.