Changing the Stacking Order of Sidebars in Responsive Mode

Community Forums Forums General Discussion Changing the Stacking Order of Sidebars in Responsive Mode

This topic is: not resolved

This topic contains 3 replies, has 2 voices, and was last updated by  David Chu 10 months, 3 weeks ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #77299

    JohnP
    Member
    Post count: 15

    Is there a way to change the stacking order of the primary and secondary sidebars when they move from their left and right positions to their stacked, above and below positions when the screen size is made smaller?

    Just to clarify, in a sidebar-content-sidebar configuration, the sidebar on the right (the primary sidebar by default) gets stacked on top of the secondary sidebar (the one on the left). Is there a way to change this stacking order?

    #77383

    David Chu
    Participant
    Post count: 1373

    Hi,
    Interesting question. I wrote an article related to this. Its purpose was a trick for getting the Primary Sidebar above Content at responsive size. (even though I wouldn’t always recommend that from a usability perspective – usually the Content should be king, so to speak!)

    http://davidchu.net/blog/move-sidebar-content-website-wordpress-genesis/

    Your question is complicated, because the Secondary sidebar is not in the same HTML container as Content and Primary. So no easy trick.

    Adapting my code in the article, I moved the Secondary Sidebar above Content and then Primary, but I don’t think that’s exactly what you were looking for. And this code is for Genesis 2 – it could easily be adapted for Genesis 1.

    [css]
    media only screen and (max-width: 1023px) {
    .site-inner {display:table;}
    .site-inner .content-sidebar-wrap {display:table-footer-group; float: none;}
    .site-inner .sidebar-secondary {display:table-header-group; float: none;}
    }
    [/css]

    (I took off the at-sign before the media line above because bbPress barfs on that)

    A bunch more coding and experimenation would possibly yield what you’re describing. Might not be worth that much grief. One reason why I’m not always all that keen on 3 column designs. :-)

    Cheers, Dave


    Dave Chu · Custom WordPress Developer – likes collaborating with Designers

    #77513

    JohnP
    Member
    Post count: 15

    Thank you, Dave – a thorough response! Your “might not be worth that much grief” sold me :)

    #77543

    David Chu
    Participant
    Post count: 1373

    Sounds great, John.
    It’s an interesting topic to me, that’s why I elaborated a lot.

    The whole “table hack” thing is nice, because it’s much easier to do than handling it all with custom PHP programming, or something radical like jQuery. In fact, it doesn’t even harm SEO, as in the HTML, content is still first! :-) When I first used that hack, it was somebody sticking their sidebar ads above content – I suggested to them that it might be perceived as cheesy, but they were undeterred, as people often are.

    And yes, sometimes jumping through 20 hoops to do something may not be the best course. :-)

    Dave


    Dave Chu · Custom WordPress Developer – likes collaborating with Designers

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

You must be logged in to reply to this topic.