Fixed sidebar - issues with mobile

[adg82]

hi there,

my issue concerns the visualisation on MOBILE devices of these pages:

http://obbligazioni.io/blog/

http://obbligazioni.io/glossario/

http://obbligazioni.io/2017/07/07/nuove-emissioni-8/

I managed to implement “Left Content and Right Sidebar” setup on blog posts, posts index and few pages.

I was also able to “block” the sidebar with this code:

body .x-sidebar.right {
   margin-left: 21.536945%;
   top: 140px;
   position: fixed;
   left: 50%;
}

I was also able to have the same sidebar I have on the Blog Index on each Blog Post by adding this to the function.php file on the CHILD theme.

add_filter( 'ups_sidebar', 'x_force_sidebar', 9999 );

function x_force_sidebar ( $default_sidebar ) {

  $sidebars = get_option( 'ups_sidebars' );

  foreach ( $sidebars as $id => $sidebar ) {
    if (  is_singular('post') ) {
      if ( array_key_exists( 'index-blog', $sidebar ) && $sidebar['index-blog'] == 'on' ) {
        return $id;
      }
    }
  }

  return $default_sidebar;

}

it’s all pretty cool on the DESKTOP but it should be better on the MOBILE visualisation.
if you take a look you’ll see that the SEARCH bar has a pretty much random position on the screen AND the sidebar displays just halfway on the right side.

can you please tell me how to manage this, by either taking completely off the sidebar on mobile visualisation or else?

thanks

[ruenel]

Hello There,

Thanks for writing in! The sidebar should only be fixed on desktop screens. To resolve your issue, please have your custom css updated and make use of this code instead:

@media(min-width: 980px){  
  body .x-sidebar.right {
     margin-left: 21.536945%;
     top: 140px;
     position: fixed;
     left: 50%;
  }
}

Hope this helps. Please let us know how it goes.