Topic: Mobile Navbar (with hamburger) won't close on anchor navigation
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')
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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