如何将Flexbox导航栏固定在屏幕顶部？

Question

what are some non-hacky (or not very hacky) ways to make my flexbox navigation bar fixed to the top of the screen, so that it is still responsive but also no matter how far down I scroll I can still see the navigation bar.

Here is the code I have for it:

 .navbar { display: flex; background: #e74c3c; height: 60px; font-family: 'Nova Flat', cursive; } .navitem { flex: 1; position: relative; top: 2vh; font-size: 1.7em; margin-left: 5vw; } .navitem a { text-decoration: none; color: white; } .dropdown-content { display: none; z-index: 1; color: black; font-size: 0.7em; } .dropdown-content a { color: black; } .dropdown:hover .dropdown-content { display: inline-block; } 

 <div class="navitem"><a href="#">LOGO</a></div> <div class="navitem"><a href="/search">Find Books</a></div> <div class="dropdown navitem"> <a class="profile">My Account</a> <div class="dropdown-content"> <p><a href="/:user_id/profile">My Profile</a></p> <p><a href="/<%= current_user.id %>">My Bookshelf</a></p> <p><a href="/<%= current_user.id %>/add_a_book">Add a new book to your list</a></p> <p><a href="/<%= current_user.id %>/book_list">Detailed Book List</a></p> <p> <%= link_to "Sign Out", destroy_user_session_path, :method => :delete %> </p> </div> </div> 

Answer 1

just give the navbar a fixed position will work:

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
}

Answer 2

Give the navbar (which you didn't even include in your HTML code, BTW...) position: fixed, and width: 100% , and give the content a padding-top as least as high as the navbars height, so the navbar won't hide the first lines of the content.

Also, add margin: 0 to html and body to prevent the default margin which will otherwise show.

 html, body { margin:0; } .navbar { position: fixed; width: 100%; display: flex; background: #e74c3c; height: 60px; font-family: 'Nova Flat', cursive; } .navitem { flex: 1; position: relative; top: 2vh; font-size: 1.7em; margin-left: 5vw; } .navitem a { text-decoration: none; color: white; } .dropdown-content { display: none; z-index: 1; color: black; font-size: 0.7em; } .dropdown-content a { color: black; } .dropdown:hover .dropdown-content { display: inline-block; } .content { padding-top: 60px; height: 1200px; background: yellow; } 

 <div class="navbar"> <div class="navitem"><a href="#">LOGO</a></div> <div class="navitem"><a href="/search">Find Books</a></div> <div class="dropdown navitem"> <a class="profile">My Account</a> <div class="dropdown-content"> <p><a href="/:user_id/profile">My Profile</a></p> <p><a href="/<%= current_user.id %>">My Bookshelf</a></p> <p><a href="/<%= current_user.id %>/add_a_book">Add a new book to your list</a></p> <p><a href="/<%= current_user.id %>/book_list">Detailed Book List</a></p> <p> <%= link_to "Sign Out", destroy_user_session_path, :method => :delete %> </p> </div> </div> </div> <div class="content"> lots of content here... </div>