Bootstrap mobile menu not collapsing

HTML & CSS
1

Hi there,

I have a Bootstrap menu with a mobile menu, but for some reason, the mobile menu is not working/collapsing.

Can anyone see what I have wrong?

This is my HTML:

<div class="container-fluid main-nav ">
  <div class="row">
    <div class="container">
      <nav id="topNav" class="navbar  navbar-expand-lg">
        <div class="navbar-brand mex-auto logo"> <a href="#"><img src="assets/images/logo.png" /></a> </div>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="navbar-collapse"> <span>Menu</span></button>
        <div class="navbar-collapse collapse">
			<div class="telephone mr-auto"><span><i class="icons8-phone"></i>Call us today</span>
			<a href="tel:123">123</a></div>
          <ul class="navbar-nav midnav">
            <li class="nav-item"> <a class="nav-link" href="#lead-generation">Lead Generation</a> </li>
            <li class="nav-item"> <a class="nav-link" href="#about">About</a> </li>
          </ul>
          <ul class="navbar-nav midnav2">
            <li class="nav-item"> <a class="nav-link" href="#faqs">FAQs</a> </li>
            <li class="nav-item"> <a class="nav-link" href="#contact">Contact</a> </li>
          </ul>
          <div class="cta ml-auto"><a href="#grow" class="btn-cta"><i class="icons8-idea"></i> Grow</a></div>
        </div>
      </nav>
    </div>
	</div>
</div>

Thanks!

2

I believe the data target should refer to an ID not a class and will include the hash.

e.g.
data-target="#navbar"

Then give the collapsing element that ID.

2 Likes
3

Thank you :slight_smile: That worked!

1 Like
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.