[Resolved] Top bar with Off canvas hamburger menu – move it to a sidebar

Home Forums Support [Resolved] Top bar with Off canvas hamburger menu – move it to a sidebar

Home Forums Support Top bar with Off canvas hamburger menu – move it to a sidebar

  • This topic has 7 replies, 4 voices, and was last updated 1 year ago by Tom.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1471494
    George

    Hello,

    Would it be possible to move the top bar to the left hand side of the screen, on a vertical position, like shown in the screenshot attached?

    Practically, I want to move the entire top navigation to the left-hand side of the screen, on desktop.

    Explanation img

    #1471538
    David
    Staff
    Customer Support

    Hi there,

    not sure about that. Do you have a site with the layout in place so i can take a look?

    #1472077
    George

    I sent you the link inside private information area.

    #1472242
    Elvin
    Staff
    Customer Support

    Hi,

    We can copy the style created from our very own Slideout theme from Site Library. https://gpsites.co/slideout/

    /* GeneratePress Site CSS */ /* Side menu CSS */
    
    @media (min-width: 769px) {
    	body {
    		padding-left: 60px;
    	}
    }
    
    #site-navigation {
    	position: fixed;
    	left: 0;
    	min-height: 100vh;
    	max-width: 60px;
    	overflow: hidden;
    }
    
    #content {
    	padding: 40px;
    }
    
    #main,
    .sidebar > .inside-right-sidebar,
    .sidebar > .inside-left-sidebar{
    	margin-top: 0;
    	margin-bottom: 0;
    }
    
    #site-navigation .main-nav > ul {
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
    	-webkit-box-orient: vertical;
    	-webkit-box-direction: normal;
    	-ms-flex-direction: column;
    	flex-direction: column;
    	min-height: 100vh;
    }
    
    .admin-bar #site-navigation .main-nav > ul {
    	min-height: calc(100vh - 32px);
    }
    
    .slideout-toggle {
    	-webkit-box-ordinal-group: -9;
    	-ms-flex-order: -10;
    	order: -10;
    }
    
    #site-navigation .rotate {
    	-webkit-transform: rotate(90deg);
    	-ms-transform: rotate(90deg);
    	transform: rotate(90deg);
    	margin-bottom: auto;
    	white-space: nowrap;
    }
    
    @media (max-width: 768px) {
    	#site-navigation .menu-toggle {
    		display: none;
    	}
    }
    
    .site-footer {
      padding: 0 40px;
    	box-sizing: border-box;
    }

    Also, make sure to add rotate class to your menu items on Appearance > Menu so the display vertically on the side.

    Let us know if it works for you.

    A wise man once said:
    "Have you cleared your cache?"

    #1474124
    George

    Hello,

    Thank you, it worked!

    Now, can it be possible to move the hamburger menu to the center of the screen, and the social icons to the bottom (like in your slideout theme)?

    #1474945
    Tom
    Lead Developer
    Lead Developer

    You could try this:

    li.slideout-toggle {
        margin-top: auto;
        margin-bottom: auto;
    }
    #1475147
    George

    Awesome, it worked!

    Thank you!

    #1475432
    Tom
    Lead Developer
    Lead Developer
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.