CODEWITHSUNDEEP
htmlcssnavigationbar
cerberus99
cerberus99

Reputation: 159

HTML - Formatting Horizontal Navigation Bar

I am having difficulties to format the navigation bar. I want the width to be in a fixed size and also the blocks to be properly in equal sizes. I may solve this by adjusting the padding size in CSS file but it will not have the standard size when the webpage is displayed on various sizes of computer screen. Need help on this.

body {
  background-color: linen;
  margin: 0;
}


/*Strip the ul of padding and list styling*/

ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}


/*Create a horizontal list with spacing*/

ul.topnav li {
  float: left;
}

ul.topnav li a,
.dropbtn {
  display: block;
  color: white;
  text-align: center;
  padding: 20px 200px;
  text-decoration: none;
}

ul.topnav li a:hover,
.dropdown:hover .dropbtn {
  background-color: red;
}

ul.topnav li.dropdown {
  display: inline-block;
}

ul.topnav .dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

ul.topnav .dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

ul.topnav .dropdown-content a:hover {
  background-color: #f1f1f1
}

ul.topnav .dropdown:hover .dropdown-content {
  display: block;
}
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Importing CSS file-->

<head>
  <link rel="stylesheet" href="home.css">
</head>
<!--End of import-->

<body>

  <ul class="topnav">
    <li><a class="active" href="home.html">Home</a></li>
    <li class="dropdown">
      <a href="javascript:void(0)" class="dropbtn">VCT Operation</a>
      <div class="dropdown-content">
        <a href="mainFrame.asp">Conduct Operation</a>
        <a href="report.asp">View Reports</a>
      </div>
    </li>
    <li><a href="contact.html">Contact</a></li>
  </ul>

</body>

</html>

Upvotes: 1

Views: 155

Answers (2)

Ovidiu Unguru
Ovidiu Unguru

Reputation: 756

I added a display:flex to ul.topnav , but make sure you use a media query, so you can give the display at the resolution you want. Reason why i added the display:flex is so i can align them in a column.

@media (max-width:760px) {
  ul.topnav {
    display: flex;
    flex-direction: column;
  }

}

You can also add a width and another padding to ul.topnav li a , so that every a have the same width.

@media (max-width:760px) {
  ul.topnav li a {
    width: 46%;
    padding:20px 20px 20px 103px;
    text-align: left;
  }
}

Example: ( change the resolution to 760px )

https://jsfiddle.net/fzy7cysf/1/

Upvotes: 2

lalit bhakuni
lalit bhakuni

Reputation: 627

remove padding in a tag add width:100% and padding 10px 0 : li width will be '33.3%` 

ul.topnav li { width:33.3%;}
ul.topnav li a { display:inline-block; width:100%; padding:12px 0;}

Upvotes: 0

Related Questions