Html - My navbar is overflowing wide, What is the problem?

gael
September 18, 2023
117 views
0 votes
2 Answers

I’m currently working on a old navbar I had from an old project. I’m having a problem with it, that I truly don’t understand why is it happening. The navbar overflows horizontally, the "Iniciar Sesion" and "Registrarse" are not being visible because of the overflow. Here is the code:

@font-face {
  font-family: 'HelveticaDisplay';
  src: url('/media/fonts/HelveticaNowDisplay-Black.otf') format('opentype');
}

* {
    font-family: "HelveticaDisplay", sans-serif;
}

body {
    max-width: 100%;
    color: #181818;
    margin: 0;
}

/*HEADER*/

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 1;
  padding: 15px 150px;
  transition: 0.6s;
  width: 100%;
  position: fixed;
  background-color: #FFFFFF;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}

nav.sticky {
  padding: 20px 6%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.logo {
  color: rgb(17, 17, 17);
  width: 180px;
  padding: 0;
  display: flex;
  justify-content: center; /* Centrar horizontalmente */
  align-items: center; /* Centrar verticalmente */
}

.logo img {
  max-height: 100%;
  width: 150px;
  object-fit: contain;
}


.nav-links {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}

.nav-links li {
  list-style: none;
  transition: all 0.3s ease 0s;
  padding: 0 5px;
  text-align: center;
}

.nav-links a {
  color: rgb(17, 17, 17);
  text-decoration: none;
  font-size: 15px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: all 0.3s ease 0s;
}

.nav-links a:hover {
  color: #7feffd;
}

.burger {
  display: none;
}

.burger div{
  width: 25px;
  height: 3px;
  background-color:rgb(17, 17, 17);
  margin: 5px;
  transition: all 0.3s ease;
}


/* BUSQUEDA */
.box {
  width: 100%;
  background-color: #F6F6F6;
  border: 1px solid #AAAAAA;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 2%;
  margin-top: 0;
  margin-bottom: 0;
  transition: all 0.3s ease 0s;
  padding: 0 0 0 15px;
  box-sizing: border-box;
}

nav.sticky .box{
  width: 100%;
  background-color: rgb(236, 236, 236);
  border: none;
  border-radius: 30px;
  display: flex;
  align-items: center;
  padding-left: 20px;
  margin: 4%;
  margin-top: 0;
  margin-bottom: 0;
  transition: all 0.3s ease 0s;
}

.box input {
  background-color: transparent;
  flex-grow: 1;
  height: 40px;
  border: none;
  outline: none;
  font-size: 14px;
}

.nav-search-btn {
  background: none;
  border: none;
  line-height: 1em;
  -webkit-border-radius: 0 2px 2px 0;
  width: 42px;
  height: 42px;
  border-radius: 0 2px 0;
  right: 0;
  top: 0;
  bottom: 0;
  cursor: pointer;
  background-color: transparent;
  box-shadow: none;
  
}

<nav id="navbarxd">
    <a href="#" class="logo">
      <img src="media/images/icons/logoextendido.png" alt="">
    </a>

    <div class="box">
      <input type="text" name="" placeholder="Buscar productos, marcas, etc.">
      <button type="submit" class="nav-search-btn">
        <i class="bi-search" style="color: #AAAAAA;"></i>
      </button>
    </div>

  <ul class="nav-links">
    <li>
      <a href="#">Iniciar Sesión</a>
    </li>
    <li>
      <a href="#">Registrarse</a>
    </li>
  </ul>

  <div class="burger">
    <div class="line1"></div>
    <div class="line2"></div>
    <div class="line3"></div> 
  </div>
</nav>

I’ve tried modifying flexbox, widths, heights and nothing.

Answers

You have 150px of left and right padding on your nav element and shown with the dev tools. This will cause the flexbox content to be too large. Remove thats and it is mostly fixed. Keep in mind that the empty space on the left is taken up by an image which I have replaced with a sample image for this demo.

You also have a margin: 2% on items inside the flexbox. Instead use gap: 2% on the nav so it sets the space between all flexbox items.

@font-face {
  font-family: 'HelveticaDisplay';
  src: url('/media/fonts/HelveticaNowDisplay-Black.otf') format('opentype');
}

* {
    font-family: "HelveticaDisplay", sans-serif;
}

body {
    max-width: 100%;
    color: #181818;
    margin: 0;
}

/*HEADER*/

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 1;
  
  
  /*padding: 15px 150px;*/
  padding: 15px 0;
  gap: 2%;
  
  
  transition: 0.6s;
  width: 100%;
  position: fixed;
  background-color: #FFFFFF;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}

nav.sticky {
  padding: 20px 6%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.logo {
  color: rgb(17, 17, 17);
  width: 180px;
  padding: 0;
  display: flex;
  justify-content: center; /* Centrar horizontalmente */
  align-items: center; /* Centrar verticalmente */
}

.logo img {
  max-height: 100%;
  width: 150px;
  object-fit: contain;
}


.nav-links {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}

.nav-links li {
  list-style: none;
  transition: all 0.3s ease 0s;
  padding: 0 5px;
  text-align: center;
}

.nav-links a {
  color: rgb(17, 17, 17);
  text-decoration: none;
  font-size: 15px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: all 0.3s ease 0s;
}

.nav-links a:hover {
  color: #7feffd;
}

.burger {
  display: none;
}

.burger div{
  width: 25px;
  height: 3px;
  background-color:rgb(17, 17, 17);
  margin: 5px;
  transition: all 0.3s ease;
}


/* BUSQUEDA */
.box {
  width: 100%;
  background-color: #F6F6F6;
  border: 1px solid #AAAAAA;
  display: flex;
  align-items: center;
  justify-content: space-between;
  
  
  /*margin: 2%;*/
  
  
  margin-top: 0;
  margin-bottom: 0;
  transition: all 0.3s ease 0s;
  padding: 0 0 0 15px;
  box-sizing: border-box;
}

nav.sticky .box{
  width: 100%;
  background-color: rgb(236, 236, 236);
  border: none;
  border-radius: 30px;
  display: flex;
  align-items: center;
  padding-left: 20px;
  margin: 4%;
  margin-top: 0;
  margin-bottom: 0;
  transition: all 0.3s ease 0s;
}

.box input {
  background-color: transparent;
  flex-grow: 1;
  height: 40px;
  border: none;
  outline: none;
  font-size: 14px;
}

.nav-search-btn {
  background: none;
  border: none;
  line-height: 1em;
  -webkit-border-radius: 0 2px 2px 0;
  width: 42px;
  height: 42px;
  border-radius: 0 2px 0;
  right: 0;
  top: 0;
  bottom: 0;
  cursor: pointer;
  background-color: transparent;
  box-shadow: none;
  
}

<nav id="navbarxd">
    <a href="#" class="logo">
      <img src="https://picsum.photos/150/50" alt="">
    </a>

    <div class="box">
      <input type="text" name="" placeholder="Buscar productos, marcas, etc.">
      <button type="submit" class="nav-search-btn">
        <i class="bi-search" style="color: #AAAAAA;"></i>
      </button>
    </div>

  <ul class="nav-links">
    <li>
      <a href="#">Iniciar Sesión</a>
    </li>
    <li>
      <a href="#">Registrarse</a>
    </li>
  </ul>

  <div class="burger">
    <div class="line1"></div>
    <div class="line2"></div>
    <div class="line3"></div> 
  </div>
</nav>

The problem

Your <nav> has width 100% and also padding on the left and right of 150px. So your nav overflows by 300px. You can fix this by changing the width and the padding settings so that they dont go above the screen width.

Simple solution

One easy solution is to use VW on the <nav>, (see CSS values).

In the edited example below the nav width is set to 90vw instead of 100% and the padding left and right are 5vw, via padding: 15px 5vw;. You end up at 100vw so don’t have overflow.

@font-face {
  font-family: 'HelveticaDisplay';
  src: url('/media/fonts/HelveticaNowDisplay-Black.otf') format('opentype');
}

* {
  font-family: "HelveticaDisplay", sans-serif;
}

body {
  max-width: 100%;
  color: #181818;
  margin: 0;
}


/*HEADER*/

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 1;
  padding: 15px 5vw;
  /*Changed here*/
  transition: 0.6s;
  width: 90vw;
  /*Changed here*/
  position: fixed;
  background-color: #FFFFFF;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}

nav.sticky {
  padding: 20px 6%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.logo {
  color: rgb(17, 17, 17);
  width: 180px;
  padding: 0;
  display: flex;
  justify-content: center;
  /* Centrar horizontalmente */
  align-items: center;
  /* Centrar verticalmente */
}

.logo img {
  max-height: 100%;
  width: 150px;
  object-fit: contain;
}

.nav-links {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}

.nav-links li {
  list-style: none;
  transition: all 0.3s ease 0s;
  padding: 0 5px;
  text-align: center;
}

.nav-links a {
  color: rgb(17, 17, 17);
  text-decoration: none;
  font-size: 15px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: all 0.3s ease 0s;
}

.nav-links a:hover {
  color: #7feffd;
}

.burger {
  display: none;
}

.burger div {
  width: 25px;
  height: 3px;
  background-color: rgb(17, 17, 17);
  margin: 5px;
  transition: all 0.3s ease;
}


/* BUSQUEDA */

.box {
  width: 100%;
  background-color: #F6F6F6;
  border: 1px solid #AAAAAA;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 2%;
  margin-top: 0;
  margin-bottom: 0;
  transition: all 0.3s ease 0s;
  padding: 0 0 0 15px;
  box-sizing: border-box;
}

nav.sticky .box {
  width: 100%;
  background-color: rgb(236, 236, 236);
  border: none;
  border-radius: 30px;
  display: flex;
  align-items: center;
  padding-left: 20px;
  margin: 4%;
  margin-top: 0;
  margin-bottom: 0;
  transition: all 0.3s ease 0s;
}

.box input {
  background-color: transparent;
  flex-grow: 1;
  height: 40px;
  border: none;
  outline: none;
  font-size: 14px;
}

.nav-search-btn {
  background: none;
  border: none;
  line-height: 1em;
  -webkit-border-radius: 0 2px 2px 0;
  width: 42px;
  height: 42px;
  border-radius: 0 2px 0;
  right: 0;
  top: 0;
  bottom: 0;
  cursor: pointer;
  background-color: transparent;
  box-shadow: none;
}

<nav id="navbarxd">
  <a href="#" class="logo">
    <img src="https://images.unsplash.com/photo-1429704658776-3d38c9990511?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2279&q=80" alt="">
  </a>

  <div class="box">
    <input type="text" name="" placeholder="Buscar productos, marcas, etc.">
    <button type="submit" class="nav-search-btn"><i class="bi-search" style="color: #AAAAAA;"></i></button>
  </div>

  <ul class="nav-links">
    <li>
      <a href="#">Iniciar Sesión</a>
    </li>
    <li>
      <a href="#">Registrarse</a>
    </li>
  </ul>

  <div class="burger">
    <div class="line1"></div>
    <div class="line2"></div>
    <div class="line3"></div>
  </div>
</nav>

Feel free to play further with the solution here on codepen

Caveat

When you get to smaller screen sizes other elements in the nav will start to cause overflow issues again, you may wish to look at responsive design

Please signup or login to give your own answer.

Click here to cancel reply.

Html – My navbar is overflowing wide, What is the problem?

Answers

The problem

Simple solution

Caveat