0

I have a navbar that looks like this on a computer. On mobile, the home and contact options automatically get hidden and a button appears in the top-right corner. It's three horizontal lines that are meant to click on to expand home and contact options.
However, when I click on the button on mobile, it does not expand the options. It does nothing at all (only shows that it was clicked on by rendering a yellowish box around it).

My code for the navbar:

<nav class="navbar fixed-top navbar-expand-lg navbar-dark" data-toggle="collapse" style="background-color: steelblue; text-color: white;">

  <div class="container">
    <a class="navbar-brand" style="text-align: left;" href="index.html">
      <div style="font-family: MyWebFont;;"><b>My website</b></div>
    </a>
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
      data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="true"
      aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="index.html">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="contact.html">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
Jakub Bober
  • 23
  • 4
  • Do you have any custom CSS or is it all bootstrap? – EGC Oct 17 '19 at 21:39
  • I know you said `no jquery` in this solution, but if you're using `jquery` **anywhere** else in your solution, please ensure this has been done: `I had added jQuery and bootstrap in the incorrect order in my header files. I had to load jQuery BEFORE bootstrap.` as per [this reference](https://www.freecodecamp.org/forum/t/solved-my-bootstrap-navbar-toggle-is-not-toggling/15222/2) – EGC Oct 17 '19 at 21:40
  • Also, please ensure this has been done: `are you including the Bootstrap javascript file? Also make sure it's included at the bottom of your page` - the `.js` file **must** be at the bottom of the page as per [this reference](https://stackoverflow.com/q/27930160/11700321) – EGC Oct 17 '19 at 21:42
  • I did not use JQuery at all, I used css but for the navbar the style is embedded in html – Jakub Bober Oct 18 '19 at 19:41

0 Answers0