Menu item is not clickable - html

Question

I can't figure out what's wrong with my index.html or main.css. I'm using Bootstrap with a custom stylesheet to add a few new things to my layout.
Anyways, I made a one-page website and all the menu items are going to the right section but only 1 link is going to another website, this link isn't working. If I right click it and click on open in a new tab it is working. But just clicking the menu item isn't possible.
Here is my navigation HTML:
<header id="header" role="banner">
<div class="container">
<div id="navbar" class="navbar navbar-default">
<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="index.html"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><i class="icon-home"></i>
</li>
<li>Services
</li>
<li>About Us
</li>
<li>Gallery
</li>
<li>Brands
</li>
<li>Hours
</li>
<li>Contact
</li>
<li>Store
</li>
</ul>
</div>
</div>
</div>
</header>
Here is my navigation CSS:
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 80px;
z-index: 99999;
}
.navbar-default {
background: #fff;
border-radius: 0 0 5px 5px;
border: 0;
padding: 0;
-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2);
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2);
overflow: hidden;
}
.navbar-default .first a {
border-radius: 0 0 0 5px;
}
.navbar-default .navbar-brand {
margin-right: 50px;
margin-left: 20px;
width: 200px;
height: 78px;
background: url(../images/logo.png) no-repeat 0 50%;
}
.navbar-default .navbar-nav > li {
margin-left: 1px;
}
.navbar-default .navbar-nav > li > a {
padding: 30px 25px;
font-size: 16px;
line-height: 18px;
color: #999;
}
.navbar-default .navbar-nav > li > a > i {
display: inline-block;
}
.navbar-default .navbar-nav > li.active > a,
.navbar-default .navbar-nav > li.active:focus > a,
.navbar-default .navbar-nav > li.active:hover > a,
.navbar-default .navbar-nav > li:hover > a,
.navbar-default .navbar-nav > li:focus > a,
.navbar-default .navbar-nav > li.active > a:focus,
.navbar-default .navbar-nav > li.active:focus > a:focus,
.navbar-default .navbar-nav > li.active:hover > a:focus,
.navbar-default .navbar-nav > li:hover > a:focus,
.navbar-default .navbar-nav > li:focus > a:focus {
background-color: #f57e20;
color: #fff;
}
Here is a fiddle:
https://jsfiddle.net/jh6ufp75/3/
Is someone able to help me out with this problem?
Thanks a lot!
Kind regards.

Answer 1

There's a problem in the ul and li class of your template.
If you remove li tag it works fine, give it a try
<div>Store</div>
The problem is that you have to restyle your div tag for looking the same at the other menu elements.
I went further...
The root of the problem is in main.js at line 20:
//smooth scroll
$('.navbar-nav > li').click(function(event) {
event.preventDefault();
var target = $(this).find('>a').prop('hash');
$('html, body').animate({
scrollTop: $(target).offset().top
}, 500);
});
So... this script prevent li tag in your nav-bar from the default click action, and go to anchors in your html files.
Because you are linking to an external link, there's no "top" propriety for your menu item, and if you check your console log you get this error:
main.js:25 Uncaught TypeError: Cannot read property 'top' of undefined
You can simply use div tag instead of li and style it like a menu item.

Answer 2

Add target="_blank"; to your Store menu link. and it's working fine.
Code:
<header id="header" role="banner">
<div class="container">
<div id="navbar" class="navbar navbar-default">
<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="index.html"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><i class="icon-home"></i></li>
<li>Services</li>
<li>About Us</li>
<li>Gallery</li>
<li>Brands</li>
<li>Hours</li>
<li>Contact</li>
<li>Store</li>
</ul>
</div>
</div>
</div>
</header>