top navbar items background does not cover whole space, it covers only the text

I am trying to create a simple web page and I want the links’ background covers the whole space in navbar but it covers only the text around it.

My code is here:

.navbar {   width: 105%;   height: 5vw;   display: flex;   flex-direction: row;   background-color: #008083;   z-index: 10; }  .navbar ul {   list-style: none;   margin: 0;   padding: 0px;   overflow: hidden; }  .navbar li {   float: left; }  .navbar li a {   text-decoration: none;   color: black;   padding: 1px;   text-align: center; }  .tab {   width: 100%;   display: flex;   background-color: grey;   justify-content: center;   align-items: center;   margin: 1px; }
<nav class="navbar">   <ul>     <li><a href="#" class="tab">Biography</a></li>     <li><a href="#"> Novels</a> </li>     <li><a href="#"> Films </a></li>    </ul> </nav>

Any suggestions?

Add Comment
3 Answer(s)

You can remove the height from the navbar class so, it’ll take the available height. Also, you can add height to .navbar li (Optional, if you want to use some custom height).

.navbar {   width: 105%;   /*height: 5vw;*/   display: flex;   flex-direction: row;   background-color: #008083;   z-index: 10; }  .navbar ul {   list-style: none;   margin: 0;   padding: 0px;   overflow: hidden; }  .navbar li {   float: left;   /*height: 100%;(Optional)*/ }  .navbar li a {   text-decoration: none;   color: black;   padding: 1px;   text-align: center; }  .tab {   width: 100%;   display: flex;   background-color: grey;   justify-content: center;   align-items: center;   margin: 1px; }
<nav class="navbar">   <ul>     <li><a href="#" class="tab">Biography</a></li>     <li><a href="#"> Novels</a> </li>     <li><a href="#"> Films </a></li>    </ul> </nav>

Answered on September 1, 2020.
Add Comment

i don’t understand exact your problem but if your problem with the default margin and padding its a solution

 * {         padding: 0;         margin: 0;     }      .navbar {         width: 105%;         height: 5vw;         display: flex;         flex-direction: row;         background-color: #008083;         z-index: 10;     }      .navbar ul {         list-style: none;         margin: 0;         padding: 0px;         overflow: hidden;     }      .navbar li {         float: left;         /*height: 100%;(Optional)*/     }      .navbar li a {         text-decoration: none;         color: black;         padding: 1px;         text-align: center;     }      .tab {         width: 100%;         display: flex;         background-color: grey;         justify-content: center;         align-items: center;         margin: 1px;     }
<nav class="navbar">         <ul>             <li><a href="#" class="tab">Biography</a></li>             <li><a href="#"> Novels</a> </li>             <li><a href="#"> Films </a></li>          </ul>     </nav>

Answered on September 1, 2020.
Add Comment

I have removed some unnecessary style from your code & build this using CSS display: flex; instead of float. Now .tab is covering full height with background.

Here is the working example:

.navbar {   background-color: #008083;   z-index: 10; }  .navbar ul {   list-style: none;   margin: 0;   padding: 0;   overflow: hidden;   display: flex;   align-items: center; }  .navbar li {   margin: 0;   padding: 0; }  .navbar li a {   text-decoration: none;   color: black;   text-align: center;   padding: 10px;   display: block; }  .tab {   background-color: grey; }
<nav class="navbar">   <ul>     <li><a href="#" class="tab">Biography</a></li>     <li><a href="#"> Novels</a> </li>     <li><a href="#"> Films </a></li>   </ul> </nav>

Answered on September 1, 2020.
Add Comment

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.