Does br tag work even if i put line height-CodePudding

Hey in my code the Br tag aka break line tag is not working. Here is the code:

* {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
}

nav {
  background: black;
  color: white;
  height: 76px;
  line-height: 76px;
  color: white;
}

a {
  color: white;
  text-decoration: none;
}

#nav-button,
label {
  display: none;
}

@media only screen and (max-width: 600px) {
  .nav-links {}
  nav {
    height: 200px !important;
  }
  nav:not(".nav-links") {
    line-height: 76px !important;
  }
  label {
    display: block;
    padding: 0px 10px;
    font-size: 30px;
    cursor: pointer;
    color: black;
  }
  .menu-btn,
  label {
    display: inline;
    color: white !important;
  }
  .menu-btn {
    position: absolute;
    right: 4px;
  }
  nav {
    display: flex;
  }
  ul,
  li {
    list-style-type: none;
  }
}

@media(min-width: 600px) {
  ul {
    display: none;
  }
  nav {
    display: flex;
    justify-content: space-between;
  }
  .nav-links a {
    transition: .2s ease-in-out;
    font-size: 20px;
    padding: 7px 13px;
  }
  .nav-links a:hover,
  .nav-links .active {
    background: white;
    color: black;
    border-radius: 12px;
  }
}

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

<head>
  <meta charset="UTF-8">
  <title>Page title</title>
  <link rel="stylesheet" href="css.css">
  </link>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="css.js"></script>
  <script src="https://kit.fontawesome.com/e8f9edfb9f.js" crossorigin="anonymous"></script>
</head>

<body>
  <nav>
    <h1>&nbsp; <a href="css.html" >Logo</a>
    </h1>
    <span >
        <input type="checkbox" id="nav-button">
        <label for="nav-button">&#9776;</label>
      </span><br style="display: block;">
    <div >
      <a href="#" >Item 1</a>&nbsp;&nbsp; <a href="#">Item 2</a>&nbsp;&nbsp; <a href="#">Item 3</a>&nbsp;&nbsp; <a href="#">Item 4</a>&nbsp;&nbsp;
    </div><br>
  </nav>
</body>

</html>

and I also have display block to br tag and also other online solution but that did not work and you don't have to worry about the desktop version. Here are some images Desktop Navbar

Mobile navbar

⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀ ⠀

CodePudding user response：

Since you used flex for nav, so br tag does not make a broken line. you can remove br and take it out h1 of nav, thus making a broken line after h1:

* {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
}

.container { /*here*/
  background: black;
}

nav {
  color: white;
  height: 76px;
  line-height: 76px;
  color: white;
}

a {
  color: white;
  text-decoration: none;
}

#nav-button,
label {
  display: none;
}

@media only screen and (max-width: 600px) {
  .nav-links {}
  nav {
    height: 200px !important;
  }
  nav:not(".nav-links") {
    line-height: 76px !important;
  }
  label {
    display: block;
    padding: 0px 10px;
    font-size: 30px;
    cursor: pointer;
    color: black;
  }
  .menu-btn,
  label {
    display: inline;
    color: white !important;
  }
  .menu-btn {
    position: absolute;
    right: 4px;
  }
  nav {
    display: flex;
  }
  ul,
  li {
    list-style-type: none;
  }
}

@media(min-width: 600px) {
  ul {
    display: none;
  }
  nav {
    display: flex;
    justify-content: space-between;
  }
  .nav-links a {
    transition: .2s ease-in-out;
    font-size: 20px;
    padding: 7px 13px;
  }
  .nav-links a:hover,
  .nav-links .active {
    background: white;
    color: black;
    border-radius: 12px;
  }
}

<div >
  <h1>&nbsp; <a href="css.html" >Logo</a>
  </h1>
  <nav>
    <span >
        <input type="checkbox" id="nav-button">
        <label for="nav-button">&#9776;</label>
      </span>
    <div >
      <a href="#" >Item 1</a>&nbsp;&nbsp; <a href="#">Item 2</a>&nbsp;&nbsp; <a href="#">Item 3</a>&nbsp;&nbsp; <a href="#">Item 4</a>&nbsp;&nbsp;
    </div><br>
  </nav>
</div>

CodePudding user response：

You can try removing the inline style property from
tag and that works fine because I noticed the change with and without br in the navbar.

* {
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
}

nav {
    background: black;
    color: white;
    height: 76px;
    line-height: 76px;
    color: white;
}

a {
    color: white;
    text-decoration: none;
}

#nav-button,
label {
    display: none;
}

@media only screen and (max-width: 600px) {

    nav {
        height: 200px !important;
    }

    nav:not(".nav-links") {
        line-height: 76px !important;
    }

    label {
        display: block;
        padding: 0px 10px;
        font-size: 30px;
        cursor: pointer;
        color: black;
    }

    .menu-btn,
    label {
        display: inline;
        color: white !important;
    }

    .menu-btn {
        position: absolute;
        right: 4px;
    }

    nav {
        display: flex;
    }

    ul,
    li {
        list-style-type: none;

    }

}

@media(min-width: 600px) {
    ul {
        display: none;
    }

    nav {
        display: flex;
        justify-content: space-between;
    }

    .nav-links a {
        transition: .2s ease-in-out;
        font-size: 20px;
        padding: 7px 13px;
    }

    .nav-links a:hover,
    .nav-links .active {
        background: white;
        color: black;
        border-radius: 12px;
    }
}

<meta name="viewport" content="width=device- 
width, initial-scale=1.0" />
<script src="https://kit.fontawesome.com/e8f9edfb9f.js" crossorigin="anonymous"></script>
 
<nav>
    <h1>&nbsp; <a href="css.html" >Logo</a>
    </h1>
    <span >
        <input type="checkbox" id="nav-button">
        <label for="nav-button">&#9776;</label>
    </span>
    <br />

    <div >
        <a href="#" >Item1</a>
        &nbsp;
        &nbsp;
        <a href="#">Item 2</a>&nbsp;&nbsp;
        <a href="#">Item 3</a>&nbsp;&nbsp;
        <a href="#">Item 4</a>&nbsp;&nbsp;
    </div><br>
</nav>