CODEWITHSUNDEEP
htmlcss
user17839296
user17839296

Reputation:

Does br tag work even if i put line height

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

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

Upvotes: 2

Views: 74

Answers (2)

Arman Ebrahimi
Arman Ebrahimi

Reputation: 2297

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>

Upvotes: 1

Vibhor Goyal
Vibhor Goyal

Reputation: 110

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>

Upvotes: 0

Related Questions