Move Sidebar above main content in mobile view

Support
#1

Hi Theme Co,

I would like to move the sidebar above the main content area in the mobile view for my site. I am using Integrity and the sidebar is on the right side.

I have tried this thread: https://theme.co/apex/forum/t/move-sidebars-above-content-on-mobile-view/15374

However, this solution does not work for me. Can you help?

Thanks,
Amanda

#2

Hi Amanda,

Please note that the code from that link will only work on your blog and archives page.

Can you provide us your site url so we can take a closer look.

Thanks

#3

Hi Paul,

I’ll add the information in a secure note as it’s currently under development.

Thanks,
Amanda

#4

Hi Amanda,

Please let us know when you got the login details. As I still can’t find any when I checked the thread.

Thank you.

#5

They are now above. Thanks!

#6

Hi There,

Add the following Javascript code into your Theme Options > Global Javascript area and should work.

if (jQuery(window).width() < 979) {
   jQuery( ".x-sidebar.right" ).insertBefore( ".x-main.left" );
}

Hope that helps.

#7

Thank you for the direction.

However, I do not see this option in the admin. Attached is a screenshot of Theme Options as I see it. Can I add this to my functions.php file?

Thanks,
Amanda

#8

Hi There,

Please refer to the following screenshot (https://i.snag.gy/TOs83F.jpg).

Hope that helps.

#9

Hi There,

Thank you for the directions. I applied this (and made sure it saved), but the sidebar still sits below the main content area in the mobile view.

Thanks,
Amanda

#10

Hi Amanda,

Try to clear your browser cache.

This is how it looks on my end.

#11

Hi Paul,

I don’t mean to be thick here; however, after clearing my cache and using a private browsing window, and using a different browser I don’t see this.

Thanks,
Amanda

#12

Hi Amanda,

How are you testing it? By resizing your browser or actual device?

The code provided above will only work on load so it will work on the actual device.

If you also want it to take effect on window resize, plesae change the js code to this.

jQuery(function($) {
$(window).on("resize", function () {
    if ($(window).width() < 979) {
        $( ".x-sidebar.right" ).insertBefore( ".x-main.left" );
    }
}).resize();
});

Hope that helps.

#13

Thank you! Worked.

#14

You’re welcome, Amanda.

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.