Home › Forums › Weaver Xtreme Theme › Hide Sidebar Widgets on Mobile
- This topic has 15 replies, 2 voices, and was last updated 3 weeks, 2 days ago by
GR8FL.
-
AuthorPosts
-
April 21, 2022 at 14:53 UTC - Views: 74 #70653
I am sure this can be done in CSS but I don’t know how. Currently, they are stacked under the content.
Thanks.
April 21, 2022 at 15:40 UTC - Views: 72 #70656scrambler
ModeratorGive us a link to your site to be sure of it
April 22, 2022 at 15:12 UTC - Views: 67 #70660GR8FL
ParticipantWeird that I never saw this reply. I hope this issue isn’t cropping up again.
Here’s the site: https://sussexaa.org/
April 27, 2022 at 19:35 UTC - Views: 55 #70681GR8FL
Participant@Scrambler, do you know how to hide sidebar widgets on mobile?
April 27, 2022 at 21:04 UTC - Views: 53 #70682scrambler
ModeratorSorry, did not see your answer…
.is-mobile #primary-widget-area {display:none;}
April 28, 2022 at 20:46 UTC - Views: 47 #70685GR8FL
ParticipantThank you.
Is it possible to apply the CSS on a per page basis? Maybe using the Page ID#?
April 28, 2022 at 21:23 UTC - Views: 45 #70686scrambler
ModeratorYes is-mobile and page id class must be connected as they are on the same body tag
.is-mobile.page-id-xxxx #primary-widget-area {display:none;}
April 29, 2022 at 11:00 UTC - Views: 40 #70692GR8FL
ParticipantIf I wanted to have this setup for several pages, could I put it in one rule?
.is-mobile.page-id-xxxx, .page-id-yyyy #primary-widget-area {display:none;}
April 29, 2022 at 15:54 UTC - Views: 38 #70693This reply has been accepted as the best answer.
You have to duplicate the whole selector
.is-mobile.page-id-xxxx #primary-widget-area, .page-id-yyyy #primary-widget-area {display:none;}
If you have a lot of pages, a better way is to give all these pages a common class like
myhidebar
that you would place in the Page editing page > Xtreme Options > Xtreme Plus > per page added classes > Container box
Then the single rule below will affect all the pages with that class
.myhidebar #primary-widget-area {display:none;}
April 30, 2022 at 13:21 UTC - Views: 31 #70694GR8FL
ParticipantThat is so awesome. Thank you.
April 30, 2022 at 13:41 UTC - Views: 29 #70695GR8FL
ParticipantI am using Arconix FAQ plugin which essentially creates posts not pages. Where can I assign the rule in these instances?
I do not see under Xtreme Options > Xtreme Plus > per page added classes > Container box
And for that matter, how would I individually assign posts to hide sidebar if mobile?
I tried .is-mobile.page-id-xxxx #primary-widget-area {display:none;} and then .is-mobile.post-id-xxxx #primary-widget-area {display:none;} and they had no effect.
I could set up a primary widget which would only show if not mobile and a secondary widget to only show if mobile, then that would be fine too.
April 30, 2022 at 14:19 UTC - Views: 25 #70696GR8FL
ParticipantI ended up with this in my CSS which seems to do the trick globally.
@media (min-width: 767px) {#secondary-widget-area {display:none;}}
.is-mobile #primary-widget-area {display:none;}If after this, if I want to hide the secondary widget on mobile for a given page, I suppose I could add what you suggested, but I still don’t know how to hide if it’s a particular post.
.is-mobile.page-id-496 #primary-widget-area {display:none;}
April 30, 2022 at 19:02 UTC - Views: 19 #70697scrambler
ModeratorI am not following.
First if you want to hide both widget area and use the @media (which is a bit faster to activate), you can put it all under a single rule
@media (min-width: 767px) {
#secondary-widget-area {display:none;}
#primary-widget-area {display:none;}
}” I still don’t know how to hide if it’s a particular post.”
Are you trying to hide it on a specific Single post page, all single posts pages, a blog page?
Be more specific and eventually give a link to the page(s) in question
For a Specific page and using @media it would look like
@media (min-width: 767px) {
.page-id-xxx #secondary-widget-area {display:none;}
}April 30, 2022 at 20:35 UTC - Views: 18 #70698GR8FL
ParticipantOriginally I was asking how to hide the sidebar widgets on mobile, and then I asked how to do it for a particular page, and then I asked how to do it for more than one page. The answer you gave me was I could create a CSS rule such as:
.myhidebar #primary-widget-area {display:none;}
And then for every page I wanted to apply this rule, I would go into the Page editor > Xtreme Options > Xtreme Plus > per page added classes > Container box and add myhidebar.
Ran into issues because there is no place on posts to add this class. Or at least I don’t see it.
So I then decided to add just one item in the secondary widget and use that for mobile, and hence came up with the following 2 rules which would have the primary widget only displayed if size is greater than 767px (not mobile) and have the secondary widget only displayed if mobile.
@media (min-width: 767px) {#secondary-widget-area {display:none;}}
.is-mobile #primary-widget-area {display:none;}You are saying I can combine this into one rule instead of two:
@media (min-width: 767px) {
#secondary-widget-area {display:none;}
#primary-widget-area {display:none;}
}But that hides my primary widget on displays larger than 767px (like my desktop or tablet).
April 30, 2022 at 23:20 UTC - Views: 15 #70700scrambler
ModeratorFor single post page, in the xtreme options > Xtreme Plus TAB, there is a box for “Per Post body Class ” you can use to put the class
I did not know what you were doing with the @ media rule, so disregard my remarks.
I did forget to mention that the rule to hide the sidebar on mobile for pages with the class would be
.is-mobile.myhidebar #primary-widget-area {display:none;}
May 2, 2022 at 00:57 UTC - Views: 6 #70703GR8FL
ParticipantThank you.
-
AuthorPosts
- You must be logged in to reply to this topic.