Sidebar Order for Mobile Screens

[alw]

How can I get the left Sidebar to appear above content on mobile screens? I am already using a template to add content above the menu (http://www.kcsanews.com) and I would like the left sidebar to immediately follow the menu on mobile screens.

[Tom]

This would require some major reworking of the current HTML structure.

By default, the content is displayed first, as it’s regarded as the most important content for search engines, so it’s displayed first.

The reworking of the HTML is a bit much to explain here, but there’s another option.

You could GP Hooks to include a new widget area after the header.

Then, hide it on desktop, and show it on mobile:

.new-widget-area {
      display: none;
}

@media screen and (max-width: 768px) {
      .new-widget-area {
            display: block;
      }
}

You can learn how to create new widget areas with a quick Google search.

Make sure you execute PHP in the hook with the new widget area (will require some PHP).

Hope this helps 🙂

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

[alw]

Thanks, I’ll give that a try.
I have seen many requests for the same thing. It may be worth considering as an option for a future update?

[Tom]

Definitely something to look into 🙂

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

[Evandro Arruda]

Hi tom,

I have a right sidebar on my homepage. Is it possible to hide a widget from this bar on mobile devices?

Thanks

[Tom]

Hi there,

Each widget has a unique ID – you can check it by right clicking the widget and inspecting element.

Look for the “aside” element, and you’ll see an id. For example, the 30 day guarantee widget in the right is made up of this: <aside id="text-6" class="widget inner-padding widget_text">

I can now use that ID in CSS to do stuff to:

@media (max-width:768px) {
      #text-6 {
            display: none;
      }
}

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

[Author]

Posts