Clever Geek Handbook

What am I doing wrong in building the horizontal navigation bar?

Trying to create a simple navigation bar in html / css for a java / spring boot project. As you can see below, my html / css skills are very limited. Of course this is what I am doing stupidly. Thanks in advance.

HTML:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Title</title>
    <link href="styles.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<header> Welcome to Toner Stock </header>
    <div id="mynav">
        <ul>
            <li><a href="home-page.html">Home</a></li>
            <li><a href="add-buyer.html">Add Buyer</a></li>
            <li><a href="add-manager.html">Add Manager</a></li>
            <li><a href="current-stock.html">Current Stock</a></li>
            <li><a href="transactions.html">Transactions</a></li>
        </ul>
    </div>
</body>
</html>

CSS

header{
font-family: Impact, Haettenschweiler;
font-size: 45px;
text-align: center;
}

#mynav {
  float: left;
  margin: 0;
  padding: 0;
  width: 60px;
}

#mynav ul{

    display: inline-block;
   list-style-type: none;
   height:auto;
   text-align: center;
}

#mynav li{
    display:inline-block;
}
+3


source to share


2 answers


The navbar (menu) can use something like this:

remove underline link: text-decoration: none;

to make the navbar display the entire item in a row, remove width

from#mynav 



header {
  font-family: Impact, Haettenschweiler;
  font-size: 45px;
  text-align: center;
}

#mynav {
  float: left;
  margin: 0;
  padding: 0;
}

#mynav ul {
  display: inline-block;
  list-style-type: none;
  height: auto;
  text-align: center;
}

#mynav li {
  display: inline-block;
  padding: 5px;
}

#mynav li a {
  text-decoration: none;
}

#mynav li:hover {
  background: lightgray;
}
      

        
        
        
      

    
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
  <title>Title</title>
  <link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <header> Welcome to Toner Stock </header>
  <div id="mynav">
    <ul>
      <li><a href="home-page.html">Home</a></li>
      <li><a href="add-buyer.html">Add Buyer</a></li>
      <li><a href="add-manager.html">Add Manager</a></li>
      <li><a href="current-stock.html">Current Stock</a></li>
      <li><a href="transactions.html">Transactions</a></li>
    </ul>
  </div>
</body>

</html>
Run code


0


source


You are setting the width of the navbar so small.

try this:



#mynav {
  float: left;
  margin: 0;
  padding: 0;
}
0


source






More articles:


All Articles