- This topic has 8 replies, 3 voices, and was last updated 1 year, 1 month ago by
David.
-
AuthorPosts
-
November 26, 2019 at 11:52 am #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.
November 26, 2019 at 12:00 pm #1078499Leo
StaffCustomer SupportHi there,
Looks like you’ve already done it?
https://www.screencast.com/t/DCnlmeP3Let me know π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/November 26, 2019 at 12:28 pm #1078538Hefin
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 codeIs there a cleaner method to do this without losing the changes when i update the theme
November 26, 2019 at 1:02 pm #1078571Leo
StaffCustomer SupportThere 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-classesThen 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/November 27, 2019 at 2:40 am #1079348Hefin
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-classesCan 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?
November 27, 2019 at 2:41 am #1079350Hefin
Another addition to the theme could be that Elements >> Have a Display Rules for Mobile Only?
November 27, 2019 at 5:13 am #1079560David
StaffCustomer SupportHi 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/December 2, 2019 at 1:31 pm #1090471Hefin
Thanks, I used
@media (max-width: 768px) { #right-sidebar { display: none; } }
As i wanted it to go away even when resizing the window!
December 3, 2019 at 2:41 am #1091251David
StaffCustomer SupportYou’re welcome
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.