Displaying the sidebar above the content (small-screen mode)

  • I am looking for a stable, browser-friendly way of displaying the sidebar content above the content while the screen is smaller than 600px wide. Some background:

    I am using a child theme of Twenty-Twelve, with no major structural changes to the child theme. The goal is total stability during theme or WP updates, as this is a fairly major site. So far it has passed that test well. I mostly have widgets with custom code and a few custom page templates. I use one of these widgets to create an “internal” secondary menu in the sidebar, which shows a parent page back link, the current page highlighted, and all sibling pages.

    I use CSS to switch the sidebar to the left, and it shrinks to a certain degree nicely, until the theme switches to mobile mode, and drops the sidebar to the bottom. This would be fine for the other widgets I have, but the internal menu is pretty important for consistency of navigation, and I would like to keep it up top at a much-reduced size (perhaps spanning 100% of the width).

    Anyway, I think the problem, mark-up-wise, is that the content is called first, and it increases to 100% width in low-res mode (>600px). Is there a way around this with either CSS and/or child theme changes? I have searched and searched the support topics here and elsewhere, and the only nearly satisfactory answer I found was registering a secondary ‘sidebar’ below the header, which I might have to resort to solely for replacing the navigation widget. Does anybody know of other solutions?

    One more consideration: the navigation widget in question uses get_pages and is ID-dependent. It also calls up a custom field from all the sibling pages for adding subtitle descriptions. From my limited WP/loop understanding, I am not sure whether or not this poses a problem getting the sidebar before the page, if creating another sidebar first.
    Thanks in advance!

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hey. Would it be possible for you to create the effect you want with CSS Media Queries: https://css-tricks.com/css-media-queries/.

    Would you be able to provide a link to your site? This would allow the volunteers on these forums to more easily guide you with the exact CSS that is needed.

    Thread Starter A-minus

    (@a-minus)

    Hello Siobhan, thank you for your reply. It is actually the media queries that are creating the problem – I have several of my own implemented within the content, but the main issue is what Twenty-Twelve does with its own query: it enlarges the content to span 100% for mobile devices and narrow browsers. Structurally, the sidebar comes after the content, so when the main content stretches out, the sidebar (and my internal menu) goes to the bottom.

    Other than the fact that I switch the content and sidebar from left-right to right-left, there is nothing else that departs from the Twenty-Twelve theme, structurally. It’s like this:

    • wider than 600px, before my child CSS:
      [content][sidebar]
    • wider than 600px, after child CSS:
      [sidebar][content]
    • 600px or narrower:
      [content]
      [sidebar]

    The more I think about it, the more it seems like I should just register another sidebar that only shows up under the header when the screen is narrow, less than 600px. I could replicate the menu there.

    So, sorry for the roundabout way of asking this – I hope it’s still on topic, though: if I register another sidebar to show up before the content, is it a problem that the sidebar uses get_pages before the content is called?

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Displaying the sidebar above the content (small-screen mode)’ is closed to new replies.