Reduce sidebar size less than 15%?

Hi Andy,

The sidebars are empty on the single post page, in this case, you don't need to activate the sidebar layout.

Can you tell me what are you trying to achieve exactely?

Let me know :)

Hi Ying,

That's true! haha

Actually, I like how there's a little space on the left and right sidebars. The article looks cleaner on desktop view.

In the example article above, I'd just like to reduce the size of the left and right sidebar slightly more, so the article width is increased, but not too much.

Right now the article width is 720px, I'd like to aim for 775px? Not sure if it's possible. I thought if maybe I can override the settings and reduce the sidebar widths to 10% that might do it.

I see, in this case, could you disable the sidebar layout and switch to Flexbox at customizer > general?

Then we can have a look and provide a simple CSS solution :)

Let me know!

Hi Ying,

Thank you, I've applied your changes. Please let me know what we can do next.

By the way, I noticed in the 'flexbox' setting, it disrupted my previous css changes for the primary navigation.

It used to look like this:

Desktop:
https://imgur.com/a/Zc45B5N

Mobile:
https://imgur.com/a/aON2a0e

1. Remove this CSS you added, so that the toggle and subscribe button align on desktop:
https://www.screencast.com/t/uF8iopvPAvgE

2. Add this CSS:

body .nav-align-right .inside-navigation {
    justify-content: space-between;
}

3. Give this CSS a media query: @media (min-width: 769px)
https://www.screencast.com/t/PYpjBBMzUDzk
So it would be like this:

@media (min-width: 769px) {
    .navigation-branding {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 99;
    }
}

4. Remove this CSS:
https://www.screencast.com/t/oFs1dPXNc

5. Edit this CSS:
https://www.screencast.com/t/tZfMpbIx
To this, so that there'll be 5% space on each side of the article.

body.single .inside-article {
    padding: 40px;
    margin-left: 5%;
    margin-right: 5%;
}

6. Add this CSS in order to make the content width to around 775px on desktop

.single-post div#page {
    max-width: 860px;
}

Please be noted, this step can also be achieved by using a layout element.
https://docs.generatepress.com/article/layout-element-overview/#content-1

For the mobile menu, do you use slide-out navigation on mobile as well?
If so, can you make sure it's set to onat customizer > layout > Off Canvas Panel?

Let me know :)

Fantastic Ying! Thank you!

I think the only 2 things remaining:

1. I've enabled Off Canvas Panel. But, for some reason, the hamburger menu icon won't display on mobile view? Only shows in desktop and tablet view.

2. How do I make the height of my mobile primary navigation larger? It's very thin in mobile view.

https://imgur.com/a/MZ5UJwM

Thank you

Did you set the mobile breaking point to 0?

Try this CSS:

@media (max-width: 768px) {
.menu-toggle {
    display: block !important;
    order: -1 !important;
}
}

Let me know :)

That worked great!! All fixed!

Just one last question:

On Desktop view, notice how the subscribe button is on the left and the hamburger icon is on the right ?

Is it possible to switch spots? Just on desktop view.

Thus, hamburger on left and subscribe button on right.

Is it possible to switch spots? Just on desktop view.

Yes, try this CSS:

@media (min-width: 769px) {
    .menu-bar-items {
        order: -1;
    }
}

Let me know :)

Perfect! Thank you so much Ying! Very much appreciated!!!!!!

Have a great week!

You are welcome Andy :)

Glad to be helpful!