Home Forums Weaver Xtreme Theme Do Not Show Sidebar But Do show Mobile Menu on Tablets

Topic Resolution: Resolved

This topic contains 6 replies, has 2 voices, and was last updated by  otaku 4 months, 1 week ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #49041

    otaku
    Participant

    On my site at https://prime-tshirts.com I need to hide the sidebar on tablets and display the mobile menu instead – just as it does on smaller devices.

    I’ve scoured the settings and can’t find the right ones.

     

    #49042

    scrambler
    Moderator

    You can make the primary or secondary menu bar appear on mobile by setting a custom menu as the primary menu, then hide it on desktop by using “Hide on desktop” in the hide option in Main options > Menus > Primary/secondary menu bar section.

    You can hide your menu on mobile by putting it in a [hide_if device=mobile] shortcode as explained in the Add-Ons page

    #49043

    otaku
    Participant

    I already am doing that with my primary menu my real malfunction is the sidebar on tablets. I don’t see the sidebar in the css/layout.

    I can hide the primary-widget-area on tablets but sidebar remains.

    #49044

    scrambler
    Moderator

    If all that is in the sidebar is the primary widget area and you hide that on mobile, there would be nothing left in the sidebar, so nothing would show, so I dont understand what you mean by the sidebar remains.

    Why dont you do that and post back to illustrate what you mean.

    #49045

    otaku
    Participant

    Perhaps a better way to ask my question is this –

    At 768px the content switches to 100% with the sidebar (primary-widget-area) at the bottom of the content with my primary menu bar at the top of the screen.

    What I need is for the exact same behavior but instead of it occurring at 768px I need it to occur at 1024px.

    Possible?

    #49047

    scrambler
    Moderator

    There is no easy way to change the threshold when the theme switches everything to mobile.
    The only available option for people who have the “plus” plugin, is the possibility to change when the regular menu bar turns into a slide open mobile menu.

    To hide things based on the width of the browser, you can use @media rules like the one below that will hide the primary menu bar on browser wider than 1024px.
    They must be placed in the Global Theme Custom CSS Rule box.

    @media all and (min-width:1024px) {
    #nav-primary {display:none;}
    }

    But hiding the sidebar that way is trickier because you not only have to hide the sidebar but also re expand the content area.
    The rules below will hide the curent right sidebar and expand content below 1024px, but any changes in the various option will likely render the rules invalid.

    @media all and (max-width:1023px){
    #primary-widget-area {display:none;}
    .l-content-rsb {width:100% !important;}
    }

    #49049

    otaku
    Participant

    Thank You!

    I decided to go with a primary menu fixed to the the top.

    I really appreciate you helping me!

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.