My link is not opening the page it should but will in a new tab

Question

EDIT: The rendered code is here . You can find the source here .

So I have a simple navbar:

        <nav>
            <ul>
                <li><a href="#">my works</a></li>
                <li><a href="about.html">about</a></li>
                <li><a href="index.html" style="font-size: 40px;">mnewhouse</a></li>
                <li><a href="#">services</a></li>
                <li><a href="#">contact</a></li>
            </ul>
        </nav>

For some reason, it is not redirecting to my about.html page when I click on the about link. The odd thing is that it does open the correct page when I go to open the link in a new tab or new window. Any ideas?

Answer 1

In your <script src="js/main.js"></script> there is a part of code

// Page Nav
var clickMenu = function() {
    var topVal = ( $(window).width() < 769 ) ? 0 : 58;

    $(window).resize(function(){
        topVal = ( $(window).width() < 769 ) ? 0 : 58;      
    });

    if ( $(this).attr('href') != "#") {
        $('#fh5co-main-nav a:not([class="external"]), #fh5co-offcanvas a:not([class="external"])').click(function(event){
            var section = $(this).data('nav-section');


            if ( $('div[data-section="' + section + '"]').length ) {

                $('html, body').animate({
                    scrollTop: $('div[data-section="' + section + '"]').offset().top - topVal
                }, 500);    

           }
           event.preventDefault();

        });
    }
};

This means, for external link add class="external" to your menu <a> , otherwise your external href will be aborted with event.preventDefault(); . Try the code below.

    <nav id="fh5co-main-nav">
        <ul>
            <li><a href="#">my works</a></li>
            <li><a href="about.html" class="external">about</a></li>
            <li><a href="index.html" class="external" style="font-size: 40px;">mnewhouse</a></li>
            <li><a href="#">services</a></li>
            <li><a href="#">contact</a></li>
        </ul>
    </nav>

Answer 2

The HTML id attribute specifies a unique id for an HTML element. The value of the id attribute must be unique within the HTML document.

You must use the class for the nav tag.

    <nav class="fh5co-main-nav">
            <ul>
                <li><a href="#">my works</a></li>
                <li><a href="about.html" target="_blank">about</a></li>
                <li><a href="index.html" style="font-size: 40px;">mnewhouse</a></li>
                <li><a href="#">services</a></li>
                <li><a href="#">contact</a></li>
            </ul>
        </nav>

And change fh5co-main-nav to class.

    #fh5co-header .fh5co-main-nav {
    /*float: right;*/
    text-align: center
}
@media screen and (max-width: 768px) {
  #fh5co-header .fh5co-main-nav {
    display: none;
  }
}
#fh5co-header .fh5co-main-nav ul {
  padding: 0;
  margin: 4px 0 0 0;
}
#fh5co-header .fh5co-main-nav ul li {
  padding: 0;
  margin: 0;
  display: inline;
}
    #fh5co-header .fh5co-main-nav ul li a {
        font-family: "Roboto Slab", sans-serif;
        color: rgba(154,96,36, 0.8);
        text-decoration: none;
        margin-left: 90px;
        border-bottom: 2px solid transparent;
        font-size: 22px;
    }
        #fh5co-header .fh5co-main-nav ul li a:hover {
            text-decoration: none;
            color: #a58e2d;
            border-bottom: 2px solid #a58e2d;
        }

#fh5co-header.navbar-fixed-top {
  position: fixed !important;
  background: #fff;
  -webkit-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
  -ms-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
  top: 0;
  left: 0px;
}
#fh5co-header.navbar-fixed-top #fh5co-logo {
  float: left;
  line-height: 1.2;
}
#fh5co-header.navbar-fixed-top #fh5co-logo a {
  font-family: "Roboto Slab", sans-serif;
  font-size: 30px;
  color: #000;
}
#fh5co-header.navbar-fixed-top .fh5co-main-nav ul li a {
  font-family: "Roboto Slab", sans-serif;
  color: rgba(0, 0, 0, 0.8);
  text-decoration: none;
  margin-left: 90px;
  border-bottom: 2px solid transparent;
}
    #fh5co-header.navbar-fixed-top .fh5co-main-nav ul li a:hover {
        text-decoration: none;
        color: #f9ad81;
        border-bottom: 2px solid #f9ad81;
   }

I tested this method, everything was fine.