- This topic has 8 replies, 3 voices, and was last updated 4 years, 4 months ago by David.
-
AuthorPosts
-
November 26, 2019 at 11:52 am #1078486Hefin
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 #1078499LeoStaffCustomer SupportNovember 26, 2019 at 12:28 pm #1078538HefinAhh..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 #1078571LeoStaffCustomer 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 ๐
November 27, 2019 at 2:40 am #1079348HefinAnother 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 #1079350HefinAnother addition to the theme could be that Elements >> Have a Display Rules for Mobile Only?
November 27, 2019 at 5:13 am #1079560DavidStaffCustomer 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'); } ?>
December 2, 2019 at 1:31 pm #1090471HefinThanks, 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 #1091251DavidStaffCustomer SupportYou’re welcome
-
AuthorPosts
- You must be logged in to reply to this topic.