Changing Zeal demo navigation from top to sidebar menu

Hi there, a combination of the two! nice :)

You can try taking the CSS used in Navigator and adding that to your CSS. Here it is:

/* ------
Fixed Header
------- */

@media (min-width: 769px) {
	body {
		margin-left: 200px; /* Match this to site header width */
	}

	.site-header {
		position: fixed;
		left: 0;
		top: 0;
		width: 200px; /* Adjust this to increase width of sidebar */
		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;
	}
}

.inside-header {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
	height: 100%;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}

.site-branding,
.site-logo {
	-webkit-box-ordinal-group: 2;
	    -ms-flex-order: 1;
	        order: 1;
}

.header-widget {
	-webkit-box-ordinal-group: 4;
	    -ms-flex-order: 3;
	        order: 3;
	margin-top: auto;
	margin-bottom: 20px;
}

.nav-float-right .inside-header .main-navigation {
	-webkit-box-ordinal-group: 3;
	    -ms-flex-order: 2;
	        order: 2;
	float: none;
	margin-top: 20px;
	margin-bottom: 50px;
}

.nav-float-right .header-widget {
	float: none;
	top: auto;
	max-width: 100%;
}

.dropdown-hover .site-header .main-navigation .main-nav .sub-menu, .dropdown-hover .main-navigation:not(.toggled) ul ul li:hover>ul {
	opacity: 1 !important;
	display: block !important;
	right: auto !important;
	position: relative;
	top: auto;
	float: none;
	text-align: center;
}

Ok do I need to comment out any of the other CSS from ZEAL to set it up properly?

And thanks for the quick reply I just walked away and boom heard the notification lol :)

Don't remove the existing CSS, Just add it to the bottom of the stack.

Ha ha you're welcome, trying to keep on top before Tom and Leo wake up - can't promise it every day lol

That worked perfectly thanks! Only problem is my logo disappeared I read another topic that was similar on here earlier but cant remember which one lol

Well Im glad I got lucky and caught you on a good day :thumbsup:

Aah yes, the logo you have set is in the Navigation. For the vertical header you need to add one to the Site Identity in the customiser.

As long as i am not setting any precedence here we should be ok. We aim for 24hr response but its usually with 3hrs lol

Ok Ill try that and No problem I wont complain if its not instantaneous next time.

You're welcome - let us know. I just tested and it seems to work ok. Just need to tweak some pagebuilder settings

Ive set Logo and site icon in the customizer but am not seeing it show at the top of the menu

That will be the Header Padding try reducing that.

I see the image when I use inspect the page but it says the image dimensions are 0x0, but I do see the image linked in the source html

EDIT: Ill try to eliminate some of the padding and let you know thanks

Ok eliminated the padding and that worked I still have the navigation logo set and had to remove that but one last issue now the logo is showing underneath the menu? What do I need to edit to get it to show on top.

Thanks again for all of your help.

Maybe this - find this with the CSS added:

.nav-float-right .inside-header .main-navigation {
	-webkit-box-ordinal-group: 3;
	    -ms-flex-order: 2;
	        order: 2;
	float: none;
	margin-top: 20px;
	margin-bottom: 50px;
} 

And remove the .nav-float-right

Or alternatively within the Customiser > Layout > Primary navigation - set its location to float right.

Ok Ill try it thanks