Vertical Navigation Fixed Sidebar

[hightrails]

Howdy;

Thanks for the reply over in the Aleyska forum. Bought jumpstart, and figured most of the vertical navigation issues out. However, I can’t get the sidebar to stay fixed in place like the one on http://dev.themeblvd.com/. Could you impart some wisdom?

Thank you sir…

Topic

[hightrails]

Have been trying but have had no luck…fixed sidebar via css is easy, but finding a way to get sidebar to stay still, along with widgets, and still be responsive is another game entirely.

[Jason Bobich]

Hello,

Sorry I didn’t mean to ignore this topic. I think I may have missed it because it has a similar title to a few other ones.

Anyway, the trick is just to position the sidebar fixed. In CSS, a “fixed” element will stick in place. Here’s a good article on positioning in CSS:

http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

Here’s what I did on the dev site with the container and the two main columns:

#container {
	margin: 0 auto;
	width: 890px; /* Width of container */
}
#sidebar_layout {
	position: relative;
}
#sidebar_layout .fixed-sidebar {
	float: none;
	margin: 0;
	position: fixed;
	width: 268px;
}
#sidebar_layout #content {
	float: none;
	margin: 0 0 0 300px;
	width: 590px; /* This plus the 300px left margin equals 890px */
}

Then on tablets and lower, I essentially just stack the two columns.

@media (max-width: 768px) {	

	#container {
		width: auto;
	}
	#sidebar_layout .fixed-sidebar {
		position: static;
		width: auto;
	}
	#sidebar_layout #content {
		margin: 0;
		width: auto;
	}
	
}

[Author]

Replies