Moving Sidebar below Page Title on Mobile

[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.

[Leo]

Hi there,

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

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

[Leo]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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?

[Hefin]

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

[David]

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');
}
?>

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Hefin]

Thanks, I used

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

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

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts