[Support request] Styling the heading \ moving sidebar section on mobile

[Sapir]

Hey,

Just wanted to say I renewed my license and I was very satisfied. You deserve it guys.

1. Can I style the heading?
Example: Taking heading 2 and give it some style like colored underline and such?
And whenever I use this heading the style remains.

If there is such an option, where can I find the style commands?

2. I want to show the first section at the left sidebar first at mobile.
I used the sidbar to put there the Table of content. I just want it to appear first at mobile (Just this block at sidebar and not the whole left sidbar).

Thanks.

[David]

Hi there,

glad to hear you’re enjoying the theme.

Can you share a link to your site so i can see the current setup ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sapir]

Here. A ling straight to a post.

[David]

Try this CSS:

@media(max-width: 768px) {
    .site-content {
        display: flex;
        flex-direction: column-reverse;
    }
    /* Optional make Toc Fill width */
    .lwptoc .lwptoc_i {
        width: 100%;
        box-sizing: border-box;
    }
}

I have included the Optional CSS to make the ToC fill the width of the browser.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sapir]

Hi David,

Those 2 options dose’nt work at all (Nothing happens).
Ill Say again what I want.

The toc alone should be displayed at the top of the post at mobile. Rest of the sidbar can stay where it is.

So i’ll appriciate if you can check why this code isn’t working (Same for the optional one).

[Tom]

Hi there,

Since the TOC is inside the sidebar, it isn’t possible to separate it from the other sidebar items.

One option would be to add another TOC above the content but hide it with CSS on desktop. That way you could display it and hide the sidebar one on mobile.

Let me know if that helps or not 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts