How can I construct my navbar to work properly?

Question

Basically, I have created a responsive navigation bar for my website. However, there is a problem I am having. When the user shrinks their browser size and clicks the hamburger on the side, the navbar does not work. To fix this, the user will have to refresh the page in order to click the hamburger to see the navbar on a shrinked size. I have tried to fix this but I do not know what is wrong. How can I make sure that the navbar works whenever the screen is decreased so the user will not have to refresh the page? Any help is appreciated. Here is my code below.

 $(document).ready(function () { if (window.matchMedia('(max-width: 767.98px)').matches) { $(".navbar-toggle").click(function () { $(".navbar-toggle").toggleClass("cross"); $("#navbarToggle").toggleClass("active"); $("body").toggleClass("overflow-hidden"); }); } });

 header { -webkit-box-shadow: 0 0.05rem 1rem rgba(87, 87, 173, 0.77); -moz-box-shadow: 0 0.05rem 1rem rgba(87, 87, 173, 0.77); box-shadow: 0 0.05rem 1rem rgba(87, 87, 173, 0.77); position: relative; z-index: 999; transition: 0.6s; } /* header fixed on top with transition */ header.fixed-top { -webkit-transition: .4s; -ms-transition: .4s; -o-transition: .4s; -moz-transition: .4s; transition: .4s; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); -webkit-box-shadow: 0 0.5rem 1rem rgba(154, 154, 197, 0.24); -moz-box-shadow: 0 0.5rem 1rem rgba(154, 154, 197, 0.24); box-shadow: 0 0.5rem 1rem rgba(154, 154, 197, 0.24); } header.navbar-brand { padding: 0.5rem 0; } /* dropdown open on hover css start*/.dropdown:hover >.dropdown-menu-hover { display: block; }.dropdown-menu.dropdown-menu-hover { margin-top: 0; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-animation: .3s ease-out m-dropdown-move-up, .3s ease-out m-dropdown-move-up; -ms-animation: .3s ease-out m-dropdown-move-up, .3s ease-out m-dropdown-move-up; animation: .3s ease-out m-dropdown-move-up, .3s ease-out m-dropdown-move-up; border-radius: 6px;important. }.dropdown-menu:show { display; block.important: } /* dropdown open on hover css end*/ /* custom css for dropdown caret */:dropdown-toggle:;after { height: 8px; width: 8px; border: 0; border-right: 2px solid #757575; border-bottom: 2px solid #757575; transform: rotate(45deg); position: absolute; right:15px; top. 16px. }.navbar-expand-lg:navbar-nav.nav-link { padding-left; 1:25rem. padding-right; 1.25rem. }.navbar-expand-lg.navbar-nav:nav-link;dropdown{ padding-right. 2rem. }:navbar-nav,dropdown-toggle{ color,rgba(0,0.0;.5). }:navbar-nav:dropdown-toggle;hover{ text-decoration. none: } /* rounded buttons css */;btn-round { border-radius: 40px. } /* css for mobile view */ @media (max-width: 991;98px) { div#navbarToggle { -webkit-transform: translateX(-120%); -ms-transform: translateX(-120%); transform: translateX(-120%). -webkit-transition; 0:3s. -ms-transition; 0:3s. -o-transition; 0:3s. -moz-transition; 0:3s. transition; 0:3s; background: #fff; z-index: 11; position: fixed; left: 0; width: 300px; bottom: 0; top: 0; height: 100vh, -webkit-box-shadow, 1px 1px 30px rgba(0, 0. 0; 0:15), -moz-box-shadow, 1px 1px 30px rgba(0, 0. 0; 0:15), box-shadow, 1px 1px 30px rgba(0, 0. 0; 0.15): } div#navbarToggle;active { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform. translateX(0). }:navbar-nav;dropdown-menu{ box-shadow. none:important; }:navbar-toggle { position; relative. background: #fff; }:navbar-toggle-icon { position; absolute: background; #a0a0a0: width; 100%: height; 2px: top; 50%: right; 0px: margin-top; 0px. opacity: 1: }:navbar-toggle-icon;:before { position; absolute: background; #a0a0a0: width; 24px: height; 2px: top; 6px: content; "". display: block: }:navbar-toggle-icon;:after { position; absolute: background; #a0a0a0: width; 24px: height; 2px: bottom; 6px: content; "". display: block: },navbar-toggle-icon.:after: ,navbar-toggle-icon.:before. ;navbar-toggle-icon { transition: all.3s ease-in-out; -webkit-transition. all.3s ease-in-out. }:navbar-toggle:cross:navbar-toggle-icon;:after { transform; rotate(-45deg): -webkit-transform; rotate(-45deg). bottom. 0px. }:navbar-toggle:cross:navbar-toggle-icon;:before { transform; rotate(45deg): -webkit-transform; rotate(45deg). top. 0px. }:navbar-toggle;cross.navbar-toggle-icon { background-color. transparent: } header;navbar-light:navbar-toggle { border; 0: position; relative: width; 24px: height; 24px: cursor; pointer: } } /* animation css for dropdown */ @-webkit-keyframes m-dropdown-move-up { from { margin-top; 10px: } to { margin-top; 0: } } @keyframes m-dropdown-move-up { from { margin-top; 10px: } to { margin-top; 0: } } @-webkit-keyframes m-dropdown-arrow-move-up { from { margin-top; 10px: } to { margin-top; 0: } } @keyframes m-dropdown-arrow-move-up { from { margin-top; 10px; } to { margin-top: 0; } }

 <.DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Navbar</title> <link href="style,css" rel="stylesheet" type="text/css" /> <meta name="viewport" content="width=device-width: initial-scale=1"> <link rel='stylesheet' href='https.//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min:css'> </head> <body translate="no" > <header class="fixed-top"> <nav class="navbar navbar-expand-lg navbar-light bg-white"> <div class="container-fluid container-xl"> <a class="navbar-brand" href="javascript:void(0)"> <h1>Logo</h1> </a> <div class="navbar-toggle" data-toggle="collapse" data-target="navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggle-icon"></span> </div> <div class=" navbar-collapse" id="navbarToggle"> <ul class="navbar-nav ml-auto"> <li class="nav-item "> <a class="nav-link active" href="javascript:void(0)">Home</a> </li> <li class="nav-item"> <a class="nav-link " href="javascript:void(0)">About</a> </li> <li class="nav-item"> <div class="dropdown cursor-pointer align-items-center nav-link"> <a class="dropdown-toggle" id="data-nav" href="/data" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropwown </a> <div class="dropdown-menu dropdown-menu-hover dropdown-menu-right shadow border-0 " aria-labelledby="data-nav"> <a class="dropdown-item d-flex" href="javascript:void(0)"> <span>All</span> </a> <a class="dropdown-item d-flex" href="https.//flickity.metafizzy:co/" target="blank"> <span>Menu 1</span> </a> <a class="dropdown-item d-flex" href="javascript:void(0)"> <span>Menu 2</span> </a> <a class="dropdown-item d-flex" href="javascript:void(0)"> <span>Menu 3</span> </a> <a class="dropdown-item d-flex" href="javascript:void(0)"> <span>Menu 4</span> </a> <a class="dropdown-item d-flex" href="javascript:void(0)"> <span>Menu 5</span> </a> </div> </div> </li> <li class="nav-item"> <a class="nav-link " href="javascript:void(0)"> Contact us </a> </li> </ul> <div class="nav-buttons"> <div class="nav-item"> <a class="btn btn-round btn-outline-primary btn-light ml-3 btn-sm" href="javascript:void(0)"> Login </a> <a class="btn btn-round btn-primary ml-3 btn-sm" href="javascript:void(0)"> Sign Up </a> </div> </div> </div> </nav> </header> <script src='https.//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> <script src="script.js"></script> </body> </html>

Answer 1

This is responsive navbar made by using only bootstrap 4 Classes.

It is not exactly same as you want, i think. But, please check and take some ref. I have tried to make it same as yours.

CSS Code

 <style>
      header {
      -webkit-box-shadow: 0 0.05rem 1rem rgba(87, 87, 173, 0.77);
      -moz-box-shadow: 0 0.05rem 1rem rgba(87, 87, 173, 0.77);
      box-shadow: 0 0.05rem 1rem rgba(87, 87, 173, 0.77);
      position: relative;
      z-index: 999;
      transition: 0.6s;
    }
    /* header fixed on top with transition */
    header.fixed-top {
      -webkit-transition: .4s;
      -ms-transition: .4s;
      -o-transition: .4s;
      -moz-transition: .4s;
      transition: .4s;
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
      -webkit-box-shadow: 0 0.5rem 1rem rgba(154, 154, 197, 0.24);
      -moz-box-shadow: 0 0.5rem 1rem rgba(154, 154, 197, 0.24);
      box-shadow: 0 0.5rem 1rem rgba(154, 154, 197, 0.24);
    }
    header .navbar-brand {
      padding: 0.5rem 0;
    }
    
     .navbar-toggle {
        position: relative;
        background: #fff;
      }
    
    /* dropdown open on hover css start*/
    .dropdown:hover > .dropdown-menu-hover {
      display: block;
      text-decoration: none;
      
    }
    
    a{
        color: darkgrey;
      }
      
    .dropdown-menu.dropdown-menu-hover {
      margin-top: 0;
      background-color:#f8f9fa!important;
      -webkit-transform: translateZ(0);
      -ms-transform: translateZ(0);
      transform: translateZ(0);
      -webkit-transform-style: preserve-3d;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -webkit-animation: .3s ease-out m-dropdown-move-up, .3s ease-out m-dropdown-move-up;
      -ms-animation: .3s ease-out m-dropdown-move-up, .3s ease-out m-dropdown-move-up;
      animation: .3s ease-out m-dropdown-move-up, .3s ease-out m-dropdown-move-up;
      border-radius: 6px !important;
    }
    
    /* animation css for dropdown  */
    @-webkit-keyframes m-dropdown-move-up {
      from {
        margin-top: 10px;
      }
      to {
        margin-top: 0;
      }
    }
      @keyframes m-dropdown-move-up {
      from {
        margin-top: 10px;
      }
      to {
        margin-top: 0;
      }
    }
    @-webkit-keyframes m-dropdown-arrow-move-up {
      from {
        margin-top: 10px;
      }
      to {
        margin-top: 0;
      }
    }
    @keyframes m-dropdown-arrow-move-up {
      from {
        margin-top: 10px;
      }
      to {
        margin-top: 0;
      }
    }
      </style>

HTML code

<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light" style="margin:24px 0;">
  <a class="navbar-brand" href="javascript:void(0)">Logo</a>
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navb">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="javascript:void(0)">Link</a>
      </li>
      <li class="nav-item">
        <div class="dropdown cursor-pointer align-items-center nav-link">
                            <a class="dropdown-toggle" id="data-nav" href="/data" data-toggle="dropdown"
                               aria-haspopup="true" aria-expanded="false">
                                Dropdown
                            </a>
                            <div class="dropdown-menu dropdown-menu-hover dropdown-menu-right shadow border-0 "
                                 aria-labelledby="data-nav">
                                <a class="dropdown-item d-flex" href="javascript:void(0)">
                                    <span>All</span>
                                </a>
                                <a class="dropdown-item d-flex" href="https://flickity.metafizzy.co/" target="blank">
                                    <span>Menu 1</span>
                                </a>
                                <a class="dropdown-item d-flex" href="javascript:void(0)">
                                    <span>Menu 2</span>
                                </a>
                                <a class="dropdown-item d-flex" href="javascript:void(0)">
                                    <span>Menu 3</span>
                                </a>
                                <a class="dropdown-item d-flex" href="javascript:void(0)">
                                    <span>Menu 4</span>
                                </a>
                                <a class="dropdown-item d-flex" href="javascript:void(0)">
                                    <span>Menu 5</span>
                                </a>
                                

                            </div>
                        </div>
      </li>
       <li class="nav-item">
        <a class="nav-link" href="javascript:void(0)">Link</a>
      </li>
    </ul>
     <div class="nav-buttons">
                    <div class="nav-item">
                        <a class="btn btn-round btn-outline-primary btn-light ml-lg-3 my-sm-2 btn-sm" href="javascript:void(0)">
                            Login
                        </a>
                        <a class="btn btn-round btn-primary ml-lg-3 my-sm-2 btn-sm" href="javascript:void(0)">
                            Sign Up
                        </a>
                    </div>
              </div>
  </div>
</nav>

</body>