modify navbar: bring search bar to center in lg and added margin betw…

…een nav items
TBS96 · Jul 19, 2024 · eb2a701 · eb2a701
1 parent ba50093
commit eb2a701
Showing 1 changed file with 13 additions and 13 deletions.
diff --git a/index.html b/index.html
@@ -22,35 +22,35 @@
                     <span class="navbar-toggler-icon"></span>
                 </button>
                 <div class="collapse navbar-collapse" id="navbarSupportedContent">
-                    <ul class="navbar-nav ms-auto me-3 mb-2 mb-lg-0">
-                        <li class="nav-item">
+                    <form class="d-flex ms-auto" role="search">
+                        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
+                        <button class="btn btn-primary" type="submit">Search</button>
+                    </form>
+                    <ul class="navbar-nav ms-auto me-5 mb-2 mb-lg-0">
+                        <li class="nav-item mx-2">
                             <a class="nav-link active text-white" aria-current="page" href="#">Home</a>
                         </li>
-                        <li class="nav-item">
-                            <a class="nav-link active text-white" aria-current="page" href="#">Products</a>
+                        <li class="nav-item mx-2">
+                            <a class="nav-link text-white" aria-current="page" href="#">Products</a>
                         </li>
-                        <li class="nav-item">
-                            <a class="nav-link active text-white" aria-current="page" href="#">Contact Us</a>
+                        <li class="nav-item mx-2">
+                            <a class="nav-link text-white" aria-current="page" href="#">Contact Us</a>
                         </li>
-                        <li class="nav-item">
+                        <li class="nav-item mx-2">
                             <a class="nav-link text-white" href="#">Link</a>
                         </li>
-                        <li class="nav-item dropdown">
+                        <li class="nav-item dropdown me-3">
                             <a class="nav-link dropdown-toggle text-white" href="#" role="button" data-bs-toggle="dropdown"
                                 aria-expanded="false">Menu
                             </a>
-                            <ul class="dropdown-menu">
+                            <ul class="dropdown-menu bg-danger-subtle">
                                 <li><a class="dropdown-item" href="#">Action 1</a></li>
                                 <li><a class="dropdown-item" href="#">Action 2</a></li>
                                 <li><hr class="dropdown-divider"></li>
                                 <li><a class="dropdown-item" href="#">Action 3</a></li>
                             </ul>
                         </li>
                     </ul>
-                    <form class="d-flex" role="search">
-                        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
-                        <button class="btn btn-primary" type="submit">Search</button>
-                    </form>
                 </div>
             </div>
         </nav>