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

Popular posts from this blog

basic authentication with http post params android -

vb.net - Virtual Keyboard commands -

How to get multiresult with multicondition in Sql Server -