Viewing File: /home/ubuntu/bytecollar-landing-ui/header.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>Header</title>
</head>
<body>
<header class="header-nav-center">
<nav class="navbar navbar-expand-lg">
<div class="container">
<a class="navbar-brand" href="/">
<picture>
<source class="lazyload blur-up logo-head" type="image/webp" srcset="assets/images/logo.png">
<img data-src="assets/images/logo.png" type="image/png" class="lazyload blur-up logo-head" alt="logo">
</picture>
</a>
<div class="collapse navbar-collapse " id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/">Home</a>
</li>
<!-- <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
Our Services
</a>
<ul class="dropdown-menu dropdown-menu-dark">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li> -->
<li class="nav-item">
<a class="nav-link" href="/#about-us">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/#our-services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="faq">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact-us">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="moblie-nav">
<nav class="navbar navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/">
<picture>
<source class="lazyload blur-up logo-head" type="image/webp" srcset="assets/images/logo.png">
<img data-src="assets/images/logo.png" type="image/png" class="lazyload blur-up logo-head" alt="logo">
</picture>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar"
aria-controls="offcanvasDarkNavbar">
<picture>
<source class="lazyload blur-up menu-moblie" type="image/webp" srcset="assets/images/object/moblie-menu.svg">
<img data-src="assets/images/object/moblie-menu.svg" type="image/png" class="lazyload blur-up menu-moblie" alt="Menu">
</picture>
</button>
<div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar"
aria-labelledby="offcanvasDarkNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">
<picture>
<source class="lazyload blur-up logo-head" type="image/webp" srcset="assets/images/logo.png">
<img data-src="assets/images/logo.png" type="image/png" class="lazyload blur-up logo-head" alt="logo">
</picture>
</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"
aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/#about-us">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/#our-services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="faq">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact-us">Contact Us</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
<script>
// (function ($) {
// $('.dropdown').mouseover(function () {
// if ($('.navbar-toggler').is(':hidden')) {
// $(this).addClass('show').attr('aria-expanded', 'true');
// $(this).find('.dropdown-menu').addClass('show');
// }
// }).mouseout(function () {
// if ($('.navbar-toggler').is(':hidden')) {
// $(this).removeClass('show').attr('aria-expanded', 'false');
// $(this).find('.dropdown-menu').removeClass('show');
// }
// });
// })(jQuery)
$(".nav-link").click(function() {
$(".nav-link").removeClass("active");
$(this).addClass("active");
});
</script>
</body>
</html>
Back to Directory
File Manager