This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Reply To: Vertical Navigation Fixed Sidebar

#1715
Jason Bobich
Keymaster

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;
	}
	
}