try adding this css statement in a custom css plugin or child theme.
.main-sidebar{
z-index:999;
}
That looks rather strange try this and see if you like it better.
.main-sidebar{
float:none;
width:100%;
z-index:999;
}
and
@media (min-width: 950px)
.main-sidebar {
width: 18% !important;
float: left;
}
Thanks .. much better, but something looks strange.
You need to add both parts above. The first part changes the sidebar to 100% width and removes the float so it doesn’t look strange.
.main-sidebar{
float:none;
width:100%;
z-index:999;
}
and the second part changes the screen so the sidebar only takes up 18% width and floats it to the left.
@media (min-width: 950px)
.main-sidebar {
width: 18% !important;
float: left;
}
You still have a problem. The menu bar is on the left and your button is on the right. You might want to float the menu button left and the title right.
I don’t see your media query
@media (min-width: 950px)
.main-sidebar {
width: 18% !important;
float: left;
}
this is controlling the sidebar when it gets above 950px.
Now I have the whole right part black and only if I scroll I can see some content
.main-sidebar{
float:none;
width:100%;
z-index:999;
background-color: darkred;
}
@media (min-width: 950px)
.main-sidebar {
width: 18% !important;
float: left;
background-color: darkred;
}
This is what I put in the custom css
