WordPress.org

Ready to get started?Download WordPress

Forums

Sunspot
[resolved] Fixed sidebar (18 posts)

  1. Angius
    Member
    Posted 8 months ago #

    This theme got great potential of having the sidebar fixed, it'll look really great.
    But how can I do that?
    I tried slapping position:fixed in various parts of styles.css, but beside breaking the theme - nothing really works...

  2. Hi there, just a heads-up that the best way to make changes to a theme is to use a child theme, so your tweaks won't be overwritten when updating the theme. Here are some guides in case you haven't made one before:

    http://codex.wordpress.org/Child_Themes
    http://op111.net/53/
    http://vimeo.com/49770088

    Once you have a child theme set up, try adding this to the stylesheet in your child theme directory:

    #masthead {
       position: fixed;
    }
    
    #main {
       position: relative;
    }

    I tested this on my end and it keeps the sidebar in a fixed position while letting the main column scroll.

    Please let me know how this works for you!

  3. Actually it may also work with only the first #masthead bit. :-)

  4. Angius
    Member
    Posted 8 months ago #

    It works almost perfectly, thank you very much :)
    The only issue is that, the elements of the sidebar are a bit too wide, they are wider than actual sidebar.

  5. You're welcome! Could you please provide a link to your site so I can take a look, since I'm not seeing that on my test site.

    Did you make any other CSS changes? The code above shouldn't change any widths.

  6. Angius
    Member
    Posted 8 months ago #

    http://angius.hol.es/
    No changes. If I recall correctly, of course.
    I'll try reinstalling the theme maybe.

    Edit: After reinstalling the bug is still present.

  7. Are you making the changes in a child theme or using a custom CSS plugin? My test is using a child theme.

  8. Angius
    Member
    Posted 8 months ago #

    I was doing it on a main theme. But if you're saying, that it works only on a child, I'll try.

  9. I'm saying I've only tested it on a child theme. :-) I don't recommend modifying the theme files directly, since your changes will be overwritten the next time you update the theme.

    Let me know how it goes.

  10. Angius
    Member
    Posted 8 months ago #

    Unless I'm doing something terribly wrong, using the child theme broke my site even more...

  11. Looks like you didn't upload the styles.css file in your child theme, which is required for a child theme to function:

    http://angius.hol.es/wp-content/themes/sunspot-child/style.css

  12. You may want to double-check all the other steps in making a child theme from the resources I linked to above - or your preferred tutorial - to make sure everything is set up correctly.

  13. Angius
    Member
    Posted 8 months ago #

    Apparently it was a matter of a typo... It works now (child theme, I mean), but the elements are still too wide... I even disabled all the widgets, but it looks like that's not the cause...

  14. Could you try changing the #masthead CSS to this:

    #masthead {
     position: fixed;
     width: 300px;
    }
  15. Angius
    Member
    Posted 8 months ago #

    It works perfectly, why haven't I thought about this earlier...

  16. Excellent. :-)

  17. Angius
    Member
    Posted 8 months ago #

    Again, thank you very much :)
    This topic can be considered resolved.

  18. You're welcome, my pleasure.

Reply

You must log in to post.

About this Theme

About this Topic