Navigation menu falls inside of itself when changing browser size

Question

When I attempt to alter the browser size, the navigation menu sort of "falls" into itself, if that makes sense. I'm not entirely sure what is causing this.

I've tried max-width and sometimes even adding the ="wrapper" in a div messes this up.

@font-face {
  src: url(fonts/Modric.ttf);
  font-family: Modric;
}

@font-face {
  src: url(fonts/Orkney-Regular.ttf);
  font-family: Orkney;
}

@font-face {
  src: url(fonts/Made-Bon-Voyage.otf);
  font-family: Made-Bon-Voyage;
}

* {
  box-sizing: border-box;
}

body {
  background-color: #262c2c;
}

.navbar {
  max-width: 75%;
  height: 100px;
  margin-right: auto;
  margin-left: auto;
}

.navbar a {
  float: left;
  padding: 40px;
  background-color: #262c2c;
  text-decoration: none;
  font-size: 25px;
  width: 25%;
  /* Four links of equal widths */
  text-align: center;
  color: #dae1e7;
  font-family: Orkney;
}

h1 {
  text-align: center;
  font-family: Orkney;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  opacity: 50%;
  margin-left: auto;
  margin-right: auto;
}

#wrapper {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding-right: 50px;
  padding-left: 50px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="navigation.css">
  <title>Pasetta Studios</title>
</head>

<body>

  <div id="wrapper">
    <div class="navbar">
      <a href="#index.html">Home</a>
      <a href="#about.html">About</a>
      <a href="#projects.html">Projects</a>
      <a href="#contact.html">Contact</a>
    </div>


    <img src="images/top-image.jpg" alt="plants">
    <img src="images/second-image.jpg" alt="benches">
    <img src="images/third-image.jpg" alt="cactus">
    <img src="images/last-image.jpg" alt="more cactus">
    <img src="images/pasetta-studios" alt="pasetta studios">

    <code>Designed by Pasetta Studios. Built by Abraham.</code>


  </div>
</body>

</html>

thordarson · Answer 1 · 2021-04-13T10:52:02.707

As you said in a comment, removing the padding on the links fixed the problem. What happened is that once the element became smaller than 100px (2x50px padding) it stopped getting smaller and wrapped (what you're describing is called wrapping in CSS) to the next line. A padding is redundant anyway since you're centering the text.

I added an overflow: hidden to .navbar to make it wrap around the floated links.

I also added an outline to everything inside body to make the elements easier to see for demonstration/development purposes. This can also be achieved by using the F12 developer tools in your browser.

body * {
outline: 1px solid red;
}

body {
  background-color: #262c2c;
}

.navbar {
  max-width: 75%;
  height: 100px;
  margin: auto;
  overflow: hidden;
}

.navbar a {
  float: left;
  padding: 40px 0;
  background-color: #262c2c;
  text-decoration: none;
  font-size: 25px;
  width: 25%;
  /* Four links of equal widths */
  text-align: center;
  color: #dae1e7;
}
#wrapper {
  max-width: 1000px;
  margin: auto;
  padding: 0 50px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="navigation.css">
  <title>Pasetta Studios</title>
</head>

<body>

  <div id="wrapper">
    <div class="navbar">
      <a href="#index.html">Home</a>
      <a href="#about.html">About</a>
      <a href="#projects.html">Projects</a>
      <a href="#contact.html">Contact</a>
    </div>
  </div>
</body>

</html>

If you're learning, this is a great start if not a tiny bit outdated. Most people would use a flexbox nowadays which looks like this:

body * {
outline: 1px solid red;
}

body {
  background-color: #262c2c;
}

.navbar {
  margin: auto;
  max-width: 75%;
  
  /* Added: */
  display: flex;
}

.navbar a {
  background-color: #262c2c;
  text-decoration: none;
  font-size: 25px;
  /* Four links of equal widths */
  text-align: center;
  color: #dae1e7;
  
  /* Added: */
  line-height: 100px; /* Effectively centers the text vertically. */
  flex: 1; /* Tells the links to expand horizontally. */
}

#wrapper {
  max-width: 1000px;
  margin: auto;
  padding: 0 50px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="navigation.css">
  <title>Pasetta Studios</title>
</head>

<body>

  <div id="wrapper">
    <div class="navbar">
      <a href="#index.html">Home</a>
      <a href="#about.html">About</a>
      <a href="#projects.html">Projects</a>
      <a href="#contact.html">Contact</a>
    </div>
  </div>
</body>

</html>

Navigation menu falls inside of itself when changing browser size

1 Answers1