[Resolved] Left sidebar smaller than 15%

[Guido]

Hi there,

I am trying to use the left sidebar for a vertical navigation, and set it to a width of 10% and show it fixed.
When using the default 15% everything looks good, the sidebar is right against the content.
But this takes up too much space from the page, and 10% is sufficient.

So I try solving this with css from your support forum I found:

@media (min-width: 768px) {
#left-sidebar {
width: 10%;
height: 100%;
background-color: #1a2930;
position: fixed;
opacity: 1;
top: 0px;
left: 0px;
}
#primary {
width: 90%;
}
}
The 10% in the header section looks fine, but in the content area there is an extra white space; left-sidebar and content are not against eachother.

I already changed -customizer -layout -container -separate space to zero, and content padding-left and right to zero.

But still there is space.

When inspecting #primary I see this applied:

@media (min-width: 768px)
#primary {
width: 90%;
}

@media (min-width: 1025px)
.push-15 {
left: 15%;
}

When I change this in the inspector to 10% it seems to solve the problem, but when I add it to my additional css, the space appears again…also it does not look good on ipad.

Is there something I am missing? And why can I only set customizer till 15%? Can you change it to go until like 5%

gr Sylvia

[Tom]

Hi there,

Have you tried changing the sidebar width in the Customizer? You can find it in Customize > Layout > Sidebars.

Let me know 🙂

[Guido]

At Customize > Layout > Sidebars I can’t change the left-sidebar to smaller than 15%. That’s the problem.

gr Sylvia

[Tom]

Ah, sorry about that. Can you try this PHP?:

add_filter( 'generate_left_sidebar_width', function() {
    return 10;
} );

Let me know 🙂

[Guido]

Hi Tom,

Yes the whitespace is now gone! And looking good on ipad too. Thank you very much.

That code I found is confusing. Is it not possible to make the sidebar-left width settings go to 5% instead of 15% in the customize-layout-sidebar options? Because left sidebar is a good place for vertical menus.

greetings Sylvia

[Guido]

Hi Tom sorry,

I am now having issues with my right sidebar, which is at 20%.
It is pushing its content over the ‘content’ area in the middle, and leaving a white gap in the right.
I use elementor but settings for sidebar is in GP customizer layout sidebar-content-sidebar.

Also it is on fullwidth screen.

Gr Sylvia

[Tom]

This is because your left bar is fixed, so it’s been taken out of the flow of the page. That prevents it from pushing the sidebar over to where it should be.

Try this:

@media (min-width: 768px) {
    .content-area {
        margin-right: 10%;
    }
}

Let me know if that fixes it or not 🙂

[Guido]

Hi Tom,

Thanks very much, this works!

I didn’t know that ‘fixed’ also takes it out of the flow.

gr Sylvia

[Tom]

Glad I could help 🙂

[Author]

Posts