[Resolved] Changing Zeal demo navigation from top to sidebar menu

Home Forums Support [Resolved] Changing Zeal demo navigation from top to sidebar menu

Home Forums Support Changing Zeal demo navigation from top to sidebar menu

Viewing 15 posts - 1 through 15 (of 28 total)
  • Author
    Posts
  • #617177
    Jason

    I used the Zeal demo theme as a base for a client site but my client would like a side navigation menu instead of top. Is there a way to create a sidebar navigation menu like the Navigator demo theme?

    GeneratePress 2.1.3
    GP Premium 1.6.2
    #617184
    David
    Staff
    Customer Support

    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;
    }
    
    
    #617187
    Jason

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

    #617189
    David
    Staff
    Customer Support

    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

    #617191
    Jason

    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

    #617193
    Jason

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

    #617195
    David
    Staff
    Customer Support

    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

    #617197
    Jason

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

    #617203
    David
    Staff
    Customer Support

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

    #617208
    Jason

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

    #617211
    David
    Staff
    Customer Support

    That will be the Header Padding try reducing that.

    #617213
    Jason

    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

    #617235
    Jason

    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.

    #617252
    David
    Staff
    Customer Support

    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.

    #617255
    Jason

    Ok Ill try it thanks

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