Left sidebar or off-canvas-left?

Asked on February 5, 2016 in Development.

Despite any discussion of why to avoid sidebars ūüėČ – I need my (off-canvas-) sidebar on the left side.

Isn’t there a setting for that in Layers? In the css I found some references to ‘off-canvas-left’, but I can’t seem to find any¬†place where it is used for pages. Any other references refer to ‘off-canvas-right’…

Do I need to create a child-theme just for this?

Any other ideas?

And while we’re at it: How would I create 2 sidebars (left AND right)?

btw: I can’t add tags to my questions, that’s why there are no tags ūüėČ

tiptronic Power User
Reply
  • Possible Answers to Your Question:

  • 1 Answer(s)
    Answered on February 8, 2016.

    Hi there,
    Since the off canvas sidebar is only displayed on mobiles by default, there is only one position (Right) as that is the standard layout for mobile menu toggles on non RTL sites.  To move the toggle to the left of the logo with CSS only, you can do something like this:

    
    .responsive-nav{
    
    position: absolute;
    
    top: 5px;
    
    left: 5px;
    
    }
    
    @media only screen and (max-width: 600px){
    
    .logo{margin-left: 60px;}
    
    }
    
    

    To change the orientation of the sidebar itself, I recommend this CSS technique:
    http://docs.layerswp.com/doc/how-to-restyle-the-mobile-sidebar-into-an-overlay-dropdown/


    You cannot have two off-canvas sidebars without a child theme. You would need to duplicate the off-canvas markup in the sidebar-off-canvas.php and edit it to support left classes (ie off-canvas-left), then add your custom left toggle to header-standard.php just above the closing nav tag. Example:

    <a href="" class="responsive-nav-left" data-toggle="#off-canvas-left" data-toggle-class="open">
    
    <span class="l-menu"></span>
    
    </a>
    
    

    Thx!
    I am using the CSS-technique already, because
    – I wanted to be able to use the sidebar on desktop as well
    – I¬†didn’t like the css scale-effect to bring up the sidebar
    – and I wanted to move the wrapper-site together with the sidebar (which works – more or less).

    Before anybody asks: I prefer having a single fully responsive site with nicer navigation on mobile and the ability to e.g. add a separate utility area at the right (e.g. chat like Facebook messages, Twitter-feeds or anything else).

    on February 8, 2016.
    Reply