[lexidevParticipant]

This seems to be cropping up. Am using ICON stack full-width with right sidebar. The sidebar only scrolls with the mouse wheel. Not obvious enough for the average user or those who don’t have a mouse with scroll wheel. I used suggestions of previous posts. I.e. using an icon for scrolling:

body aside.x-sidebar.nano.has-scrollbar:after {
  right: 20px;
  content: "\f078";
  position: absolute;
  bottom: 10px;
  font-family: "FontAwesome";
  border: 1px solid #000;
  padding: 2px 6px;
  border-radius: 15px;
}

The icon appears but the sidebar doesn’t scroll.

With this code:

body .x-sidebar {
    overflow-y: scroll !important;
}

The room for the scroll bar appears beside the window scroll bar, but there is no actual scroll bar to scroll with.
I need a solution for this and have not found one in the forum yet.
Here is the development site: http://temp.iwillhelp.ca/
WP version: 4.3.1, X-Theme version: 4.1.1
Please advise soon.

ALSO, just noticed that the sidebar is not contained properly when rendering below content in iPad or iPhone, i.e. narrow screen. There is no right margin and the content is cut off. Strangely in the tablet or narrow screen the side-bar scroll bar actually appears and works, but is not needed. How many fixes for a feature that is a default part of a stack?

[John EzraMember]

Hi there,

Thanks for writing in! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

.nano .nano-content {
    overflow: visible;
    position: static;
}
@media (min-width: 1200px) {
    .x-content-sidebar-active .x-sidebar {
        position: absolute;
        overflow-y: scroll;
    }
}

aside.x-sidebar.nano.has-scrollbar {
    position:fixed;
}

and then add this under Custom > Javascript in the Customizer.

jQuery(".nano").nanoScroller({ stop: true });

Hope this helps – thanks!

[Author]

Posts