1

I have a simple html page with a fixed navbar at the top. The links are centered when the webpage is viewed in full-screen mode but when the page size is reduced, it collapses to a toggle button which is positioned on the left side. What I would like to achieve is to align the toggle button and the dropdown links at the right end of the page. I am using a local copy of Bootstrap 5. I still want to view the link items at the center when I view the page is full screen mode.

How can I achieve this? I tried a few options such as navbar-toggler-right but it didn't help.

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Bootstrap 5 - Test Navbar Page</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Testing Navbar">
  <meta name="keywords" content="bootstrap5,html">
  <meta name="author" content="Bootstrap 5">
  <!-- Bootstrap 5 -->
  <link rel="stylesheet" href="css/bootstrap.min.css"></link>
 </head>
 <body>
  <nav class="navbar navbar-expand-sm bg-light navbar-light fixed-top">
   <!-- Toggler/collapsibe Button -->
   <button class="navbar-toggler ms-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle Navigation">
    <span class="navbar-toggler-icon"></span>
   </button>
   <div class="navbar-collapse collapse justify-content-center" id="navbarCollapse">
    <ul class="navbar-nav ms-2">
     <li class="nav-item">
      <a class="nav-link" href="#">Resources</a>
     </li>
     <li>
      <a class="nav-link" href="#">Contact</a>
     </li>
     <li>
      <a class="nav-link" href="#">Login</a>
     </li>
     <li>
      <form action="#">
       <input type="submit" class="btn btn-warning" value="Register">
      </form>
     </li>
    </ul>
   </div>
  </nav>
  <!-- Bootstrap 5 -->
  <script src="js/bootstrap.bundle.min.js"></script>
 </body>
</html>

Current Full Page View

enter image description here

Current Collapsed View

enter image description here

Shoumik Das
  • 441
  • 5
  • 16

2 Answers2

4

There are many ways to approach this, but I think align-items-end is the simplest. Also, make sure you're using a container.

<nav class="navbar navbar-expand-sm bg-light navbar-light fixed-top">
    <!-- Toggler/collapsibe Button -->
    <div class="container-fluid">
        <button class="navbar-toggler ms-auto ms-sm-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle Navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse collapse justify-content-center" id="navbarCollapse">
            <ul class="navbar-nav ms-2 align-items-end">
                <li class="nav-item">
                    <a class="nav-link" href="#">Resources</a>
                </li>
                <li>
                    <a class="nav-link" href="#">Contact</a>
                </li>
                <li>
                    <a class="nav-link" href="#">Login</a>
                </li>
                <li>
                    <form action="#">
                        <input type="submit" class="btn btn-warning" value="Register">
                    </form>
                </li>
            </ul>
        </div>
    </div>
</nav>

Demo

Also see: Bootstrap 5 navbar align items right

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
0

Here, you are missing the brand. Include it appropriately. Below is sample for the same...

<nav class="navbar navbar-expand-sm bg-light navbar-light fixeds-top">
    <div class="container">
<!-- Include this brand section -->
         <a class="navbar-brand" href="lorem.php">
            <img src="../images/icon.png" alt="" width="30" height="30" class="d-inline-block align-top">
            Brand
        </a>
       
   <button class="navbar-toggler ms-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle Navigation">
    <span class="navbar-toggler-icon"></span>
   </button>
   <div class="navbar-collapse collapse justify-content-center" id="navbarCollapse">
<!-- code here -->
</div>
Methuselah Rodger
  • 188
  • 1
  • 5