Question 44309 in Html Question posted in
Some basic documentation can be found here.

Trying to learn the "making of navigation bar" – Html

I read some articles but couldn’t understand them clearly.
There are some things I want my navigation bar to have,

  1. The background color of the navigation bar shouldn’t have a gap above and on the sides
    enter image description here
  2. I want the elements to be in center but with a some gap between each other.
#nav_bar {
  background-color: aliceblue;
  padding: 14px 16px;
  width: 100%;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="main.css">
  <title>Product Landing Page</title>
</head>

<body>
  <nav id="nav_bar" class="nav_class">
    <a href="#welcome">Home</a>
    <a href="#product-info">Products</a>
    <a href="#product-pricing">Pricings</a>
    <a href="#about">About</a>
    <a href="#contact">Contact Us</a>
  </nav>

  <section class="welcome">
    <h1>Hello</h1>
  </section>
</body>

</html>

What are different ways to make a good navigation bar?

I have tried to read various articles from many websitA

Tags:

2

Answers


  1. 0 
    #nav_bar {
background-color: aliceblue;
padding: 14px 16px;
width: 100%;
display: flex;
justify-content: center;
column-gap: 30px;

    }

    i think this work

    Login or Signup to reply.
  2. 0

    The extra space is from body element’s default margins, you can reset it to 0:

    body {
  margin: 0;
}

    For the navigation, you can use flex to center it as well as giving some space between each item:

    #nav_bar {
  background-color: aliceblue;
  padding: 14px 16px;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}

    Here is an example with the above tweaks:

    body {
  margin: 0;
}

#nav_bar {
  background-color: aliceblue;
  padding: 14px 16px;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}
    <nav id="nav_bar" class="nav_class">
  <a href="#welcome">Home</a>
  <a href="#product-info">Products</a>
  <a href="#product-pricing">Pricings</a>
  <a href="#about">About</a>
  <a href="#contact">Contact Us</a>
</nav>

<section class="welcome">
  <h1>Hello</h1>
</section>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search