[Resolved] Left sidebar smaller than 15%

Home Forums Support Left sidebar smaller than 15%

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #948063
    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

    #948389
    Tom
    Lead Developer
    Lead Developer

    Hi there,

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

    Let me know 🙂

    #948481
    Guido

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

    gr Sylvia

    #949110
    Tom
    Lead Developer
    Lead Developer

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

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

    Let me know 🙂

    #949507
    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

    #949707
    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

    #949877
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #950043
    Guido

    Hi Tom,

    Thanks very much, this works!

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

    gr Sylvia

    #950177
    Tom
    Lead Developer
    Lead Developer
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.