[Resolved] Vertical non sliding header on the right side

[Harris]

Hello

Is it possible somehow to have a Vertical, non sliding (always “open) header on the right side?

Thanks

[David]

Hi there,

something like the GP Site : Sider? Just flipped to the right.

https://gpsites.co/sider/

[Harris]

Yes David. Also including the site logo.
How can this be achieved and how can I control its width?

Thanks

[David]

Are you starting a new site? If so you can install the Sider site fro the library and i can walk you through the CSS changes to switch it to the right and increase the width etc.

[Harris]

It’s a new site, but the rest will be done using elementor.
I guess this won’t be a problem or that no unwanted settings will be imported by importing sider site.

Am I right?

[David]

You can use Elementor on the site, the only other changes that may be required is the main content padding. All of these fixes will require some editing of the CSS that is loaded with the Site. If thats ok then we’re happy to help.

[Harris]

Fine David!
Thanks. I will install the site and I will come back to you.

Thanks

[David]

Thats great.

[Harris]

Hello!
I have imported the Sider site (without the demo content).
Please guide me for the rest when you can.
Please also let me know how to control the header width and the sub-menus.

Thanks

[David]

So, go to Customizer > Additional CSS and find this:

@media (min-width: 1000px) {
	body {
		padding: 0 50px 50px;
		margin-left: 300px;
	}

	.site-header {
		position: fixed;
		left: 0;
		top: 0;
		width: 300px;
		z-index: 300;
		height: 100%;
		overflow: auto;
		overflow-x: hidden;
		-webkit-backface-visibility: hidden;
		-webkit-overflow-scrolling: touch;
		transition: .1s ease;
	}
	
	.admin-bar .site-header {
		top: 32px;
	}
	
	.site-header .main-navigation li {
		float: none;
	}
}

And replace it with this:

@media (min-width: 1000px) {
	body {
		padding: 0 50px 50px; /* This line you change to 0 to remove any additional padding */
		margin-right: 300px; /* change this to match site header width */
	}

	.site-header {
		position: fixed;
		right: 0;
		top: 0;
		width: 300px; /* Adjust width */
		z-index: 300;
		height: 100%;
		overflow: auto;
		overflow-x: hidden;
		-webkit-backface-visibility: hidden;
		-webkit-overflow-scrolling: touch;
		transition: .1s ease;
	}
	
	.admin-bar .site-header {
		top: 32px;
	}
	
	.site-header .main-navigation li {
		float: none;
	}
}

I have commented the two lines you need to change to adjust the width currently set to 300px. Also highlighted the line where you can remove the content padding.

[Harris]

Thanks David!
I guess it won’t be a problem to move all CSS to “Simple CSS” so I won’t have CSS code here and there.

I might also need some help to handle the submenus. If so I will come back.

[David]

Not a problem at all moving it all to Simple CSS.

Let us know – there are a few topics regarding submenus on Sider, but here to help 🙂

[Harris]

Found it. Sorry!

[David]

No problems 🙂

[Harris]

Once I got you here two things.
1. How can I add some margin before the navigation or after the logo? (in the vertical header). I want a larger gap between logo / navigation.
2. The GP template (site) you advised me to import had some stuff just after the navigation, but once I didn’t imported the content they obviously aren’t inserted in my header. How can I add some stuff (a couple of elementor shortcodes) after the navigation? Should I use a hook or is there some other way?

Thanks
Harris

[Author]

Posts