Does br tag work even if i put line height

Admin 1
Viewed 64

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" class="title">Logo</a>
    </h1>
    <span class="menu-btn">
        <input type="checkbox" id="nav-button">
        <label for="nav-button">&#9776;</label>
      </span><br style="display: block;">
    <div class="nav-links">
      <a href="#" class="active">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

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

css html
2 Answers

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 class="container">
  <h1>&nbsp; <a href="css.html" class="title">Logo</a>
  </h1>
  <nav>
    <span class="menu-btn">
        <input type="checkbox" id="nav-button">
        <label for="nav-button">&#9776;</label>
      </span>
    <div class="nav-links">
      <a href="#" class="active">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>

user_170071840

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" class="title">Logo</a>
    </h1>
    <span class="menu-btn">
        <input type="checkbox" id="nav-button">
        <label for="nav-button">&#9776;</label>
    </span>
    <br />

    <div class="nav-links">
        <a href="#" class="active">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>

user_90902630
Related