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

Html – How to re-position all the icons in navbar to middle

* {
  padding : 0;
  margin  : 0;
  }
nav {
  padding          : 20px;
  background-color : #809906;
  list-style       : none;
  border-bottom    : 2px solid black;
  }
a {
  color         : black;
  padding-right : 115px;
  }
a:hover {
  color         : hotpink;
  }
<script src="https://kit.fontawesome.com/b75e3e30ff.js" crossorigin="anonymous"></script>


<nav>
  <a href="#" style="padding-left: 5px;"><i class="fa-solid fa-bars"></i></a>
  <a href="#"><i class="fa-solid fa-house"></i></a>
  <a href="#"><i class="fa-solid fa-user"></i></a>
  <a href="#"><i class="fa-solid fa-magnifying-glass"></i></a>
  <a href="#"><i class="fa-solid fa-cart-shopping"></i></a>
</nav>

I tried various methods like flexbox to center the icons in navbar but it didn’t work. I am trying to position all the icons to the center of the navbar. I am new in this filed.

Tags:

2

Answers


  1. 0

    Flexbox is perfect for nav bars.

    nav {
  padding: 20px;
  background-color: #809906;
  border-bottom: 2px solid black;
  display: flex;
  justify-content: center;
  gap: 1em;
}

a {
  color: black;
}

a:hover {
  color: hotpink;
}
    <script src="https://kit.fontawesome.com/b75e3e30ff.js" crossorigin="anonymous"></script>

<nav>
  <a href="#"><i class="fa-solid fa-bars"></i></a>
  <a href="#"><i class="fa-solid fa-house"></i></a>
  <a href="#"><i class="fa-solid fa-user"></i></a>
  <a href="#"><i class="fa-solid fa-magnifying-glass"></i></a>
  <a href="#"><i class="fa-solid fa-cart-shopping"></i></a>
</nav>
    Login or Signup to reply.
  2. 0

    Set the Navbar to Use Flexbox:
    Use display: flex to make the a flex container.
    Use justify-content: center to center the flex items (the icons) horizontally.

    Adjust Padding and Margin:
    Adjust the padding and margin for the elements as needed to ensure they are evenly spaced.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Center Navbar Icons</title>
    <script src="https://kit.fontawesome.com/b75e3e30ff.js" crossorigin="anonymous"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        nav {
            padding: 20px;
            background-color: #809906;
            list-style: none;
            border-bottom: 2px solid black;
            display: flex;
            justify-content: center;
        }
        a {
            color: black;
            padding: 0 20px;
            text-decoration: none; /* Added to remove underline */
        }
        a:hover {
            color: hotpink;
        }
    </style>
</head>
<body>

<nav>
    <a href="#" style="padding-left: 5px;"><i class="fa-solid fa-bars"></i></a>
    <a href="#"><i class="fa-solid fa-house"></i></a>
    <a href="#"><i class="fa-solid fa-user"></i></a>
    <a href="#"><i class="fa-solid fa-magnifying-glass"></i></a>
    <a href="#"><i class="fa-solid fa-cart-shopping"></i></a>
</nav>

</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search