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.

Vertical Navigation Fixed Sidebar

  • Creator
    Topic
  • #1603
    hightrails
    Member

    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…

Viewing 2 replies - 1 through 2 (of 2 total)
  • Author
    Replies
  • #1701
    hightrails
    Member

    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.

    #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;
    	}
    	
    }
Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.