Archived topic
Aside site library flex box menu issue.
7 replies · Started by Eric on October 6, 2020
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?
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 :)
Hi Leo I have put the links below.
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;
}Thanks Leo where should I add it in the custom css? Is it part of any of the media queries?
Anywhere should work :)
Let me know if you notice something odd.
Looks good i'll mark as solved.
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;
}
}