i have sticky header on page, found bug buttons on right side of sticky header not visible when browser window small... , horizontal scrolling not work hearder.
here html code:
<div class="search-container"> <div class="sticky-wrapper"> <!-- it's fixed header --> </div> <div class="sidebar"> <!-- search filters e.g. --> </div> <div class="content"> <!-- search results e.g. --> </div> </div> here css (sass) code:
.search-container { .sticky-wrapper { box-shadow: 0 3px 3px 0 #8f8f8f; position: fixed; top: 0; z-index: 999; } .sidebar { float: left; margin-left: 5px; width: 229px; } .content { background: none repeat scroll 0 0 #fff; border-top: 4px solid #5d5d5d; display: inline; float: left; margin-left: 18px; margin-right: 0; width: 691px !important; } } when make browser window smaller (sidebar + content) width, horizontal scrolling appears - works .sidebar , .content.
how can make sticky header horizontal-scrollable too?
p.s. it's important working in ff, chrome, ie >= 9. , not change/add new css ids or classes, cause many tests become broken.
please, help. kindly.
if helpful - jsfiddle header , content
i think css alone cannot handle scenario. better if add pinch of js flavour. try fiddle.
added js code: (note: have used jquery, can have rewritten in pure js if required)
$(window).scroll(function() { var max_width = 990; if ($(window).width() < max_width) { $('.sticky-wrapper').css('margin-left', -$(this).scrollleft() + "px"); } }); 