0

I am using MDBootstrap(essentially Bootstrap 4) Navbar Collapse, however the toggle button won't collapse when clicking on an element. I've reached out to MDBootstrap themselves and can't seem to get an answer. I've been told to use Angular, but I'm using JQuery and I have read that you shouldn't mix those two together. Also, I don't know how I would incorporate Angular into my website. I've used Bootstrap before and never had to use Angular just to get the toggle button to close once clicked on. Does this sound familiar to anyone?

Lastly, when I click the toggle button, it opens upward rather than down- can anyone help with that as well, I would like it to open up downward.

My code is here: 

  <nav class="navbar fixed-top navbar-expand-lg navbar-dark scrolling-navbar" style="height: 70px;">
    <div class="container">

      <!-- Brand -->
      <a class="navbar-brand" href="index.php"><img src="img/andrea1.jpg" class="rounded-circle img-fluid">
      </a>


      <!-- Collapse -->
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
      aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Links -->
    <div class="collapse navbar-collapse text-center" id="navbarSupportedContent">
      <!-- Left -->
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link" href="#about">About
            <span class="sr-only">(current)</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#port">Portfolio</a>
        </li>       

</ul>
      <!-- Right -->
      <ul class="navbar-nav nav-flex-icons">
        <li class="nav-item">
          <a href="https://www.linkedin.com/in/andreasanchez2/" class="nav-link" target="_blank" title="Follow on LinkedIn">
            <i class="fa fa-linkedin"></i>
          </a> 
        </li>
        <li class="nav-item">
          <a href="https://github.com/dec23rd1986"  class="nav-link" target="_blank" title="Follow on Github">
            <i class="fa fa-github"></i>
          </a> 
        </li>
        <li class="nav-item">
          <a href="https://twitter.com/dec23rd1986" class="nav-link" target="_blank" title="Follow on Twitter">
            <i class="fa fa-twitter"></i>
          </a> 
        </li>

        <li class="nav-item">
          <a href="#contact" class="nav-link" title="Contact">
            <i class="fa fa-envelope mr-3"></i>
          </a>
        </li>
      </ul>

    </div>

  </div>
</nav>
Alexandra
  • 631
  • 1
  • 13
  • 24

1 Answers1

1

Don't set height on the Navbar. Remove the style="height:70px;".

<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark scrolling-navbar">
    <div class="container">
    ...
    </div>
</nav>

Working as expected

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • Thanks Zim! That worked to make it drop downward. Do you know how I could make the toggle close after click? – Alexandra Mar 25 '18 at 18:48
  • The toggle is closing the nav when clicked. Do you mean close the nav after clicking one of the nav links? – Carol Skelly Mar 25 '18 at 20:03
  • Ah, yes. The nav won't close when I click on either "about" "portfolio" or any of the social media links. – Alexandra Mar 25 '18 at 20:48
  • That is expected behavior. The menu is only suppose to open/close using the toggler. You can override that behavior and make it close after clicking as [explained in this question/answer](https://stackoverflow.com/a/42401686/171456). Please accept this answer to others know the question is resolved. – Carol Skelly Mar 25 '18 at 20:51
  • Zim! You are a life saverrrrr! I can't tell you how long I've been trying to figure out the close after click error! Thanks!!! :) – Alexandra Mar 25 '18 at 21:59