Portfolio page project-codepen

1

Hey guys, I’m working on my portfolio page project, and I seem to have gotten myself into a small bind. I spent quite some time on constructing a navbar that toggles when the page is minimized or is viewed on a small screen. Everything seems to mostly be working, except when the toggler button is pressed. The links appear briefly, but then disappear back behind the button. Could someone here explain to me what’s going on, and how I can fix the problem?

  <nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #551A8B">
    <div class="navbar-brand">Nine Worlds</div>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mynav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mynav">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="#Home">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#About Me">About Me</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#Contact">Contact</a>
        </li>
      </ul>
    </div>
  </nav>

Also, link to the pen: Portfolio project

2

You’re using an old version of Bootstrap. Use the latest version. Also, your id “About Me” has a space in it. Use a hyphen to separate words in id and class names.

3

Thanks so much! I figured it would be something simple like that. I’ll add the hyphen for my id.