[Resolved] Aside site library flex box menu issue.

Home Forums Support Aside site library flex box menu issue.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1475242
    Eric

    I started converting over my aside style site to flexbox on a staging site and I think I found an error. The left menu has a weird wrapping issue where my menu is no longer centered in a column. I feel that I just need to add flex-direction:column; to .main-navigation .main-nav>ul but then I run into .nav-float-right #site-navigation {margin-left: auto; } which spaces it out weird.

    Is the problem in the code from the site library and I should wait for that to be updated to flex box?

    #1475279
    Leo
    Staff
    Customer Support

    Hi there,

    We are just updating the site library sites now.

    Which site are you referring to?

    Any chance you can link us to the site in question?

    You can use the private information field.

    Let me know πŸ™‚

    #1475335
    Eric

    Hi Leo I have put the links below.

    #1475339
    Leo
    Staff
    Customer Support

    Ahh you are using Sider.

    I was actually just fixing it.

    Try this:

    .main-navigation .main-nav>ul {
        flex-direction: column;
    }
    .nav-float-right #site-navigation {
        margin-right: auto;
    }
    #1475362
    Eric

    Thanks Leo where should I add it in the custom css? Is it part of any of the media queries?

    #1475365
    Leo
    Staff
    Customer Support

    Anywhere should work πŸ™‚

    Let me know if you notice something odd.

    #1475375
    Eric

    Looks good i’ll mark as solved.

    #1475377
    Leo
    Staff
    Customer Support

    Here is the full updated CSS:

    @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 {
      flex: 1;
      flex-direction: column;
    }
    
    .header-widget {
    	order: 3;
    	text-align: center;
    }
    
    .nav-float-right .inside-header .main-navigation {
    	order: 2;
    	margin-top: 50px;
    	margin-bottom: 50px;
    }
    
    .dropdown-click .site-header .main-navigation ul ul {
        position: relative;
    }
    
    .main-navigation .main-nav>ul {
        flex-direction: column;
    }
    
    .nav-float-right .header-widget {
        margin-left: 0;
    }
    
    .nav-float-right .header-widget .widget {
        margin-bottom: 50px;
    }
    
    .nav-float-right #site-navigation {
        margin-right: auto;
    }
    
    a.button,
    a.button:visited,
    button,
    input[type="submit"] {
    	border-width: 1px;
    	border-style: solid;
    	border-color: inherit;
    }
    
    .mc4wp-form-fields input {
    	margin-bottom: 10px;
    	width: 100%;
    	text-align: center;
    }
    
    .main-navigation.toggled .main-nav li {
    	text-align: center !important;
    }
    
    ::-webkit-input-placeholder {
    	font-size: 14px;
    }
    
    ::-moz-placeholder {
    	font-size: 14px;
    }
    
    :-ms-input-placeholder {
    	font-size: 14px;
    }
    
    :-moz-placeholder {
    	font-size: 14px;
    }
    
    .no-sidebar:not(.archive):not(.blog) .inside-article > *, 
    .no-sidebar:not(.archive):not(.blog) #comments,
    .no-sidebar:not(.archive):not(.blog) .paging-navigation {
    	max-width: 700px;
    	margin-left: auto;
    	margin-right: auto;
    }
    
    @media (max-width: 768px) {
    	.separate-containers .site-main {
    		margin-top: 20px;
    		margin-bottom: 0;
    	}
    	
    	.post {
    		margin-bottom: 20px;
    	}
    	
    	.nav-float-right .inside-header .main-navigation {
    		margin-top: 0;
    	}
    }
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.