Fixed Sidebar As Screen Scrolls

Begin by creating a child theme, if you haven’t already done so.

In your child theme style sheet, add the following:

.two-column #primary {
    position: fixed;
    right: 10px;
    top: 240px;
}

Do not edit your theme files directly, or you will lose your changes at the next update.

Hello kjode, thank you for responding!

Where exactly in the style sheet should this go? Tried it in a few places, couldnt get it to work. Here is the code for my child theme css below

/*
Theme Name:     Coraline Child
Theme URI:      wedivine.org
Description:    Child theme for the Coraline
Author:         WeDivine
Author URI:     wedivine.org
Template:       coraline
Version:        3.5.1
*/

@import url("../coraline/style.css");

#access a {
color: green;
font-size: 13px;
font-family: Cambria;
display: block;
line-height: 3.333em;
padding-bottom: 0;
padding-left: 1.2125em;
padding-right: 1.2125em;
padding-top: 0;
text-decoration: none;
}

#submenu a {
    color: #FFFFFF;
    font-size: 30px
    font-weight: bold;
    padding: 3px 5px 3px 7px;
    text-shadow: 0 1px 0 #555555;
}
#submenu a:hover {
    text-shadow: 1px 1px 1px #000000;
}

#access {
  margin-top: 50px;
}

.entry-content img, .comment-content img, .widget img, img.header-image, .author-avatar img, img.wp-post-image {
    border-radius: none !important;
    box-shadow: none !important;
}

#branding img {
   border: none;
}

#footer, #footer a {
 color: #F660AB;
} 

.two-column #container { max-width: 980px; }

Thanks again!

Try adding it to the end. Keep in mind that the theme’s features (if any) may be overriding this declaration; if it still doesn’t work, try adding !important to the end of the declaration before the closing semicolon.

Hey,
Thank you for responding, really appreciate it. The sign up form is scrolling now but the ratios are off. The sidebar is all the way up where the header is. Also it is not respondive to iphone, the sidebar is in middle of screen. How can we can the ratios in tact and responsive?

You need a separate style sheet for mobile devices, such as iPhone.

Ok. How would I fix this on computer though? As well as on iphone?

The sign up form is scrolling now but the ratios are off.

I would probably add a width rule of about 230px to your .two-column #primary selector so that the sidebar stays the same width when the browser is resized.

The sidebar is all the way up where the header is.

That’s one of the problems with using absolute and fixed positioning, they take the object “out of the flow,” so they are able to overlap other elements. That makes the sizing of those other elements a little more complicated, because you you now have to change the CSS of your other elements to make room for that floating sidebar instead of letting the browser handle it for you.

So, if you don’t want the sidebar to overlap the header area, for example, you’re going to have to add some blank space to the right of it, maybe by adding a margin-right to the container div. If you set the width of the sidebar to 230px above, then you can set the margin-right of the container to 250px:

#container {
   /* Create some empty space to right for scrolling box */
   margin-right: 250px;
}

One side-effect of the current CSS for the non-scrolling sidebar that you’ve probably noticed is that you don’t see the testimonials under the sign-up box. You may be able to “reveal” it by changing the top value that you’ve set for .two-column #primary to maybe 24px instead of 240px.

As far as what to do about the sidebar on mobile devices, you don’t need to create a new style sheet, you can just add a media query section to your existing one. If you don’t know about media queries and how to add them to your style sheet, you can read about them here. The things you have to decide when setting up the media query are 1) the screen width at which you want your page to respond by reformatting itself, and 2) what CSS changes you want to implement when that screen width is reached. For example, on a smart phone (i.e., when the width goes below 480px), you may want the sidebar to jump under the main content instead of “sticking” to the right, since there won’t be enough room for it next to the content area, so you’d change the positioning from fixed to static. Then you’ll want to set the margin-right on the container back to 0px so you don’t have that empty space on the right. Etc.

Hey, thank you for the response! I am an absolute noob and am trying to wrap my head around this, but am very confused.

I entered the code you sent def looks better already! How do I add a width rule? If I could move the sidebar down a little bit it would look right, not sure how to do this.

Going to reserch media queries right now thank you so much!

How do I add a width rule?

In your CSS file, add a width rule to the .two-column #primary selector so it looks like this:

.two-column #primary {
    position: fixed;
    right: 10px;
    top: 240px;
    width: 230px;
!important}

.two-column #primary is called a selector because it “selects” which element to apply the rules to. The sidebar has an ID called primary, so these rules would apply to it (strictly speaking, the .two-column part of the selector could have been omitted because there is supposed to be only one element with a particular ID on any one web page). If you want to learn about CSS you can read through this tutorial.

If I could move the sidebar down a little bit it would look right, not sure how to do this.

Adjust the value of the top attribute in the CSS above. Right now it’s set to 240px, which means your sidebar will always be located 240 pixels (a pixel is a very small unit of measurement, like a dot) from the top of the browser (since the position is fixed). If you want the sidebar to be positioned down further, increase the value for top. If you want it to be positioned higher, decrease the value.

Hmm I am totally lost. Trying to play with the dimensions and make it fit. Stumped. Do you have any ideas? Not sure where I am going wrong.

‘/*
Theme Name: Coraline Child
Theme URI: wedivine.org
Description: Child theme for the Coraline
Author: WeDivine
Author URI: wedivine.org
Template: coraline
Version: 3.5.1
*/

@import url(“../coraline/style.css”);

#access a {
color: green;
font-size: 13px;
font-family: Cambria;
display: block;
line-height: 3.333em;
padding-bottom: 0;
padding-left: 1.2125em;
padding-right: 1.2125em;
padding-top: 0;
text-decoration: none;
}

.two-column #primary {
position: fixed;
right: 10px;
top: 240px;
width: 300px;
!important}

#submenu a {
color: #FFFFFF;
font-size: 30px
font-weight: bold;
padding: 3px 5px 3px 7px;
text-shadow: 0 1px 0 #555555;
}
#submenu a:hover {
text-shadow: 1px 1px 1px #000000;
}

#access {
margin-top: 50px;
}

.entry-content img, .comment-content img, .widget img, img.header-image, .author-avatar img, img.wp-post-image {
border-radius: none !important;
box-shadow: none !important;
}

#branding img {
border: none;
}

#footer, #footer a {
color: #F660AB;
}

.two-column #container { max-width: 980px; }

#container {
/* Create some empty space to right for scrolling box */
margin-right: 250px;
}’

What else exactly would you like to see?

IMO, the margin-right that you set for #container is a little narrow for the sidebar. I had suggested a margin-right of 250px, but that was because I also suggested sidebar width of 230px, which gives you a little separation between the two of 20px. But you set the sidebar width to 300px, so that means there’s going to be a slight overlap because the 300px is wider than the margin-right of 230px.

There’s a lot of blank space above the sidebar. I would either change the top value of the sidebar from 240px to either 24px to move the sidebar all the way to the top, or to 64px to align it with the top of the header image. But that would be my personal preference, maybe you’d like to see something different.

I’d like to see my header in the center, the dimensions balanced, with the sign up form underneath and there being enough space for the social media and testimonials. Right now everything is lopsided. Do you know how to fix that?

Hmm, well it looks like you’ve switched themes…

I would say that the difficult thing about your previous request was that if you wanted the sidebar to be fixed in place, AND you wanted it to fit under the header AND you wanted the testimonials and social media buttons to show, that would have been difficult, because there really wasn’t that much room to fit everything along the right side. Maybe it would fit if you made the text of the sign-up form and the testimonials really small, or if you made the header image shorter, but I think you would be better off not fixing the sidebar in place, and letting it scroll along with the rest of the page.