|
Bootstrap Navbar Tutorial style custom JS and CSS
<![CDATA[<!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 rel="nofollow" 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 rel="nofollow" class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a rel="nofollow" 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 rel="nofollow" class="dropdown-item" href="#">Action</a></li>
<li><a rel="nofollow" class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider" /></li>
<li>
<a rel="nofollow" class="dropdown-item" href="#">Something else here</a>
</li>
</ul>
</li>
<li class="nav-item">
<a rel="nofollow" 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 rel="nofollow" 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>
]]>
|
