Docs

[Lumos]

How can I prevent the icon stack sidebar from disappearing(going from position:fixed to position:relative) until 1000px instead of 1200px?
I’ve tried changing the CSS through media queries but it gets tricky when the sidebar stays fixed but the content drops behind it. #help
http://ccbycorinnecampenio.com/iphone-cases-for-6-or-6s/

[Nico]

Hi There

Thanks for writing in.

Add the code below in the customizer > Custom CSS to activate the side til 1000px min width. Adjust the min 1000px to adjust where it will show or not. reduce it to decrease the size when it will disappear.

@media (min-width: 1000px)
.x-sidebar-content-active .x-sidebar {
    left: 0;
    border-right: 1px solid #dfdfdf;
    border-right: 1px solid rgba(0,0,0,0.075);
}
@media (min-width: 1000px)
.x-sidebar {
    position: fixed;
    top: 0;
    width: 250px;
    height: 100%;
    margin: 0;
    border-top: 0;
    z-index: 1031;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

Let u know it goes.

Thanks.

[Lumos]

Hey Nico,

That is the same approach I took although I ran into the problem where the div with the class=”x-main full” floats behind the sidebar and not against it. Please see screenshot attached.

[Friech]

Hi There,

Add this on your custom CSS on Customizer.

@media (min-width:  1000px) and (max-width: 1199px) {
	body .x-sidebar {width: 25%;}
	body .x-main.full,
	header.masthead,
	footer.x-colophon {
		width: 75%;
		margin-left: auto;
	}
}

Hope it helps, Cheers!

[Lumos]

Hi Friech,

Now the sidebar clears the main section and is below the content. See screenshot attached.

If I add this additional code,
body .x-main.full {
float: right;
}
body .x-sidebar {
position: fixed;
}

then the sidebar floats left but you cannot scroll through it. See second screenshot attached.

[Jade]

Hi there,

Please update this code:

body .x-sidebar {width: 25%;}

to

body .x-sidebar {
    width: 25%;
    position: fixed;
    left: 0;
    top: 0;
}

Hope this helps.

[Lumos]

That still does not make the sidebar scroll. Please see the page. It also shifts all non-sidebar pages.

http://ccbycorinnecampenio.com/fashion/

[Lely]

Hi There,

Please try this CSS instead:

.x-sidebar {
    overflow-y: scroll;
}
.x-sidebar .max.width {
   overflow: visible;
    position: static;
}

See this:http://screencast-o-matic.com/watch/cDjweejnJ1

Hope this helps.

[Lumos]

To be honest I may need a Themeco employee who can solve this properly. Thank you Nico, Friech, Jade and Lely for the help but we are trying to throw a whole bunch of CSS at this problem and it’s not working. By using this code that 4 people have given me, it is creating a new way the sidebar functions.

1. Why would we want two scrollbars on the page? That is just completely poor practice. http://screencast-o-matic.com/watch/cDjweejnJ1

2. Why would the right side of the page scroll when I am trying to scroll on the sidebar and vice versa.

3. I want this sidebar to function the way it was built in the Icon stack. Can we not just adjust value in the CSS so the responsive sidebar shifts from the side to bottom at 1000px instead of 1200px?

Thanks,
Chris

[Rad]

Hi there,

Please switch to Icon stack, that feature is only applicable for Icon stack and it uses NanoScroller library. It’s not just a simple CSS. And, Icon’s sidebar is a sidebar and not a fixed left navigation.

What you have is just a navigation place on the left, you can remove the scroll bar but it can never scroll independently from the content. It’s just a navigation.

Thanks!

[Lumos]

The first sentence to this entire thread says I am using the icon stack. “How can I prevent the icon stack sidebar from disappearing”……………………….

[Rad]

Hi there,

You said you want the sidebar the way it was on Icon stack. I assume you’re switching to another stack and want the icon’s sidebar. Though maybe I understand it a bit and I’ll explain why it’s no possible.

Icon sidebar uses a special library called NanoScroller, it’s configured to work on certain screen width. Hence, what you’re doing is not enough, just with CSS. If you will allow scrolling, it will then display scrollbars since it’s not covered by NanoScroller library anymore. What you need to do is configure NanoScroller to work on your preferred sizes, but the problem you can’t do that since it’s part of the core, and as intended feature.

You may contact a developer if you wish to customize it.

Thanks!

[Lumos]

Hey Rad,

No I have been using Icon and only want to use Icon. I love the NanoScroller that is used in Icon but unfortunately it collapses at 1200px and I was thinking of changing it from 1200px to 1000px.

Thanks,

Chris

[Paul R]

Hi Chris,

Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding. Take care!

[Author]

Posts