- This topic has 5 replies, 3 voices, and was last updated 6 years, 11 months ago by
Tom.
-
AuthorPosts
-
January 12, 2015 at 7:40 am #64448
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.
January 12, 2015 at 8:20 am #64466Tom
Lead DeveloperLead DeveloperThis 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-developmentJanuary 12, 2015 at 8:38 am #64477alw
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?January 12, 2015 at 5:00 pm #64527Tom
Lead DeveloperLead DeveloperDefinitely something to look into ๐
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentAugust 4, 2015 at 2:00 pm #126481Evandro 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
August 4, 2015 at 2:03 pm #126482Tom
Lead DeveloperLead DeveloperHi 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 -
AuthorPosts
- You must be logged in to reply to this topic.