[Resolved] Please help to adjust Fixed TOC & content area display right

[Trạng]

Dear supporter,

I really have trouble in setting Fixed TOC while keeping the main content area focus on center with “width” display is at least 700px

I used Fixed TOC premium => then I add it in Left sidebar widget (remove all other widget already) -> Screenshot here

Then, I set the layout for single post is -> Sidebar/Content/Sidebar because in the future I will add author box in right sidebar also. => Screenshot here

But, it can’t display as I want. The reality is so ugly. Please help! => Screenshot here

[David]

Hi there,

the Search site uses a limited content width for the single posts.
Go to Appearance > Elements and your will see a Layout Element titled: Post Width.
You can delete that element and then your posts width will be the same as the other pages.

Try changing that first.

[Trạng]

Hi David, I just deleted the post width element. What can I do next to display the fixed TOC in the left sidebar?

And one more question, if I one to narrow the main content area a little smaller just like this site. How can I adjust it?

[David]

You need to check the TOC plugin settings or with the plugin author – see here:

https://www.screencast.com/t/0sClY6cf8GFu

The TOC element exists in the sidebar but it has its own CSS properties that has a Fixed position Off screen and its opacity/visibility set to hidden. Its not something being controlled by the theme.

For sizing the page layout – there are several factors:

1. the Customizer > Layout > Container -> Container Width defines the overall width of the site content ( sidebar / content / sidebar ). That site example is set to 1600px.
2. The Customizer > Layout > Sidebars – you can set the % of the sidebars, this will define how much space of the 1600px they occupy.

However that site is using this custom CSS to adjust the %’s:

@media (min-width: 1024px) {
    body.single.single-post
    div#primary {
        width: 51%;
    }

    body.single.single-post
    div#right-sidebar {
        width: 27%;
    }

    body.single.single-post
    div#left-sidebar {
        width: 22%;
    }
}

[Trạng]

Hi David, thanks for your help. I can adjust the main area content’s width now.

But the fixed toc left sidebar still meets error. I setting it correcly to display in widget but don’t know why it’s in hidden state. Screenshot

[David]

Thats an issue you would need to speak the plugin author about – as its controlling its position.
In the meantime – does it display if your Uncheck the Fixed the Widget option ?

If it does then we can provide some CSS for making it sticky – that may be a better solution.

[Author]

Posts