navbar spacing using HTML, CSS and Bootstrap

Question

I have the following code:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<nav class="navbar navbar-expand-lg">
  <div class="container-fluid">
    <a class="navbar-brand" href="#"><img src="./images/kiratina_logo.png" alt="logo" /></a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav mr-auto">
        <!-- Use mr-auto here -->
        <li class="nav-item">
          <a class="nav-link" href="#">Why Water</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Our Work</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About Us</a>
        </li>
      </ul>
      <ul class="navbar-nav ml-auto">
        <!-- Use ml-auto here -->
        <li class="nav-item">
          <a class="nav-link" href="#">Donate</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

am trying to center the logo on the navbar but am stack here at the list because I want to create a space between the ul class navbar-nav mr-auto and the ul class navbar-nav ml-auto, how can I go about it because am really stack and I need the navbar complete like yesterday.

Hi! If you could add the CSS and make it runnable/add an image, it would be much nicer for us to be able to solve this. Thanks! — SuspenseFallback
– SuspenseFallback, Commented Nov 12, 2023 at 11:42
Please check this answer and let me know if it is useful or needs changes. Thanks! — Razvan Zamfir
– Razvan Zamfir, Commented Feb 1, 2024 at 10:51

Razvan Zamfir · Accepted Answer · 2024-02-01 10:49:43Z

If you want the navigation items and logo centered only on desktop:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<nav class="navbar navbar-expand-lg">
  <div class="container-fluid">
    
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
    <a class="navbar-brand" href="#"><img src="./images/kiratina_logo.png" alt="logo" /></a>
      <ul class="navbar-nav">
        <!-- Use mr-auto here -->
        <li class="nav-item">
          <a class="nav-link" href="#">Why Water</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Our Work</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About Us</a>
        </li>
      </ul>
      <ul class="navbar-nav ml-auto">
        <!-- Use ml-auto here -->
        <li class="nav-item">
          <a class="nav-link" href="#">Donate</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Centered on mobile too:

.navbar-brand {
  display: block;
  text-align: center;
}

.nav-item {text-align: center;}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<nav class="navbar navbar-expand-lg">
  <div class="container-fluid">

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
      <a class="navbar-brand" href="#"><img src="./images/kiratina_logo.png" alt="logo" /></a>
      <ul class="navbar-nav">
        <!-- Use mr-auto here -->
        <li class="nav-item">
          <a class="nav-link" href="#">Why Water</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Our Work</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About Us</a>
        </li>
      </ul>
      <ul class="navbar-nav ml-auto">
        <!-- Use ml-auto here -->
        <li class="nav-item">
          <a class="nav-link" href="#">Donate</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

You can add a margin to the right of the navbar-brand element as much as you need in order to create space between logo and navigation.

Collectives™ on Stack Overflow

navbar spacing using HTML, CSS and Bootstrap

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related