Code HTML
<!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">
<title>Document</title>
<!-- Bootstrap CSS -->
<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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="header mt-5">
<div class="container">
<nav class='navbar navbar-expand-lg navbar-light bg-dark'>
<div class='container'>
<a class='navbar-brand text-white' href='#'>Navbar</a>
<button class='btn btn-dark text-white navbar-toggler border-3 px-2' type='button'
data-bs-toggle='offcanvas' data-bs-target='#offcanvasExample' aria-controls='offcanvasExample'>
<!-- <img style='width: 30px' src='image/text-center.svg' alt='menu icon'> -->
<i class="fa-solid fa-bars-staggered"></i>
</button>
<div class='offcanvas offcanvas-start-lg bg-dark' tabindex='-1' id='offcanvasExample'
aria-labelledby='offcanvasExampleLabel'>
<div class='offcanvas-header d-flex d-lg-none'>
<h5 class='offcanvas-title text-white' id='offcanvasExampleLabel'>Navbar</h5>
<a href='javascript:void(0) ' class='text-reset p-0' data-bs-dismiss='offcanvas'
aria-label='close'>
<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='#FFFFFF'
class='bi bi-x-circle' viewBox='0 0 16 16'>
<path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z' />
<path
d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z' />
</svg>
</a>
</div>
<div class='offcanvas-body p-lg-0'>
<ul class='navbar-nav'>
<li class='nav-item'>
<a class='nav-link active' aria-current='page' href='#'>Home</a>
</li>
<li class='nav-item'>
<a class='nav-link active' aria-current='page' href='#'>About</a>
</li>
<li class='nav-item'>
<a class='nav-link active' aria-current='page' href='#'>Skills</a>
</li>
<li class='nav-item'>
<a class='nav-link active' aria-current='page' href='#'>Contact</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</div>
<!-- Option 1: Bootstrap Bundle with Popper -->
<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>Code CSS
<style>
.header-top {
height: 50px;
}
/* .header {
background-color: rgb(230, 71, 71);
} */
/* .bg-danger{
background-color: rgb(230, 71, 71) !important;
} */
.navbar-nav li a {
color: white !important;
}
button {
border-color: transparent !important;
box-shadow: none !important;
outline: none !important;
}
@media (min-width: 992px) {
.offcanvas {
visibility: visible;
position: relative;
background: none;
border: none;
justify-content: end;
color: red;
}
}
@media (max-width: 992px) {
.offcanvas {
width: 250px !important;
}
.offcanvas-start-lg {
top: 0;
left: 0;
border-right: 1px solid rgba(0, 0, 0, 0.2);
transform: translateX(-100%);
}
}
/* Mobile Hidden */
@media (max-width: 756px) {
.mobile-hidden {
display: none;
}
}
</style>
Tags:
Blog