html - Fix Sidebar in the same row as other elements -
so have sidebar wan't fixed in page , have other column in row scrollable.
i tried changing position
css attribute of element, original content squished first column.
a demo of have available here: jsfiddle
here html:
<div class="container"> <div class="row"> <div class="col-4" role="sidebar"> <div class="diamond"><span>rs</span></div> <br /> <div class="brief"> text here... </div> <form class="search"> <input type="text" placeholder="search..."> <button type="submit"><i class="fa fa-search"></i></button> </form> <ul class="sidebar-menu"> <li class="github"><a href="#">github</a></li> <li class="twitter"><a href="#">twitter</a></li> <li class="stackoverflow"><a href="#">stackoverflow</a></li> <li class="linkedin"><a href="#">linkedin</a></li> </ul> </div> <div class="col-8" role="content"> <h1 class="title">title</h1><div class="horizontal-rule"></div> <nav class="subnav"> <ul> <li><a href="#">link</a></li> / <li><a href="#">link</a></li> / <li><a href="#">link</a></li> / <li><a href="#">link</a></li> </ul> </nav> </div> </div> </div>
i don't know element want have fixed, use method:
<div id="id"> content of div </div>
and css:
#id { position: fixed; left: 30px; // or whatever want top: 100px; // or whatever want }
i hope helped you!
Comments
Post a Comment