Docs

[borinqen]

Hello:
I had a previous thread in reference to this issue, however, it’s not resolved. I have been attempting to add sidebars to the pages on my new site without results. I have used X in the past and I know how to add the sidebars and it has never been an issue, however, now I am using the Icon Stack 8 and I seem to be having issues. I have followed all instructions from previous thread on changing the settings in customizer (which I have), then making sure that the pages for where the sidebars are are set to default template(which I have), I added the sidebar and the text widget to the main sidebar and still they are not showing for me. The previous representative said he could see it and it was working but I see now sidebar on my end. I have cleared the cache, opened up a new browser and still nothing. See below, Tks!

http://screencast.com/t/GB5aCnZ4I

[borinqen]

This reply has been marked as private.

[Joao]

Hi There,

I have tested your page on Chrome and Firefox and it is working.

I have changed the status from draft to published.

Please kindly click on the link below.

http://50.87.144.14/~thebluffs/index.php/sidebar-test/

If you cannot see a sidebar please provide us a screenshot and describe if you are using PC or MAC and which browser.

I have attached a picture of how your page looks on my end.

Thanks

Joao

[borinqen]

I am working on a Windows 10 PC. I have noticed that if I zoom OUT on the screen to about 67% then I can see the sidebars below…

http://screencast.com/t/MzSzcgxARO

However, if I have my screen to 100% resolution, like I usually do then I cannot see the sidebars which is apparently the problem. This is what I see

http://screencast.com/t/efc9b7hz6

How is this going to work? I cannot tell the clients to zoom out in order to see the site correctly.

[Rue Nel]

Hello There,

The sidebar will be displayed at the bottom of your page once the screen resolution is lower than 1200 pixels.Most of the commonly available laptop screens are 1366×768. What is the screen resolution in your laptop screen? If ever you want to change the settings from 1200px to something lower like 980px, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media (min-width: 980px) {
    .x-sidebar {
        width: 250px;
    }

    body.x-sidebar-content-active,
    body[class*="page-template-template-blank"].x-sidebar-content-active.x-blank-template-sidebar-active {
        padding-left: 250px;
    }

    body.x-content-sidebar-active,
    body[class*="page-template-template-blank"].x-content-sidebar-active.x-blank-template-sidebar-active {
        padding-right: 250px;
    }

    body.x-sidebar-content-active .x-widgetbar,
    body.x-sidebar-content-active .x-navbar-fixed-top,
    body[class*="page-template-template-blank"].x-sidebar-content-active.x-blank-template-sidebar-active .x-widgetbar,
    body[class*="page-template-template-blank"].x-sidebar-content-active.x-blank-template-sidebar-active .x-navbar-fixed-top {
        left: 250px;
    }

    body.x-content-sidebar-active .x-widgetbar,
    body.x-content-sidebar-active .x-navbar-fixed-top,
    body[class*="page-template-template-blank"].x-content-sidebar-active.x-blank-template-sidebar-active .x-widgetbar,
    body[class*="page-template-template-blank"].x-content-sidebar-active.x-blank-template-sidebar-active .x-navbar-fixed-top {
        right: 250px;
    }
}

And then you also need to add the following JS code in the customizer, Appearance > Customize > Custom > Javascript

jQuery(document).ready(function($) {

  var $body    = $('body');
  var $sidebar = $('.x-sidebar');

  enquire.register("screen and (min-width: 980px)", function() {
    if ( ! $body.hasClass('x-full-width-active') ) {
      $sidebar.find('.max.width').addClass('nano-content');
      $sidebar.find('.max.width').removeClass('x-container');
      $('.nano').nanoScroller({
        contentClass         : 'nano-content',
        preventPageScrolling : true
      });
    }
  });

  enquire.register("screen and (max-width: 979px)", function() {
    if ( ! $body.hasClass('x-full-width-active') ) {
      $sidebar.find('.max.width').addClass('x-container');
      $('.nano-content').removeClass('nano-content');
    }
  });

  if ( $body.hasClass('x-full-width-active') ) {
    $sidebar.find('.max.width').addClass('x-container');
  }

});

Please let us know if this works out for you.

[borinqen]

I thought the site was responsive. Is this going to be an issue for our clients if their PC’s are not set to that resolution? I am working with a PC not a laptop and I had to change my resolution in order to view it.

[Paul R]

Hi,

It’s one of the responsive feature where the sidebar is displayed below when the screen gets smaller.

That is so to make the content area bigger and easier to read on smaller screens.

You can adjust the width for when the sidebar wrap using the code provided above.

Thanks

[Author]

Posts