Mobile Navbar (with hamburger) won't close on anchor navigat


Topic: Mobile Navbar (with hamburger) won't close on anchor navigation

Habib El Maaza Gomez pro asked 4 years ago

Hi!

The navbar won't collapse after clicking on a link directed to an anchor on the same page, when on mobile version (or with the dev tools on firefox, chrome or android and IOS).

 
header#hero-header

nav.navbar.fixed-top.navbar-expand-lg.navbar-light.white.scrolling-navbar

a.navbar-brand(href='#')

img.logo(src="./img/LOGOV2@0.5x.png", alt="")

button.navbar-toggler(type='button'data-toggle='collapse'data-target='#navbarSupportedContent'aria-controls='navbarSupportedContent'aria-expanded='false'aria-label='Toggle navigation')

span.navbar-toggler-icon

#navbarSupportedContent.collapse.navbar-collapse

ul.navbar-nav.mr-auto.smooth-scroll

li.nav-item.active

a.nav-link(href='./')

| Home

span.sr-only (current)

li.nav-item

a.nav-link(href='#intro') About

li.nav-item

a.nav-link(href='#main') Tickets

li.nav-item

a.nav-link(href='./speakers.html') Speakers

li.nav-item

a.nav-link(href='./companies.html') Companies

li.nav-item

a.nav-link(href='#awards') Awards

li.nav-item

a.nav-link(href='#second') Program

li.nav-item

a.nav-link(href='#third') Info

li.nav-item

a.nav-link(href='#fourth') Contact

ul.navbar-nav.nav-flex-icons.align-items-center

li.nav-item.pt-1

p.nav-link.pow powered by

li.nav-item.pt-1

a.nav-link(href='https://startups.be'target='_blank')

img.logo-nav.img-fluid(src="./img/startups_nav_logo.svg"alt="powered by startups.be and scale-ups.be"target='_BLANK')

li.nav-item

a.nav-link(href='https://scale-ups.eu'target='_blank')

img.logo-nav.img-fluid(src="./img/scaleup_nav.svg"alt="powered by startups.be and scale-ups.be"target='_BLANK')

Marta Szymanska staff pro premium answered 4 years ago

Hi,

try this code:

$('.navbar-nav>li>a').on('click', function(){
$('.navbar-collapse').collapse('hide');
});

You can also see how it works in the snippet: https://mdbootstrap.com/snippets/jquery/marta-szymanska/142928

Best,

Marta


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.5.10
  • Device: MacOs, Android, Ios
  • Browser: Chrome, Firefox, safari
  • OS: Mojave
  • Provided sample code: Yes
  • Provided link: Yes