[Resolved] Sidebar Order for Mobile Screens

Home Forums Support [Resolved] Sidebar Order for Mobile Screens

Home Forums Support Sidebar Order for Mobile Screens

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #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.

    #64466
    Tom
    Lead Developer
    Lead Developer

    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 ๐Ÿ™‚

    #64477
    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?

    #64527
    Tom
    Lead Developer
    Lead Developer

    Definitely something to look into ๐Ÿ™‚

    #126481
    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

    #126482
    Tom
    Lead Developer
    Lead Developer

    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;
          }
    }
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.