# Header Style 4

#### HTML

    <!-- Header START -->
    <header class="navbar-light navbar-sticky">
    <!-- Logo Nav START -->
    <nav class="navbar navbar-expand-lg">
    <div class="container">
    	<!-- Logo START -->
    	<a class="navbar-brand me-0" href="#">
    		<img class="light-mode-item navbar-brand-item" src="assets/images/logo.svg" alt="logo">
    		<img class="dark-mode-item navbar-brand-item" src="assets/images/logo-light.svg" alt="logo">
    	</a>
    	<!-- Logo END -->

    	<!-- Responsive navbar toggler -->
    	<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
    		<span class="navbar-toggler-animation">
    			<span></span>
    			<span></span>
    			<span></span>
    		</span>
    	</button>

    	<!-- Main navbar START -->
    	<div class="navbar-collapse collapse" id="navbarCollapse">

    		<!-- Nav Search END -->
    		<ul class="navbar-nav navbar-nav-scroll mx-auto">

    			<!-- Nav item 1 Home  -->
    			<li class="nav-item dropdown"> <a class="nav-link" href="#">Home </a></li>

    			<!-- Nav item 2 Pages -->
    			<li class="nav-item dropdown">
    				<a class="nav-link dropdown-toggle" href="#" id="pagesMenu" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Pages</a>
    				<ul class="dropdown-menu" aria-labelledby="pagesMenu">

    					<li> <a class="dropdown-item" href="#">Menu Item</a></li>
    					<!-- Dropdown submenu -->
    					<li class="dropdown-submenu dropend">
    						<a class="dropdown-item dropdown-toggle" href="#">Submenu Items</a>
    						<ul class="dropdown-menu dropdown-menu-start" data-bs-popper="none">
    							<li> <a class="dropdown-item" href="#">Submenu item 1</a></li>
    							<li> <a class="dropdown-item" href="#">Submenu item 2</a></li>
    						</ul>
    					</li>
    				</ul>
    			</li>

    			<!-- Nav item 3 Pages -->
    			<li class="nav-item dropdown"><a class="nav-link" href="#">Course</a></li>

    			<!-- Nav item 4 link-->
    			<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
    		</ul>
    	</div>
    	<!-- Main navbar END -->
    	<div class="navbar-nav ms-2">
    		<button class="btn btn-sm btn-dark mb-0"><i class="bi bi-power me-2"></i>Sign In</button>
    	</div>

    </div>
    </nav>
    <!-- Logo Nav END -->
    </header>
    <!-- Header END -->