Is there a way to design a scrolling sidebar using CSS in the Confit theme?

krisandersonguitar · Member · Aug 6, 2013 at 4:53 pm
Copy link

Add topic to favorites
Greetings!

Full disclosure, I’m VERY new to wordpress.com and css code.

I am curious, is there a way to allow my sidebar to scroll separately from the main content area using CSS?
Something like this: http://thenextweb.com

I just purchased the custom design package and experimented with fixing the position of the header and secondary area. This worked great in allowing the main content area to scroll without losing the sidebar links. However, this only works if the browser window is fully expanded. Otherwise most of the sidebar is hidden and unattainable.
So that’s pretty pointless.

I suspect maybe this isn’t possible using just CSS, which is unfortunate, as this is the only reason I purchased the upgrade.

Here’s my site, using the Confit Theme:
http://krisandersonguitar.wordpress.com

Appreciate any advice/ideas!
Thanks.

The blog I need help with is: (visible only to logged in users)
krisandersonguitar · Member · Aug 9, 2013 at 9:11 pm
Copy link
Anyone out there???
:)
timethief · Member · Aug 9, 2013 at 9:20 pm
Copy link
When the Volunteers who help with CSS editing work their way forward through all the CSS Forum threads dated previous to yours they will then arrive in this thread and assist you.
krisandersonguitar · Member · Aug 9, 2013 at 9:26 pm
Copy link
Didn’t mean to offend!
I’ve gotten such quick responses in the past I thought maybe my post didn’t go through for some reason. You never know.
I’ll continue to wait patiently…
:)
timethief · Member · Aug 9, 2013 at 9:28 pm
Copy link
Not to worry – we are cool. :)
thesacredpath · Member · Aug 10, 2013 at 6:38 am
Copy link
Hi there. This can be done. This is some example code you can try, which puts a scrollbar on the left sidebar area below the menu. Give it a try. I set a height for that sidebar at 150px so that you can see the results easier.
```
#secondary {
    overflow-y: scroll;
    height: 150px;
}
```
This can also be done to individual widgets by targeting them by ID class such as below. This example is for your links widget. Again, I used the 70px height value for demonstration purposes.
```
#linkcat-50526389 {
overflow-y: scroll;
height: 70px;
}
```
krisandersonguitar · Member · Aug 11, 2013 at 12:25 am
Copy link
Perfect!
I applied this to the primary area instead. Looks great!

I have another question, but I should probably start new thread for that.

Thanks so much!
thesacredpath · Member · Aug 11, 2013 at 3:47 pm
Copy link
You are welcome.

No items found.