search

shelbourn / FreeCodeCamp_Challenges

Just a repository with some of the projects I've completed using FreeCodeCamp.com
0 stars 0 forks source link

Fix issue with section links not navigating properly #1

Closed shelbourn closed 8 years ago

shelbourn commented 8 years ago

Currently, section links are not working properly in the portfolio zipline. This needs to be changed in order to work properly:

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
        <a class="navbar-brand" href="#">Matthew Shelbourn</a>
    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#bio">Bio</a></li>
            <li><a href="#projects">Projects</a></li>
            <li><a href="#gallery">Gallery</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </div>
</div>
</div>

<!-- End Real Navbar -->

<!-- Body Section1 -->

<div>
<a name="bio">
</a>

shelbourn commented 8 years ago

This issue is one of the reasons I decided to build a new portfolio page. I have a feeling that there was something screwy with my code here that was causing the section links to navigate improperly. The code below is from 'Portfolio 2' and the section links navigate perfectly. Don't know what is wrong with the code in 'Portfolio'.

HTML --

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Matthew Shelbourn</a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right text-center"> <!-- 'navbar-right' aligns the non-collapsed navbar to the right of the screen. 'Text-center' aligns the collapsed navbar children to the center of the dropdown box. -->
        <li class="active"><a href="#home">Home</a></li>
        <li><a href="#bio">Bio</a></li>
        <li><a href="#projects">Projects</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>