Order of sidebar when responsive

Hello,

My current layout has asidebar on the left and content area on the right. however on mobile device, the sidebar sites below the content.

I need to have the sidebar at the top when responsive

Could you point me in the righ direction?

Thank you

Hi Alex,

Here is a code snippet that does just that:

add_action( 'wp', 'example_modify_layout' );
/**
 * Modify mobile layout.
 */
function example_modify_layout() {

 // Display left sidebar before content on mobile.
 if ( 'sp_c' === beans_get_layout() ) {
    // Move the sidebar HTML before primary content.
    beans_modify_action_hook( 'beans_sidebar_primary_template', 'beans_primary_before_markup' );

    // Remove push pull classes.
    beans_remove_attribute( 'beans_primary', 'class', 'uk-push-1-4' );
    beans_remove_attribute( 'beans_sidebar_primary', 'class', 'uk-pull-3-4' );
  }

}

Inline comments should be self-explanatory 😉 Let me know if anything is unclear.

Happy coding,

Hi, i've been trying to use this code to move my primary sidebar but nothing happens, is there anything I'm missing here?

is your layout indeed sp_c because it checks for that first before running the code.

sp_c means "Sidebar Primary, then Contents" or a 2-column layout. Have you perhaps set your layout to a different setting? Then you should probably edit that code:

sp_c_ss

c_sp_ss

sp_ss_c

all are possibilities. How's your layout built up for this particular page you want to change?

Hi thanks for the help.

I'm using "Sidebar Primary | Content | Sidebar Secondary" so I've already tried sp_c_ss but it still didn't work. This actually just made my main content slide under my primary left sidebar without resizing the browser at all, on mobile the primary sidebar still sits above the main content.

I've only just started learning Beans so it's probably something basic I'm missing.

I guess it's something to do with changing the "uk-push-1-4" & "uk-pull-3-4" classes?

For anyone interested I solved this issue. It was just a case of having the right layout and removing the correct push pull classes.

// Moves primary sidebar above content in responsive layout.
add_action( 'wp', 'example_modify_layout' );

function example_modify_layout() {

    // Display left sidebar before content on mobile.
    if ( 'sp_c_ss' === beans_get_layout() ) {
        // Move the sidebar HTML before primary content.
        beans_modify_action_hook( 'beans_sidebar_primary_template', 'beans_primary_before_markup' );
        beans_remove_attribute ( 'beans_primary', 'class', 'uk-push-1-5' );
   beans_remove_attribute ( 'beans_sidebar_primary', 'class', 'uk-pull-3-5' );
    }
}

I was wondering if for example I wanted to remove a sidebar at a certain browser width is there any way of doing this via beans or is it just a case of using css and media queries.

Hi,

I have a c_sp layout, when i try this code, targeting my layout, the sidebar moves over to the left instead of staying on the right of the content.

I've even tried to comment out the beans_remove_attribute lines.

Googling "beans_primary_before_markup c_sp" finds nothing.

Is it possible to pull the sp above c when it is on the right of the content?

All the best,
~ Rik