Need help? Check out our Support site, then


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

  1. 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 krisandersonguitar.wordpress.com.

  2. Anyone out there???
    :)

  3. 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.

  4. 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...
    :)

  5. Not to worry - we are cool. :)

  6. 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;
    }
  7. 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!

  8. You are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic