Home Forums Weaver Xtreme Theme Hide Sidebar Widgets on Mobile

Topic Resolution: Answered
Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #70653
    Answered
    GR8FL
    Participant

    I am sure this can be done in CSS but I don’t know how. Currently, they are stacked under the content.

    Thanks.

     

    #70656
    scrambler
    Moderator

    Give us a link to your site to be sure of it

    #70660
    GR8FL
    Participant

    Weird that I never saw this reply. I hope this issue isn’t cropping up again.

    Here’s the site: https://sussexaa.org/

     

    #70681
    GR8FL
    Participant

    @Scrambler, do you know how to hide sidebar widgets on mobile?

    #70682
    scrambler
    Moderator

    Sorry, did not see your answer…

    .is-mobile #primary-widget-area {display:none;}

    #70685
    GR8FL
    Participant

    Thank you.

    Is it possible to apply the CSS on a per page basis? Maybe using the Page ID#?

     

    #70686
    scrambler
    Moderator

    Yes 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;}

    #70692
    GR8FL
    Participant

    If 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;}

     

    #70693
    Best Answer
    scrambler
    Moderator

    This 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;}

    #70694
    GR8FL
    Participant

    That is so awesome. Thank you.

    #70695
    GR8FL
    Participant

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

    #70696
    GR8FL
    Participant

    I 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;}

     

    #70697
    scrambler
    Moderator

    I 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;}

    }

    #70698
    GR8FL
    Participant

    Originally 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).

     

     

    #70700
    scrambler
    Moderator

    For 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;}

    #70703
    GR8FL
    Participant

    Thank you.

Viewing 16 posts - 1 through 16 (of 16 total)
  • You must be logged in to reply to this topic.