Bootstrap Snippet Navbar using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
    @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;
    }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Navbar"
Bootstrap 4.1.1 Snippet by kanikamadaan

Related: See More

Questions / Comments:

"Navbar" Bootstrap 4.1.1 Snippet by kanikamadaan

Related: See More

Questions / Comments:

"Navbar"
Bootstrap 4.1.1 Snippet by kanikamadaan