[Resolved] Vertical non sliding header on the right side

Home Forums Support [Resolved] Vertical non sliding header on the right side

Home Forums Support Vertical non sliding header on the right side

Viewing 15 posts - 1 through 15 (of 36 total)
  • Author
    Posts
  • #695571
    Harris

    Hello

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

    Thanks

    GeneratePress 2.1.4
    GP Premium 1.7.2
    #695600
    David
    Staff
    Customer Support

    Hi there,

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

    https://gpsites.co/sider/

    #695765
    Harris

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

    Thanks

    #695847
    David
    Staff
    Customer Support

    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.

    #695851
    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?

    #695856
    David
    Staff
    Customer Support

    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.

    #695858
    Harris

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

    Thanks

    #695860
    David
    Staff
    Customer Support
    #696397
    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

    #696439
    David
    Staff
    Customer Support

    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.

    #696801
    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.

    #696917
    David
    Staff
    Customer Support

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

    #714521
    Harris

    Found it. Sorry!

    #714689
    David
    Staff
    Customer Support
    #714705
    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

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