<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <nav class="navbar navbar-expand-lg navbar-light bg-light custom-navbar" id="custom-navbar"> <div class="container-fluid"> <!-- Logo --> <a class="navbar-brand" href="#"> Logo </a> <!-- Hamburger icon for small devices --> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation"> <div class="navbar-toggler-icon"></div> </button> <!-- User details for small devices (right side) --> <!-- <div class="d-lg-none ms-auto"> <span class="navbar-text me-2">Hello, User</span> </div> --> <!-- User details for larger devices (right side) --> <div class="d-lg-none ms-auto text-end float-end"> <span class="navbar-text me-2"> Welcome, User</span> </div> <!-- Collapsible menu --> <div class="collapse navbar-collapse" id="navbarContent"> <!-- Nav items --> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle font-grey font-15 fw-bold" href="#" id="navItem1" role="button" data-bs-toggle="dropdown" aria-expanded="false">Submit Request</a> <ul class="dropdown-menu" aria-labelledby="navItem1"> <li><a class="dropdown-item" href="#">SUB LEVEL 1</a></li> <li><a class="dropdown-item" href="#">Sub Item 2</a></li> <!-- <li class="dropdown-submenu"> <a class="dropdown-item dropdown-toggle" href="#">Session request <i class="fa fa-caret-right float-end mt-1" aria-hidden="true"></i></a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Create Request</a></li> <li><a class="dropdown-item" href="#">Modify Request</a></li> </ul> </li> --> </ul> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle font-grey font-15 fw-bold" href="#" id="navItem2" role="button" data-bs-toggle="dropdown" aria-expanded="false">Services</a> <ul class="dropdown-menu" aria-labelledby="navItem2"> <li><a class="dropdown-item" href="#">Sub Item 1</a></li> <li><a class="dropdown-item" href="#">Sub Item 2</a></li> </ul> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle font-grey font-15 fw-bold" href="#" id="navItem4" role="button" data-bs-toggle="dropdown" aria-expanded="false">Learning</a> <ul class="dropdown-menu" aria-labelledby="navItem4"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> </ul> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle font-grey font-15 fw-bold" href="#" id="navItem5" role="button" data-bs-toggle="dropdown" aria-expanded="false">FAQs</a> <ul class="dropdown-menu" aria-labelledby="navItem5"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> </ul> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle font-grey font-15 fw-bold" href="#" id="navItem3" role="button" data-bs-toggle="dropdown" aria-expanded="false">Site Contents</a> <ul class="dropdown-menu" aria-labelledby="navItem3"> <li><a class="dropdown-item" href="#">Sub Item 1</a></li> <li><a class="dropdown-item" href="#">Sub Item 2</a></li> </ul> </li> </ul> <!-- User details for larger devices (right side) --> <form class="d-flex justify-content-end align-items-center text-end display-sm-none ms-auto"> <span class="me-4 font-12">Welcome, User</span> </form> </div> </div> </nav> <div class="bottomBanner"></div>

@media (max-width: 1068px) { .userIcon { width: 15%; height: 15%; } .display-sm-none { display: none!important; } } /* Navbar hover behavior for larger devices */ @media (min-width: 992px) { .navbar-nav .nav-item:hover .dropdown-menu { display: block; } .dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; } } /* Hamburger icon styles */ .navbar-toggler { border: none; outline: none; } .navbar-toggler .navbar-toggler-icon { display: inline-block; width: 30px; height: 2px; background-color: #333; position: relative; transition: all 0.3s ease-in-out; } .navbar-toggler .navbar-toggler-icon::before, .navbar-toggler .navbar-toggler-icon::after { content: ''; display: block; width: 100%; height: 2px; background-color: #333; position: absolute; transition: all 0.3s ease-in-out; } .navbar-toggler .navbar-toggler-icon::before { top: -10px; } .navbar-toggler .navbar-toggler-icon::after { top: 10px; } /* Transform hamburger into cross when expanded */ .navbar-toggler.collapsed .navbar-toggler-icon { background-color: transparent; } .navbar-toggler.collapsed .navbar-toggler-icon::before { transform: rotate(45deg); top: 0; } .navbar-toggler.collapsed .navbar-toggler-icon::after { transform: rotate(-45deg); top: 0; } /* Style for expanded content to prevent overflow */ .navbar-collapse ul { padding-left: 0; } .dropdown-menu { display: none; } .dropdown-menu.show { display: block; } /* Adjustments for sub-dropdowns */ .dropdown-submenu .dropdown-menu { position: absolute; left: 100%; top: 0; } .nav-item.dropdown { margin-right: 15px; } .navbar-toggler:focus { box-shadow: 0px 0px 0px transparent; } .nav-item a { text-transform: capitalize !important; } .custom-navbar .dropdown-item { color: #333!important; } .custom-navbar .dropdown-item:focus, .custom-navbar .dropdown-item:hover, .custom-navbar .dropdown-item:active { background-color: #9bdacc; }