How To Move the Sidebar Above the Content On Your Website – Wordpress Genesis Example

“Content is King” on the internet. Except when it isn’t.

A client contacted me, and she had a pretty normal site, with the content on one side and a sidebar on the other. Her site had responsive code in it so that at device sizes smaller than the iPad, the page would re-organize itself so that the content would be above the sidebar, and both content and sidebar would fill the whole page width. This certainly makes sense for readability at small sizes, and content is emphasized (kings like that!).

Should I Say, “Content Below”, Or “Down Under”?

But she had a special reason to want the sidebar on top instead. Certain links there were important to her business, and she wanted them front and center for mobile users. I would normally brew up some PHP and CSS to make this happen. But then I took a look at her theme, which was coded in a pretty gnarly way. In order to make this happen less invasively, I decided to use a fancy CSS trick.

Doing It Under The Table

These Screw Tables are about to be moved by the developer man in the background.
These Screw Tables are about to be moved by the developer man in the background.

This assumes that your content and sidebar are both contained in a single DIV box (that’s necessary), and that content comes first (which certainly makes sense from an SEO perspective, too). In my example, #content-sidebar-wrap is the “box” that contains the #content and #sidebar areas. In the following example, I’m using code for a Genesis WordPress theme. I have also used a media query so that this only begins to happen at iPad portrait size, and will work at sizes below that.

@media only screen and (max-width: 1023px) {
    #content-sidebar-wrap {display:table;}
    #content {display:table-footer-group; float: none;}
    #sidebar {display:table-header-group; float: none;}
}

In this example, I’m doing exactly the same thing for Genesis 2.0 when HTML5 is enabled, which has a slightly different HTML structure, classes here instead of ID’s:

@media only screen and (max-width: 1023px) {
    .content-sidebar-wrap {display:table;}
    .content {display:table-footer-group; float: none;}
    .sidebar {display:table-header-group; float: none;}
}

And here’s the same thing without any media queries, just in case you wanted this to happen at all browser sizes, not just smaller device sizes:

#content-sidebar-wrap {display:table;}
#content {display:table-footer-group; float: none;}
#sidebar {display:table-header-group; float: none;}

DIV Reassignment Surgery

If you’re using another WordPress theme, or even if you’re not using WordPress at all, you would just need to change the names to match your HTML structure, and you may need a few more CSS tweaks, depending on your site code. For instance, if you’re going to stack these DIV’s on top of each other, you’ll usually want their widths to be 100% or so.

Since HTML tables can be extremely annoying, it’s great to have some of their characteristics be a force for good!

It is intriguing what people ask for. Often the reason for asking for this has to do with ads. I often work on sites with ads, and a few discreet ones aren’t bad. But sometimes they’ll have so many that it’s really annoying, and I diplomatically warn them about this. The problem is that many of them are basing all their revenue on ads, and when that’s the case, they turn down my suggestions.

On another topic, I’d like to hear an SEO geek weigh in on my scheme above from their perspective. That’s because if someone truly wants their sidebar content to be most important in Google, my procedure won’t do that, even though it appears more important by visually being at the top. My guess: a little ding on the content optimization, but not too bad.

Finally, if you really do need to have the actual sidebar HTML code appear before the content HTML code, hire me and I’ll set that up for you.

While you’re at it, check out a nice Genesis child theme!

(an affiliate link)

35 Comments


  1. Hey Dave,

    That’s really cool…never thought about it before! It’s great to be able to get so creative with CSS.

    Way to convert the evil tables to the force of good 😉

    Reply

  2. Thanks, My Friend!
    I use fewer hacks now that I have some chops, but this one’s a beauty, IMO…good clean filth – without utensils! (Naked Gun reference!)

    Although I inveigh against tables possibly even more than the next guy, they can be nicely styled, and sometimes, just sometimes, they actually are the thing to use, like in, well, severely tabular data. 🙂

    Dave

    Reply

  3. Hello Dave, I’m trying to convert my html website http://www.ontwerperij.nl to a responsive website and i came across the same problem.

    When i look in my style.css (Genesis sample theme 2.1.2) i find the following:

    /* ## Column Widths and Positions
    ——————————————— */

    /* ### Wrapping div for .content and .sidebar-primary */

    .content-sidebar-sidebar .content-sidebar-wrap,
    .sidebar-content-sidebar .content-sidebar-wrap,
    .sidebar-sidebar-content .content-sidebar-wrap {
    width: 980px;
    }

    .content-sidebar-sidebar .content-sidebar-wrap {
    float: left;
    }

    .sidebar-content-sidebar .content-sidebar-wrap,
    .sidebar-sidebar-content .content-sidebar-wrap {
    float: right;
    }

    /* ### Content */

    .content {
    float: right;
    width: 800px;
    }

    .content-sidebar .content,
    .content-sidebar-sidebar .content,
    .sidebar-content-sidebar .content {
    float: left;
    }

    .content-sidebar-sidebar .content,
    .sidebar-content-sidebar .content,
    .sidebar-sidebar-content .content {
    width: 580px;
    }

    .full-width-content .content {
    width: 100%;
    }

    /* ### Primary Sidebar */

    .sidebar-primary {
    float: right;
    width: 360px;
    }

    .sidebar-content .sidebar-primary,
    .sidebar-sidebar-content .sidebar-primary {
    float: left;
    }

    /* ### Secondary Sidebar */

    .sidebar-secondary {
    float: left;
    width: 180px;
    }

    .content-sidebar-sidebar .sidebar-secondary {
    float: right;
    }

    Would you be so kind and tell me where to replace what or where to add your code to make the sidebar appear above the content.

    Thank you so much
    Roger

    Reply

  4. Hallo, Roger!
    I think you trust my psychic ability, as I can’t see your new test site. 😉 I’m also not sure exactly what you want – if you want the sidebar above the content all the time, you can use the code from the 2nd example above, but with no media query. You should probably also put it at the very bottom of your CSS so that your other commands won’t override it. For instance, if you don’t do that, those DIV’s may still float. You could try this:

    .content-sidebar-wrap {display:table;}
    .content {display:table-footer-group; float: none;}
    .sidebar {display:table-header-group; float: none;}

    But if you don’t want this all the time (very likely, I think), just use the 2nd command above, but again, make sure it’s at the bottom of the CSS, and you’ll need to decide what screen size you want that to happen to choose the right media query size.

    Good luck,
    Dave

    Reply

  5. hi dave,

    this is *just* what im trying to do, with two exceptions. i’d like to achieve this effect in only one section of my site, and im trying to do the opposite of what you were going for. on smaller screens i’d like the content to appear above the sidebar in a sidebar-content layout.

    the section im working on is for a calendar, and the client wants people to see the calendar before all the information in the sidebar. could this technique work for that?

    many thanks,
    emily

    Reply

  6. Emily,
    Yes, that could certainly work. Since you have ID’s instead of classes, you’d use the first method above (even though your site is HTML5).

    To have it happen in just one section you can add the class on BODY to your commands to make the change specific to one section.

    Dave

    Reply

    1. dave– it worked *brilliantly* thanks ever so much!

      you hit the nail on the head with classes vs IDs. working with genesis 2 i know that im using html 5 so i’m curious to know why the IDs work and not the classes?

      still learning the ropes of genesis (and even wordpress for that matter).

      emily

      Reply

  7. Emily,
    Great, glad to hear it! btw, your gravatar icon is very cute!

    To answer your question, I think you’re specifically wondering why an HTML5 theme would have ID’s, right? It’s possible to code a theme so that it’s using ID’s or classes. Maybe you have a mixture of old and new parts. 🙂

    There are fewer ID’s in most HTML5 themes, and this is due to its structure. Without getting too into it, an example would be a HEADER HTML tag, and there would be only one. Then you don’t need an ID to indicate a header. Also, you have a lot of repeating structures, like ARTICLE, so you could use one class to style all of them, whereas an ID has to be unique. There’s way more to it, but that’s the basic idea.

    It looks like you have Dynamik running there. Gosh, I have to assume that the latest version of that uses HTML5 and mostly classes, but maybe you have an older version. Your theme has the expected HEADER HTML tag, but the content area has loads of ID’s! Remarkable.

    I also see that the good old Tribe calendar is using a lot of ID’s – some plugins may use more ID’s than classes – sort of lagging behind.

    Best, Dave

    Reply

    1. hay dave, this is really good to know, thanks so much for the run-down. you’re right about the tribe events calendar using id’s, that’s the culprit for sure. admittedly i’ve been trying to figure out when to use a class and when to use an ID, and you’ve given me a nice bump in the right direction.

      thanks!
      emily

      (and ps, happy to know you like that illustration!)

      Reply

  8. Emily,
    Very cool! New themes to be all HTML5 equipped, and everything else is slowly transitioning.

    Tribe’s calendar is awesome, yet I don’t care much for plugins that automagically make posts or pages. As it happens, their plugin used the same name as a page I had, so there was a permalinks conflict I had to fix by manually editing the database – not too much fun, and a non-geek would have no idea how to fix that. It’s features were really nice, though.

    In the meantime, if you have an ID, just make sure it’s unique, but you probably knew that!

    Ciao, Dave

    Reply

  9. Hi Dave

    You are the only person in the world after 3 weeks of constant googling who has come close to nailing this positioning of the sidebar on top of content on mobile. I have used your above code on my site but its just not quite adjusting correct for portrait view on mobile? The sidebar is sitting on top of content on mobile but just missing something to make it look right on portrait view

    Please help would be great as my business needs this too!

    Thank you
    Guy

    Reply

    1. I ended up working on Guy’s sites, and they illustrated how this can be difficult in some contexts.

      He has the super-popular yet very complicated Avada theme. Its many hipster features, such as the hamburger responsive menu and the very tricky CSS, required quite a bit of extra work as well as my changes above.

      I’ve worked on Avada a bunch of times now for various people. Its gigantic feature selection delights its users, but as always with that much code, it makes any significant changes harder for a developer, not easier.

      Sometimes a geek is required. 😉

      Dave

      Reply

  10. Dang! Awesome little trick, it worked perfectly for the WP site I am working on. This will come in handy again – thanks a lot!

    Reply

    1. Bev,
      You’re welcome, glad to hear it!

      Dave

      Reply

  11. Thanks Dave, exactly what I was looking for.
    From my limited SEO knowledge, I wouldn’t worry about the effect of this on SEO. The content will still appear in the same place within the page’s source, it’ll just be displayed differently on mobile so I doubt it’d have any effect on SEO.

    Cheers,

    Dirk

    Reply

    1. Dirk,
      That’s great, and thanks for the SEO thoughts!

      It seems like more and more people are moving their sidebars with this lately. The sidebars are striving to get attention! 🙂

      Dave

      Reply

  12. Hi Dave,

    Oh this is so close to what I’ve been wrestling with! I am using News Pro with Genesis. I have setup my home page with a layout of 3 columns:
    – content on the left
    – sidebar 2 in the middle
    – sidebar 1 on the right

    Using your code, I wasn’t able to move any of the items vertically. But at least – trying a lot of settings – I was able to finally force each element to display full-width when in mobile view (portrait), something I wasn’t able to do before.

    Now, I would love to be able to move things so that in mobile view, I have vertically:
    – sidebar 1
    – sidebar2
    – content

    Would you know how to achieve this? I’m sorry if I couldn’t figure it out with the help of your instructions…

    Here is my site: http://vi-control.net/portal/

    Regards,

    Andre

    Reply

    1. Andre,
      That’s not feasible with this CSS hack. Your HTML fights it, as the secondary sidebar is completely outside the container of the other two. That’s one of the reasons I strongly dislike 3 column layouts. 🙂

      So programming is needed. If your CSS skills are excellent, you could play with CSS using absolute positioning – there’s a chance that it could be done that way, but it would be lots of work, and even more hackish than my approach above.

      It would probably be easier to just to code this in PHP. And write more CSS to get that to happen. Either way, it’s quite a bit of work, and more than I can cover here, sorry.

      Dave

      Reply

      1. Hi Dave,

        I was reading your reply again and wondered – what if I changed the theme I’m using? What specific feature would I make sure the theme is providing?

        Cheers,

        Andre

        Reply

        1. Andre,
          Wow, you must really want that to happen. 🙂 The only no-brainer idea I have is to change to a Genesis theme, but that’s pretty drastic, as it won’t look anything like your current site.

          Short of that, I know it’s probably a horrifying idea, but hiring a skilled developer who can understand the general concept would be a way of making this happen, whether it’s me or someone else. 😉

          Dave

          Reply

          1. I’m using Genesis and the New Pro child-theme. I created a new layout using one of Brad Dalton’s layout snippet.

            I cloned the site yesterday night, and installed the original News Pro, thinking maybe I can use the middle-left and middle-right columns along with the sidebar to get what I want. Too ambitious? 🙂

            Where can I contact you to get further info re: fees, schedule, etc.?

            Regards,

            Andre


          2. Ah, that’s right, you have that 3-column thing. If you’d like more info and would me to look into it, just contact me from the site. 🙂

            Ciao,
            Dave


  13. Umm wow, I just substituted the css selectors in the very first example for the ones in my theme and it just worked. You saved me a ton of time. Thank you!

    Reply

    1. Bodhi, Glad to hear it! A whole lot of people are reading this and doing it. It seems to be becoming a “thing”, these Over-Achieving Sidebars! 😉

      Dave

      Reply

  14. Hi Dave,

    I thought it would be a lot of work when a client contacted me with this question, but you found a way, with clean and ‘simple’ css! Thanks so much! Sometimes solutions can be as easy as adding three lines of css.

    Best wishes,

    Jack

    Reply

    1. Jack, That’s great, and you’re welcome.

      It is, in fact, some work to do this with PHP, but it’s not too big a job.
      If someone wanted the sidebar content to appear first in the actual HTML rather than just visually like the above solution, I would recommend having the PHP fix. The reason would be for getting the sidebar stuff first for SEO.

      Dave

      Reply

  15. Hi Dave,

    Thanks for the tip! I tried applying it to my website and it did manage to rearrange the sidebar and the content.

    However, when I click on a Permalink Page, the content and sidebar don’t scale down beyond a certain width.

    Any idea how I can fix this?

    Reply

    1. Mark, I’m glad the general idea helped you. I’m afraid I can’t even begin to answer that if I can’t see your site. I can give you a very general answer – on any design, additional coding may be needed to make the site work responsively at multiple screen sizes, so you may need to get professional help to finish the job.

      Dave

      Reply

      1. Hi Dave, I’ve managed to resolve the issue, but thanks for getting back to me in any case!

        Reply

  16. You absolutely rock!!! Thank you for this very easy to implement solution 🙂

    Reply

  17. Used this and it worked like a charm. Thanks for sharing!

    Reply

    1. Ben, That’s very cool, glad it was helpful!

      Dave

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *