Change Main Sidebar breakpoint?

  • Resolved markcorder

    (@markcorder)


    9 years, 4 months ago

    Currently, my top-nav menu has a breakpoint of 1024 before it switches to the off-canvas menu, and I would like to have the main sidebar match this behavior. As it works now, you have to go all the way down to 640 before the main sidebar jumps under the main content and it becomes a single-column layout. I would like to change the breakpoint of this Main Sidebar (the only one I use) to match that of the top-nav menu (1024), or at least set it to break at 800.

    I know the style.css file in WP-Starter has a section for adding your own CSS for different media queries, but I’m wondering if a more simple and direct way wouldn’t be to make a copy of the sidebar.php file in my child theme’s folder and change the class assigned to it? By default, it’s this:

    <div id="secondary" class="medium-4 large-4 columns widget-area" role="complementary">

    If this is the way to go, how should I change the classes above to make the sidebar break at 1024 (which I’d be happy with), or at 800 (which I’d prefer!).

    MarkCorder.com

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author ThemeAWESOME

    (@tsquez)

    Hi Mark,

    Not really sure I understand what you are trying to do. So your trying to make your site stack on medium screens the way it does on say a smart phone? (i think this is what your trying to do right have one column for tablets on down)

    Yes, the sidebar default column structure is this:

    <div id="secondary" class="medium-4 large-4 columns widget-area" role="complementary">

    and yes you can change the class of the sidebar, however you would also need to change the class of the content area as well. You have to keep in mind that the column structure needs to equal 12. The sidebar class is set to 4 and the content structure is set to 8, this of course equals 12.

    For medium, I would say change it to 12 for both, i.e:

    <div id="content" class="medium-12 large-8 columns" role="main">

    <div id="secondary" class="medium-12 large-4 columns widget-area" role="complementary">

    you will have to change every instance of

    <div id="content" class="medium-8 large-8 columns" role="main">

    This is located in 8 files. You will have to copy all the files into your child theme to make the change.

    The files are:

    • archive.php
    • author.php
    • category.php
    • index.php
    • page.php
    • search.php
    • single.php
    • tag.php

    Hope this is what you were looking for and it helps

    Thread Starter markcorder

    (@markcorder)

    Thanks not only for your quick reply, but also the solution – that’s exactly what I wanted to do.

    I knew the content div would need to change too, but hadn’t looked for it yet – so thanks for the list! I was mostly wondering if you’d recommend this approach over trying to override it in the child’s CSS … or some other.

    I have a photoblog – and to my mind if you’re trying to look at photos & artwork on a screen smaller than a playing card, you’re doing it wrong. At least half of my traffic is coming from mobile devices these days, and WP-Forge / Foundation keeps it looking as good as it can even on really small screens – but with the large images I display on posts, keeping the sidebar there all the way down to 640 just squeezed things a little too tight.

    Thanks again for your quick reply and help – and keep up the great work with WP-Forge!

    Theme Author ThemeAWESOME

    (@tsquez)

    You are very welcome sir, glad I was able to help.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Change Main Sidebar breakpoint?’ is closed to new replies.