[Support request] Left sidebar fixed menu layout

[Jason]

Hello,
I’m trying to build a left sidebar navigation layout using GP. Is that possible ? And if yes, where should I start ?
I’m using WPBakery as page builder if it matters. Here is a screenshot of the layout that I’m trying to achieve.
The left sidebar navigation should be fixed and only the content will scroll.

[David]

Hi there,

theres a site titled Sider in the Site Library that displays a vertical header like that on Desktop:

https://gpsites.co/sider/

I think that would be a good starting place.

[Jason]

Is there a way to do it w/o having to import that layout ?
I see there is an option in Customize – Layout – Primary Navigation (Left Sidebar). Which seems to work, but the logo is not included in the sidebar…

[Jason]

Ok, so I imported the layout that you specified, and looks pretty cool. Is there a way to add other elements to the left sidebar? Like social icons, text or anything else ?
Thank you!

[David]

The Sider site uses the Customizer > Widgets > Header Widget for adding other stuff like social icons etc.
Is there somewhere specific you want to add some other stuff?

[Jason]

Yeah, phone, email, stuff like that…

[Jason]

Oh, and how can I position it inside the sidebar ? Sorry, I didnt properly read your question.

[David]

So you can add it to the Widet area, and that will be displayed below the menu.
If you then need that position to change eg. push it to the bottom of the side header then it will take some CSS.
If you can share a link to the site and let me know the specifics i can assist with that

[Jason]

I think I managed to arrange the content, the only problem that I’m having, is that on certain devices, smaller height devices, the sidebar has a scroll on it… I’ve attached the link to the DEV website. Thank you David!

[Ying]

Hi Jason,

The method you are using now (sider template) is suitable for shorter site header.

We can try another method to make it like this: https://www.screencast.com/t/R3H1Ueq3

Let me know if this is what you are looking for 🙂

[Jason]

Yeah, that will be perfect actually.

[Ying]

Try to follow below steps:

1. Change this CSS:

body {
		padding: 0 50px 50px;
		margin-left: 300px;
	}

	.site-header {
		position: fixed;
		left: 0;
		top: 0;
		width: 350px;
		z-index: 300;
		height: 100%;
		overflow: auto;
		overflow-x: hidden;
		-webkit-backface-visibility: hidden;
		-webkit-overflow-scrolling: touch;
		transition: .1s ease;
		background: linear-gradient(180deg, rgba(167,19,38,1) 0%, rgba(135,4,7,1) 100%);
	}

to:

body {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.site#page, .site-footer {
    width: calc( 100% - 350px);
}
.site-header {
		position: sticky;
		left: 0;
		top: 0;
		width: 350px;
		z-index: 300;
		height: 100%;
		overflow: auto;
		overflow-x: hidden;
		-webkit-backface-visibility: hidden;
		-webkit-overflow-scrolling: touch;
		transition: .1s ease;
		background: linear-gradient(180deg, rgba(167,19,38,1) 0%, rgba(135,4,7,1) 100%);
	}

Let me know if that works 🙂

[Jason]

Sorry for late reply, it worked on small screen devices, like laptops, but looks weird on 1080p resolution or 2k.
Is it possible to extend the sidebar bg color on bigger devices all the way down ?
The same looks on 1920×1080, only the fact that the white space is smaller…
Here’s a screenshot from a 2560×1440 monitor:

[David]

In the .site-header CSS rule add this property;

min-height: 100vh;

[Jason]

Worked, thank you !

[Author]

Posts