Sidebar responsiveness and placement Options?

[cctravis]

I have now figured out how to set my different headers and nav menus based on screen size using this (https://www.dropbox.com/s/7k7aml9k36hsskl/PRO%20HEADER%20VISIBILITY.mp4?dl=0)

What I am trying to figure out now is how to adjust my sidebars based on screen size.

If you look at my site http://blockchaindevelopers.cctravis.com/ on a big screen 1200px+ you will see the sidebar with my posts in it on the right, but on any smaller screen below 1200px that sidebar moved to the bottom of the page. Where do I find the settings to adjust how, when and where this sidebar adjusts to based on screen size.

Also Ideally I would like the sidebar to start BELOW my header and menus but currently on 1200px+ screens my sidebar starts side by side my header and menus which throws off the formatting badly.

So if anyone can advise on these 2 issues it would be a great help.

1. How to adjust the responsiveness of the sidebar based on screen size?
2. How to make the sidebar begin below my header and menus not side by side with them.

thanks

[Alaa]

Hi @cctravis

Thanks for writing in!

For the second question, that’s something built in the design structure of Icon Stack, I suggest using either Renew or Integrity stack, as Ethos stack has a similar design. You can change the stacks from (Pro > Theme Options > Stack).

Regarding the first question, let’s say you want to change this breakpoint to 1000px, then you should add this CSS code to (Pro > Theme Options > CSS):

@media (min-width: 1000px){
    .x-content-sidebar-active .x-sidebar {
        right: 0;
        border-left: 1px solid #dfdfdf;
        border-left: 1px solid rgba(0,0,0,0.075);
    }
}

@media (min-width: 1000px){
    .x-sidebar {
        width: 300px;
    }
}
@media (min-width: 1000px){
    .x-sidebar {
        position: fixed;
        top: 0;
        height: 100%;
        margin: 0;
        border-top: 0;
        z-index: 1031;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

Also, you will need to change the body padding value, I mean adding this code as well:

@media (min-width: 1000px){
    body.x-content-sidebar-active, body[class*="page-template-template-blank"].x-content-sidebar-active.x-blank-template-sidebar-active {
        padding-right: 250px;
    }
}

Thanks.

[iamelisabethparker]

I’m having the same problem and the above code is NOT working. My site’s at http://elisabethparker.com/ Only I’m going to have to change it back as I can’t just leave my site like this.

I’ve even installed an AMP plugin and that damned sidebar STILL keeps appearing on the right side in mobile and squeezing all my content.

[ruenel]

Hi Elisabeth,

Thanks for updating this thread. Regretfully the code will not work for your site because you are using Icon stack and the code given is only specific to the user’s site which is renew.

Please understand that the sidebar in Icon stack is a fixed sidebar which has been designed specifically on purpose just for this stack alone.

Thanks for your understanding.

[iamelisabethparker]

Can I at least make it responsive so it does NOT show up on mobile, please? And can you please tell me why anyone in their right mind would create a theme with a fixed sidebar?

[ruenel]

Hey There,

To hide the sidebar in smaller screens, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media(max-width: 979px){
  .x-sidebar {
    display: none;
  }
}

Like we’ve said before, we have designed the sidebar of the Icon stack to be as fixed sidebar just like it is shown here: http://demo.theme.co/icon-1/

Hope this helps.