[Resolved] Moving Sidebar below Page Title on Mobile

Home Forums Support Moving Sidebar below Page Title on Mobile

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1078486
    Hefin

    I saw related questions in the forum, but was not able to figure out how it has to be done..

    So what we need to achieve here is on mobile we want the Sidebar to be visible under the Page Title.

    Can you please assist me with the same?

    Thanks.

    #1078499
    Leo
    Staff
    Customer Support

    Hi there,

    Looks like you’ve already done it?
    https://www.screencast.com/t/DCnlmeP3

    Let me know 🙂

    #1078538
    Hefin

    Ahh..I did a dirty workaround, modified the theme file which I dont want to.. what i did right now was

    1) Edited content-page.php and moved the Title code from there to page.php
    2) added generate_construct_sidebars(); below the title code

    Is there a cleaner method to do this without losing the changes when i update the theme

    #1078571
    Leo
    Staff
    Customer Support

    There isn’t a cleaner way to do this, unfortunately.

    Another option would be to add the same content inside page content as well and make it hide on desktop:
    https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

    Then we can hide the sidebar on mobile to avoid duplicated content.

    Let me know if this helps 🙂

    #1079348
    Hefin

    Another option would be to add the same content inside page content as well and make it hide on desktop:
    https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

    Can we do this using Elements? like I add the Widget code under elements and display it under before_content?

    But how would I hide the sidebar widget on mobile then?

    #1079350
    Hefin

    Another addition to the theme could be that Elements >> Have a Display Rules for Mobile Only?

    #1079560
    David
    Staff
    Customer Support

    Hi there,

    you can use this CSS to remove the right sidebar on the mobile:

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

    Then hook in your content with the hide-on classes that Leo provided.

    Mobile conditionals are tricky and even trickier to add as a display rule in Elements – the logic required to create display rules is really complicated.

    As an alternative to the above you can try just hooking in the following script to call the Sidebar using the wp_is_mobile funtion. Note this functions triggers on load, so don’t expect it to do anything when resizing your browser:

    <?php
    if ( wp_is_mobile() ) {
        get_sidebar('right-sidebar');
    }
    ?>
    #1090471
    Hefin

    Thanks, I used

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

    As i wanted it to go away even when resizing the window!

    #1091251
    David
    Staff
    Customer Support
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.