2

Dear stackoverflow community, For some odd reason I can't figure out why the hamburger menu when responsive or non responsive if collapse is enabled doesn't auto close when clicking on same page anchor links. Can someone point me to the right direction or have a solution for this? I am using Bootstrap v5.0.1.

Here is the CSS CODE:

& when not (@sticky) {
  .navbar-dropdown {
    position: relative !important;
  }
  & when (@transparent) {
    .navbar-dropdown {
      position: absolute !important;
    }
  }
}
& when (@sticky) {
  z-index: 1000;
  width: 100%;
  & when not (@transparent) {
    position: relative;
    min-height: 60px;
  }
  nav.navbar {
    position: fixed;
  }
}
.dropdown-item:before {
  font-family: Moririse2 !important;
  content: "\e966";
  display: inline-block;
  width: 0;
  position: absolute;
  left: 1rem;
  top: 0.5rem;
  margin-right: 0.5rem;
  line-height: 1;
  font-size: inherit;
  vertical-align: middle;
  text-align: center;
  overflow: hidden;
  transform: scale(0, 1);
  transition: all 0.25s ease-in-out;
}
.dropdown-menu {
  padding: 0;
  border-radius: 4px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}
.dropdown-item {
  border-bottom: 1px solid #e6e6e6;
  &:hover, &:focus {
    background: @primaryColor !important;
    color: white !important;
  }
  &:hover span {
    color: white;
  }
  &:first-child {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }
  &:last-child {
    border-bottom: none;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
  }
}
.nav-dropdown .link {
  padding: 0 0.3em !important;
  margin: 0.667em 1em !important;
}
.nav-dropdown .link.dropdown-toggle::after {
  margin-left: 0.5rem;
  margin-top: 0.2rem;
}
.nav-link {
  position: relative;
}
.container {
  display: flex;
  margin: auto;
  flex-wrap: nowrap;
  @media (max-width: 991px) {
    flex-wrap: wrap;
  }
  & when (@collapsed) {
    flex-wrap: wrap;
  }
}
.container-fluid {
  flex-wrap: nowrap;
  @media (max-width: 991px) {
    flex-wrap: wrap;
  }
  & when (@collapsed) {
    flex-wrap: wrap;
  }
}
.iconfont-wrapper {
  color: @iconsColor !important;
  font-size: 1.5rem;
  padding-right: 0.5rem;
}
.navbar-caption {
}
.navbar-nav {
}
.dropdown-menu, .navbar.opened {
  background: @menuBgColor !important;
}
.nav-item:focus, .nav-link:focus {
  outline: none;
}
.dropdown .dropdown-menu .dropdown-item {
  width: auto;
  transition: all 0.25s ease-in-out;
  &::after {
    right: 0.5rem;
  }
  .mbr-iconfont {
    margin-right: 0.5rem;
    vertical-align: sub;
    &:before {
      display: inline-block;
      transform: scale(1, 1);
      transition: all 0.25s ease-in-out;
    }
  }
}
.collapsed {
  .dropdown-menu .dropdown-item:before {
    display: none;
  }
  .dropdown .dropdown-menu .dropdown-item {
    padding: 0.235em 1.5em 0.235em 1.5em !important;
    transition: none;
    margin: 0 !important;
  }
}
.navbar {
  min-height: 70px;
  transition: all 0.3s;
  border-bottom: 1px solid transparent;
  &:not(.navbar-short) {
  }
  & when not (@transparent) {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    background: @menuBgColor;
  }
  & when (@transparent) {
    background: rgba(red(@menuBgColor), green(@menuBgColor), blue(@menuBgColor), @opacity);
  }
  &.opened {
    transition: all 0.3s;
  }
  .dropdown-item {
    padding: 0.5rem 1.8rem;
  }
  .navbar-logo img {
    width: auto;
  }
  .navbar-collapse {
    justify-content: flex-end;
    z-index: 1;
  }
  &.collapsed {
    justify-content: center;
    .nav-item .nav-link::before {
      display: none;
    }
    &.opened {
      .dropdown-menu {
        top: 0;
      }
      @media (min-width: 992px) {
        &:not(.navbar-short) .navbar-collapse when (@showLogo) {
          max-height: ~"calc(98.5vh - @{logoSize}rem)";
        }
      }
    }
    .dropdown-menu {
      .dropdown-submenu {
        left: 0 !important;
      }
      .dropdown-item:after {
        right: auto;
      }
      .dropdown-toggle[data-toggle="dropdown-submenu"]:after {
        margin-left: 0.5rem;
        margin-top: 0.2rem;
        border-top: 0.35em solid;
        border-right: 0.35em solid transparent;
        border-left: 0.35em solid transparent;
        border-bottom: 0;
        top: 41%;
      }
    }
    ul.navbar-nav {
      li {
        margin: auto;
      }
    }
    .dropdown-menu .dropdown-item {
      padding: 0.25rem 1.5rem;
      text-align: center;
    }
    .icons-menu {
      padding-left: 0;
      padding-right: 0;
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
    }
  }
  @media (max-width: 991px) {
    .nav-item .nav-link::before {
      display: none;
    }
    &.opened {
      .dropdown-menu {
        top: 0;
      }
    }
    .dropdown-menu {
      .dropdown-submenu {
        left: 0 !important;
      }
      .dropdown-item:after {
        right: auto;
      }
      .dropdown-toggle[data-toggle="dropdown-submenu"]:after {
        margin-left: 0.5rem;
        margin-top: 0.2rem;
        border-top: 0.35em solid;
        border-right: 0.35em solid transparent;
        border-left: 0.35em solid transparent;
        border-bottom: 0;
        top: 40%;
      }
    }
    .navbar-logo {
      img {
        height: 3rem !important;
      }
    }
    ul.navbar-nav {
      li {
        margin: auto;
      }
    }
    .dropdown-menu .dropdown-item {
      padding: 0.25rem 1.5rem !important;
      text-align: center;
    }
    .navbar-brand {
      flex-shrink: initial;
      flex-basis: auto;
      word-break: break-word;
      padding-right: 2rem;
      @media (max-width: 767px) {
        width: ~"calc(100% - 31px)";
      }
    }
    .navbar-toggler {
      flex-basis: auto;
    }
    .icons-menu {
      padding-left: 0;
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
    }
  }
  &.navbar-short {
    min-height: 60px;
    .navbar-logo {
      img {
        height: 2.5rem !important;
      }
    }
    .navbar-brand {
      min-height: 60px;
      padding: 0;
    }
  }
}
.navbar-brand {
  min-height: 70px;
  flex-shrink: 0;
  align-items: center;
  margin-right: 0;
  padding: 10px 0;
  transition: all 0.3s;
  word-break: break-word;
  z-index: 1;
  .navbar-caption {
    line-height: inherit !important;
  }
  .navbar-logo a {
    outline: none;
  }
}
.dropdown-item.active, .dropdown-item:active {
  background-color: transparent;
}
.navbar-expand-lg .navbar-nav .nav-link {
  padding: 0;
}
.nav-dropdown .link.dropdown-toggle {
  margin-right: 1.667em;
  &[aria-expanded="true"] {
    margin-right: 0;
    padding: 0.667em 1.667em;
  }
}
.navbar.navbar-expand-lg .dropdown {
  .dropdown-menu {
    background: @menuBgColor;
    .dropdown-submenu {
      margin: 0;
      left: 100%;
    }
  }
}
.navbar .dropdown.open > .dropdown-menu {
  display: block;
}
ul.navbar-nav {
  flex-wrap: wrap;
}
.navbar-buttons {
  text-align: center;
  min-width: 170px;
}
button.navbar-toggler {
  outline: none;
  width: 31px;
  height: 20px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  align-self: center;
  .hamburger span {
    position: absolute;
    right: 0;
    width: 30px;
    height: 2px;
    border-right: 5px;
    background-color: @hamburgerColor;
    &:nth-child(1) {
      top: 0;
      transition: all 0.2s;
    }
    &:nth-child(2) {
      top: 8px;
      transition: all 0.15s;
    }
    &:nth-child(3) {
      top: 8px;
      transition: all 0.15s;
    }
    &:nth-child(4) {
      top: 16px;
      transition: all 0.2s;
    }
  }
}
nav.opened .hamburger span {
  &:nth-child(1) {
    top: 8px;
    width: 0;
    opacity: 0;
    right: 50%;
    transition: all 0.2s;
  }
  &:nth-child(2) {
    transform: rotate(45deg);
    transition: all 0.25s;
  }
  &:nth-child(3) {
    transform: rotate(-45deg);
    transition: all 0.25s;
  }
  &:nth-child(4) {
    top: 8px;
    width: 0;
    opacity: 0;
    right: 50%;
    transition: all 0.2s;
  }
}
.navbar-dropdown {
  padding: 0 1rem;
  & when (@sticky) {
    position: fixed;
  }
}
a.nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
}
.icons-menu {
  flex-wrap: nowrap;
  display: flex;
  justify-content: center;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.3rem;
  text-align: center;
}
@media screen and (~'-ms-high-contrast: active'), (~'-ms-high-contrast: none') {
  .navbar {
    height: 70px;
    &.opened {
      height: auto;
    }
  }
  .nav-item .nav-link:hover::before {
    width: 175%;
    max-width: calc(100% ~"+" 2rem);
    left: -1rem;
  }
}

Here is the HTML code:

  <section data-bs-version="5.1" class="menu menu3 cid-tsEnTljTpk" once="menu" id="menu3-0">
    
    <nav class="navbar navbar-dropdown navbar-fixed-top navbar-expand-lg">
        <div class="container">
            <div class="navbar-brand">
                <span class="navbar-logo">
                    <a href="#">
                        <img src="assets/images/mbr.png" alt="" style="height: 4rem;">
                    </a>
                </span>
                <span class="navbar-caption-wrap"><a class="navbar-caption text-black display-7" href="#">Temperature Experts</a></span>
            </div>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-bs-toggle="collapse" data-target="#navbarSupportedContent" data-bs-target="#navbarSupportedContent" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <div class="hamburger">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav nav-dropdown" data-app-modern-menu="true"><li class="nav-item"><a class="nav-link link text-black text-primary display-4" href="index.html#Who-We-Are">
                            About us</a></li>
                    <li class="nav-item"><a class="nav-link link text-black text-primary display-4" href="index.html#Our_Services">
                            Services</a></li>
                    <li class="nav-item"><a class="nav-link link text-black display-4" href="#">Contacts</a>
                    </li></ul>
                <div class="icons-menu">
                    <a class="iconfont-wrapper" href="#" target="_blank">
                        <span class="p-2 mbr-iconfont socicon-facebook socicon"></span>
                    </a>
                    <a class="iconfont-wrapper" href="#" target="_blank">
                        <span class="p-2 mbr-iconfont socicon-twitter socicon"></span>
                    </a>
                    <a class="iconfont-wrapper" href="#" target="_blank">
                        <span class="p-2 mbr-iconfont socicon-instagram socicon"></span>
                    </a>
                    <a class="iconfont-wrapper" href="#" target="_blank">
                        <span class="p-2 mbr-iconfont socicon-youtube socicon"></span>
                    </a>
                </div>
                <div class="navbar-buttons mbr-section-btn"><a class="btn btn-primary display-4" href="tel:1-800-test-test">Call Now</a></div>
            </div>
        </div>
    </nav>
</section>
JESSE
  • 21
  • 5

1 Answers1

0

I was looking for an answer to the same question when I landed on this page.

This is the Javascript code that worked well for me, it does exactly what is needed, i.e. hamburger menu should get closed when anchored link is clicked inside it.

<script>
$('.navbar-nav>li>a').on('click', function(){
$('.navbar-collapse').collapse('hide');
});
</script>
Mohit
  • 101
  • 2