How to get sidebar widgets from PC to appear above posts on mobile

matildamarseillaise · Member · Oct 17, 2017 at 9:02 am
Copy link

Add topic to favorites
In particular I have a language switcher widget which I need to have appear at the top of the page on mobile rather than having to scroll down a lengthy page to get to the bottom.

I am not sure if it is something that is limited by the Plane theme in particular?

Any assistance would be greatly appreciated.

The blog I need help with is: (visible only to logged in users)
siobhyb · Member · Oct 17, 2017 at 11:17 am
Copy link
Hi there,

I can see that matildamarseillaise.com is redirecting to a third-party host while these forums are intended to support sites that are hosted here at WordPress.com.

The fact that the site is running on the free software available over at WordPress.org may have caused some confusion.

As your site is hosted elsewhere, the theme’s dedicated support forum over on WordPress.org is the best place for you to go with any extra questions:

https://wordpress.org/support/theme/flato

I’ll help you with this one though. :) You could add the following custom CSS to move the language switcher widget to the top of the page on screens that are 768px in width or smaller:
```
@media only screen and (max-width: 768px) { 
    .widget_polylang {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

    .site-header {
        margin-top: 149px;
    }
}
```
As you already have Jetpack installed then a straightforward way to add CSS is to enable its custom CSS module. (Alternatively you can set up a child theme or activate a standalone CSS plugin.)
matildamarseillaise · Member · Oct 17, 2017 at 10:09 pm
Copy link
Thank you so much. That worked. And thanks also for helping me even though I was in the wrong forum.

A quick further question that you may be able to answer or I can direct to that forum.

Is there a way of making it appear below the blog name banner but above the post for mobile? The CSS you very kindly gave me puts it above the Matilda Marseillaise name banner.

Thanks again,
Matilda
siobhyb · Member · Oct 18, 2017 at 10:05 am
Copy link
Hi Matilda. (I love your name by the way!)

Try replacing the CSS I gave you with the following to move the widget beneath the site’s header area on mobile:
```
@media only screen and (max-width: 768px) { 
    .widget_polylang {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

    #primary {
        margin-top: 174px;
    }

    #content {
        position: relative;
    }
}
```
Please do post to the forum on WordPress.org if you have any further questions. WordPress.org-related help and information can cause confusion on this forum.

No items found.