Breaking News: Grepper is joining You.com. Read the official announcement!

Bootstrap Navbar Tutorial style custom JS and CSS

Depressed Dragonfly answered on January 23, 2022 Popularity 1/10 Helpfulness 1/10

answer Bootstrap Navbar Tutorial style custom JS and CSS

Bootstrap Navbar Tutorial style custom JS and CSS

Comment

<!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" />
    <!-- Font Awesome -->
    <script
      src="https://kit.fontawesome.com/6951010ac6.js"
      crossorigin="anonymous"
    ></script>
    <!-- Bootstrap Link -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />

    <!-- <link rel="stylesheet" href="css/bootstrap.css" /> -->
    <title>Document</title>
    <style>
      .form-control {
        position: absolute;
        top: 0;
        left: 0;
        width: 92%;
        height: 100%;
        margin-left: auto;
        margin-right: auto;
        background-color: #f8f9fa;
        border: none;
        box-shadow: none !important;
        font-size: 25px;
        font-weight: 700;
        display: none;
      }
      .form-control:focus {
        background-color: #f8f9fa;
      }
      #cross {
        display: none;
      }
      .fa-times {
        position: absolute;
        top: 40%;
        font-size: 25px;
        color: rgba(58, 56, 56, 0.459);
      }
      .search a {
        color: black;
      }
      .dropdown-menu.show {
        top: 60px;
      }
    </style>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light py-4">
      <div class="container">
        <a class="navbar-brand" href="#">Navbar</a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
            <li class="nav-item mx-3">
              <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
              <a
                class="nav-link dropdown-toggle"
                href="#"
                id="navbarDropdown"
                role="button"
                data-bs-toggle="dropdown"
                aria-expanded="false"
              >
                Dropdown
              </a>
              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><hr class="dropdown-divider" /></li>
                <li>
                  <a class="dropdown-item" href="#">Something else here</a>
                </li>
              </ul>
            </li>

            <li class="nav-item">
              <a class="nav-link disabled">Disabled</a>
            </li>
          </ul>
          <div class="d-flex justify-content-center align-items-center">
            <form class="d-flex">
              <input
                id="search-input"
                class="form-control me-2"
                placeholder="Search"
                aria-label="Search"
              />
            </form>
            <div class="search ms-3">
              <a href="javascript:void(0)" onclick="myFunction()"
                ><i class="fas fa-search" id="toggle"></i
              ></a>
            </div>
          </div>
        </div>
      </div>
    </nav>
    <script>
      function myFunction() {
        var x = document.getElementById("search-input");

        if (x.style.display === "block") {
          x.style.display = "none";
          document.getElementById("toggle").classList.remove("fa-times");
          document.getElementById("toggle").classList.add("fa-search");
        } else {
          x.style.display = "block";
          document.getElementById("toggle").classList.remove("fa-search");
          document.getElementById("toggle").classList.add("fa-times");
        }
      }
    </script>
    <!-- <script src="js/bootstrap.bundle.min.js"></script> -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

Popularity 1/10 Helpfulness 1/10 Language html

Source: Grepper

Tags: css html navbar

Link to this answer
Share Copy Link

Contributed on Jan 23 2022

Depressed Dragonfly

0 Answers Avg Quality 2/10

Bootstrap Navbar Tutorial style custom JS and CSS

Contents

More Related Answers

Bootstrap Navbar Tutorial style custom JS and CSS

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.