How do I prevent elements in my nav-bar being cut off when re-sizing?

Question

I managed to fix a problem I was having where my nav elements where bunching up when the window is resized by adding:

nav ul {
    white-space: nowrap;
}

nav ul li {
    display: table-cell;
}

But now, when I resize my window, elements in my nav bar are disappearing.

 @import url(https://fonts.googleapis.com/css?family=Pacifico); @import url(https://fonts.googleapis.com/css?family=Patua+One); body { margin: 0px; } header { width: 100%; background: rgba(0, 0, 0, 0.7); color: white; padding: 5px 15px 0px 15px; position: fixed; top: 0; left: 0; z-index: 999; } header h1 { font-size: 30px; display: inline; padding: 30px; font-family: 'Pacifico', cursive; } nav ul { margin: 0; display: inline; padding: 50px; white-space: nowrap; } #main { font-size: 80px; } nav ul li { color: white; list-style-type: none; display: inline-block; padding: 20px 65px; margin: 0px; font-family: 'Patua One', cursive; display: table-cell; } nav ul li:hover { color: #999; } #ghostButton { background: rgba(0, 0, 0, 0.3); border: 0.5px solid white; width: 200px; padding: 10px; display: inline-block; font-family: "Times new roman"; } #ghostButton:hover { background: rgba(255, 255, 255, 0.3); } #hero { background-size: cover; position: relative; height: 100vh; background-image: url(http://i1377.photobucket.com/albums/ah72/michaelbarley1/1235217_483642721808631_6410301847003523270_n_zpse3g2acn1.jpg); } .header { position: absolute; top: 50%; text-align: center; width: 100%; color: #fff; font-size: 36px; -ms-transform: translate(0, -50%); /* IE 9 */ -webkit-transform: translate(0, -50%); /* Safari */ transform: translate(0, -50%); font-family: 'Pacifico', cursive; font-family: "Times new roman"; } .header1 { padding-bottom: 300px; color: black; text-align: center; font-size: 25px; font-family: 'Pacifico', cursive; font-family: "Times new roman"; } p { font-size: 20px; } /*# sourceMappingURL=stylesheet.css.map */

 <! DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="css/stylesheet.css"> </head> <body> <header> <nav> <h1>Elianos Brasserie</h1> <ul> <li>Home</li> <li>Menu</li> <li>Page1</li> <li>Page2</li> </ul> </nav> </header> <div> </div> <div id="wrapper"> <div id="hero"> <div class="header"> <h1 id="main">Made with love</h1> <p>Ut wisi enim ad minim veniam, quis nostrud exerci <br>tation ullamcorper suscipit lobortis nisl ut <br>aliquip ex ea commodo consequat. Duis <br> </p> <div id="ghostButton">Learn More</div> </div> </div> </div> </body> </html>

I would like the elements to remain spaced out.

Answer 1

I think you can easily achieve such an effect using flexbox display properties .

I edited your code with an example of this. Using flex-grow:1; on the li they will divide the available horizontal space amongst each other. To avoid the line from wrapping you could consider adding flex-wrap:nowrap; to the ul .

Before using flexbox, consider the browser support of flexbox .

 @import url(https://fonts.googleapis.com/css?family=Pacifico); @import url(https://fonts.googleapis.com/css?family=Patua+One); body { margin: 0px; } header { width: 100%; background: rgba(0, 0, 0, 0.7); color: white; padding: 5px 15px 0px 15px; position: fixed; top: 0; left: 0; z-index: 999; } header h1 { font-size: 30px; float:left; padding: 30px; font-family: 'Pacifico', cursive; } nav ul { margin: 0; display: inline; padding: 50px; display:flex; } #main { font-size: 80px; } nav ul li { color: white; list-style-type: none; display: inline-block; //padding: 20px 65px; margin: 0px; font-family: 'Patua One', cursive; flex-grow:1; } nav ul li:hover { color: #999; } #ghostButton { background: rgba(0, 0, 0, 0.3); border: 0.5px solid white; width: 200px; padding: 10px; display: inline-block; font-family: "Times new roman"; } #ghostButton:hover { background: rgba(255, 255, 255, 0.3); } #hero { background-size: cover; position: relative; height: 100vh; background-image: url(http://i1377.photobucket.com/albums/ah72/michaelbarley1/1235217_483642721808631_6410301847003523270_n_zpse3g2acn1.jpg); } .header { position: absolute; top: 50%; text-align: center; width: 100%; color: #fff; font-size: 36px; -ms-transform: translate(0, -50%); /* IE 9 */ -webkit-transform: translate(0, -50%); /* Safari */ transform: translate(0, -50%); font-family: 'Pacifico', cursive; font-family: "Times new roman"; } .header1 { padding-bottom: 300px; color: black; text-align: center; font-size: 25px; font-family: 'Pacifico', cursive; font-family: "Times new roman"; } p { font-size: 20px; } /*# sourceMappingURL=stylesheet.css.map */

 <! DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="css/stylesheet.css"> </head> <body> <header> <nav> <h1>Elianos Brasserie</h1> <ul> <li>Home</li> <li>Menu</li> <li>Page1</li> <li>Page2</li> </ul> </nav> </header> <div> </div> <div id="wrapper"> <div id="hero"> <div class="header"> <h1 id="main">Made with love</h1> <p>Ut wisi enim ad minim veniam, quis nostrud exerci <br>tation ullamcorper suscipit lobortis nisl ut <br>aliquip ex ea commodo consequat. Duis <br> </p> <div id="ghostButton">Learn More</div> </div> </div> </div> </body> </html>

Answer 2

I think you should read and learn something about responsive web design. Or just add float: left; to your nav ul li .

Read more on Responsive web design here

How do I prevent elements in my nav-bar being cut off when re-sizing?

Question

2 answers

solution1
0 2016-03-20 17:18:28

solution2
0 2016-03-20 17:27:27

How do I prevent elements in my nav-bar being cut off when re-sizing?

Question

2 answers

solution1 0 2016-03-20 17:18:28

solution2 0 2016-03-20 17:27:27

solution1
0 2016-03-20 17:18:28

solution2
0 2016-03-20 17:27:27