[Resolved] Sider Theme: Make Nav Menu Horizontal?

Home Forums Support Sider Theme: Make Nav Menu Horizontal?

  • This topic has 3 replies, 2 voices, and was last updated 10 months ago by Leo.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1067950
    Paul

    I built a site for a client several years ago using the Sider theme. The primary navigation menu is positioned on the left-hand side.

    But now the client wants a standard horizontal menu instead. Is there any easy way to do this without a ton of CSS re-working?

    #1067963
    Leo
    Staff
    Customer Support

    Hi there,

    That layout is actually created with CSS so you would need to delete the CSS that makes the vertical menu.

    Try removing this part:

    @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;
    	}
    }
    
    .inside-header {
    	display: flex;
      flex: 1;
      flex-direction: column;
      align-items: center;
    }
    
    .site-branding,
    .site-logo {
    	order: 1;
    }
    
    .header-widget {
    	order: 3;
    }
    
    .nav-float-right .inside-header .main-navigation {
    	order: 2;
    	float: none;
    	margin-top: 30px;
    	margin-bottom: 50px;
    }
    
    .nav-float-right .header-widget {
    	float: none;
    	top: auto;
    	max-width: 100%;
    }
    #1067967
    Paul

    Thanks Leo. After looking at it further, that’s what I figured. I did that, now just need to make a few more tweaks on the nav logo. Cheers!

    #1067968
    Leo
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.