How can I make sidebar display above content when responsive

Community Forums Forums General Discussion How can I make sidebar display above content when responsive

This topic is: not resolved

This topic contains 2 replies, has 2 voices, and was last updated by  John Hillcoat 1 year, 5 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #39031

    John Hillcoat
    Participant
    Post count: 4

    Hi,

    I have a vertical menu in my primary sidebar. It would be useful to have this display above the content when people view the site on, say, a mobile phone. Can anyone help me with some code that will achieve this?

    Thanks,

    John

    #39163

    David Chu
    Participant
    Post count: 1371

    Hi,
    I had the opposite problem when using a non-Genesis theme recently…. I wanted the sidebar below content. I found a very nice trick. It’s a hack, but a very pretty one, IMO. I’ll show you some code and you can take it from there. It goes old-school. :-)

    In this example, we have a wrapper DIV that holds 2 DIV’s. Inside the wrapper, first is content, and then sidebar. We want the sidebar above content instead. So first we make the wrapper into a “table”. Then we make the sidebar be the “table header”, and make the content the “table footer”.

    [css]
    #wrapper {display:table;}
    #content {display:table-footer-group; float: none;}
    #sidebar {display:table-header-group; float: none;}
    [/css]

    Finally, a media query is used to enclose the above code so that this only happens down below a certain size. I tried sticking media query code here but it died because this forum doesn’t tolerate the at-sign, so I took it out.

    There are other methods, but this one is pretty quick and clean(-ish). :-)
    Hope that helps, Dave


    Dave Chu · Custom WordPress Developer – likes collaborating with Designers

    • This reply was modified 1 year, 5 months ago by  David Chu. Reason: I removed the media query code
    • This reply was modified 1 year, 5 months ago by  David Chu. Reason: I removed the media query code
    #39171

    John Hillcoat
    Participant
    Post count: 4

    Thanks Dave. I’ll give this a try.

    Cheers,

    John

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

You must be logged in to reply to this topic.