导航栏下方的页面内容

Question

I have made a nav bar that is fixed using unordered list which li elements are floating left.At first the bar was taking the whole width of the page as needed,but when I added content of the page,it went under the nav bar because she was floating.

 ul { list-style-type: none; margin: 0; padding: 0; background-color: #333; overflow: hidden; position: fixed; } li { float: left; } li { display: block; color: white; text-align: center; text-decoration: none; padding: 14px 16px; } 

 <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> 

How do I make my page content begin after the nav bar and give the bar it´s old look?And is there better way to make these bars/headers?

The bar should take up the whole width of the page:

Answer 1

Add width: 100% to the ul if you want it to be 100%. Also, you could try width: 100vw to be 100% of the viewport.

For the content to not appear under the nav bar, use body { padding: HEIGHT-OF-MENU } .

 ul { list-style-type: none; margin: 0; padding: 0; background-color: #333; overflow: hidden; position: fixed; width: 100%; } li { float: left; } li { display: block; color: white; text-align: center; text-decoration: none; padding: 14px 16px; } 

 <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> 

Answer 2

You either need to assign a fixed height to the nav, then add that height as a padding-top to body, or you can make body display: flex; height: 100vh; display: flex; height: 100vh; , and put the rest of the page content in an element adjacent to the nav, and set it to flex-grow: 1 and overflow-y: scroll . If you do that, you can remove position: fixed from the nav, set the li 's to display: inline-block and the nav will span the width of the page.

 ul { list-style-type: none; margin: 0; padding: 0; background: rgba(0,0,0,0.5); overflow: hidden; } li { display: inline-block; color: white; text-align: center; text-decoration: none; padding: 14px 16px; } body { margin: 0; height: 100vh; display: flex; flex-direction: column; } section { flex: 1 0 0; overflow-y: scroll; } 

 <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> <section> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> </section> 

Answer 3

Add width: 100% to the ul to make it full width.

To not have the content hide under the navbar, put the whole contant into a wraping div and assign padding-top: 60px (or whatever value fits) to it.

See my snippet below for some additional details.

 html, body { margin: 0; } ul { list-style-type: none; margin: 0; padding: 0; background-color: #333; overflow: hidden; position: fixed; width: 100%; height: 50px; } li { float: left; } li { display: block; color: white; text-align: center; text-decoration: none; padding: 14px 16px; } li a { color: white; } li a:hover { color: red; } .wrapper { padding-top: 60px; } 

 <ul> <li> <a href=#link>1111</a> </li> <li> <a href=#link>2222</a> </li> <li> <a href=#link>3333</a> </li> <li> <a href=#link>4444</a> </li> </ul> <div class="wrapper"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p> <p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p> <p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p> </div>