css - Menu bar won't move left or right with scrollbar -
i'm working on menu website. i've been testing smaller screens (for screens around 800 600), , everytime try moving horizontal scrollbar on right see whole menu, body of website changes not menu. can help? thanks! website: http://andrewgu12.kodingen.com/
css:
div#header-container { background-color: #003264; height: 100px !important; box-shadow: 0px 5px 10px #666; min-width: 100%; z-index: 1; position: fixed; top: 0; } div#header { width: 960px; margin: 0 auto; padding: 0; color: #fff; /*position: relative;*/ top: 0; } div#header ul{ height: 100px; list-style-type: none; float: right; } div#header ul li { background-color: #003264; text-align: center; height: 100px; line-height: 100px; transition: background-color 1s; -webkit-transition: background-color 1s; display: inline; padding: 0; margin: 0; } html
<div id="header-container"> <div id="header" class="row"> <nav class="nav-bar"> <ul class="left"> <li data-slide="1" class="andrewgu"><a href="">andrewgu</a></li> </ul> <ul class="right"> <li data-slide="2" class="portfolio"><a href="">portfolio</a></li> <li data-slide="3" class="about"><a href="">about</a></li> <li data-slide="4" class="contact"><a href="">contact</a></li> </ul> </nav> </div><!--end header--> </div><!--end header-container--> edit: there way can in css having gap between left , right menu items decrease browser width decreases?
the reason happening due position: fixed; in css menu. expected behavior of fixed position ignores scroll bars. if want keep menu @ top without using css property suggest @ javascript solution.
maybe have @ post: leave menu bar fixed on top when scrolled
alternatively there great jquery plugin can achieve called jquery-scrollspy can found here: https://github.com/sxalexander/jquery-scrollspy
hope helps.
Comments
Post a Comment