Navbar links extend offscreen

Question

I am trying to code a Navbar using HTML and CSS. When resizing the window, the links extend off the right side of the viewport. They are not moving left, but staying in their current position.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Poppins", sans-serif;
}

.navbar {
  position: fixed;
  height: 80px;
  width: 2000px;
  background-color: #000;
  line-height: 80px;
}

.navbar .container {
  justify-content: space-between;
}

.navbar__logo {
  color: rgb(34, 204, 57);
  font-weight: 600;
  font-size: 1.2rem;
}

.navbar__logo span {
  color: #fff;
}

.navbar__link {
  color: #fff;
  text-decoration: none;
  padding: 0 10px;
}

.navbar__link:hover {
  color: rgb(34, 204, 57);
  transition: all 0.3s ease;
}

.navbar__link .active a {
  color: rgb(34, 204, 57) !important;
}


/* Utilities */

.container {
  display: flex;
  min-width: 1220px;
  width: 1220px;
  margin: auto;
}


  
  
  
  Document
  
  



  
    
      
        SomeWebsite
        
          Home
          Home
          Home
          Home
          Home

user_12571484 · Answer

You're hard coding widths which makes your links shunt off the right hand edge of the screen. Change .navbar to

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;

  background-color: #000;
  line-height: 80px;
}

and .container to

.container {
  display: flex;
}

and it should work.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Poppins", sans-serif;
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background-color: #000;
  line-height: 80px;
}

.navbar .container {
  justify-content: space-between;
}

.navbar__logo {
  color: rgb(34, 204, 57);
  font-weight: 600;
  font-size: 1.2rem;
}

.navbar__logo span {
  color: #fff;
}

.navbar__link {
  color: #fff;
  text-decoration: none;
  padding: 0 10px;
}

.navbar__link:hover {
  color: rgb(34, 204, 57);
  transition: all 0.3s ease;
}

.navbar__link .active a {
  color: rgb(34, 204, 57) !important;
}

.container {
  display: flex;
}


  
  
  
  Document
  
  



  
    
      
        SomeWebsite
        
          Home
          Home
          Home
          Home
          Home

user_19135958 · Answer

dont use fix properties (px) use (view-width, vw). 100vw means the all the width of the screen. because when you use px it will work just on your screen but on smaller or bigger screens it will break.

vw is relative to the width of the viewport

.navbar { width: 100vw;} https://codepen.io/wtechoud/pen/BaxaByz?editors=1100

if you still doesn't know what vw mean this is a good tutorial to watch: https://www.youtube.com/watch?v=-GR52czEd-0

Navbar links extend offscreen

2 Answers