HTML UL LI a href links not working

Question

I am working on a website and for the menu I have the following code:

<header>
  <div class="sticky-nav">
    <a id="mobile-nav" class="menu-nav" href="#menu-nav"></a>
    <nav id="menu">
      <ul id="menu-nav">
        <li><a href="http://aevidum.com">Home</a>
        </li>
        <li><a href="">Clubs</a>
        </li>
        <li><a href="">Campaigns</a>
        </li>
        <li><a href="">Movement</a>
        </li>
        <li><a href="">Events</a>
        </li>
        <li><a href="">The Talk</a>
        </li>
        <li><a href="">Resources</a>
        </li>
        <li><a href="">Donate</a>
        </li>
        <li><a href="">#Aevidum</a>
        </li>
        <li><a href="">Contact</a>
        </li>
      </ul>
    </nav>
  </div>
</header>

But when I click on the home link it doesn't go anywhere or do anything. Anyone know what the issue could be?

Here is a link to the directory I'm working on it in: http://aevidum.com/brushed/

Polyzoic

Markup looks fine. Works perfectly using only the HTML, without CSS or JS. See: jsfiddle.net/y7r9g83k Conclusion: Must be the JS. – Muscular

Your href path is empty..... – Powerful

Think its your JavaScript – Pancratium

Two listeners (by means of jQuery) are attached to the links. They prevent link from working. $('#mobile-nav').on('click', function(e){ and so on – Coconut

You have a JS error also on that page: Uncaught TypeError: Object #<Object> has no method 'init' – Vu

Answer 1

I think some java-script or jquery function is overriding your current functionality, because the code which you posted works fine without any includes.

<header>
  <div class="sticky-nav">
    <a id="mobile-nav" class="menu-nav" href="#menu-nav"></a>
    <nav id="menu">
      <ul id="menu-nav">
        <li><a href="http://aevidum.com">Home</a>
        </li>
        <li><a href="">Clubs</a>
        </li>
        <li><a href="">Campaigns</a>
        </li>
        <li><a href="">Movement</a>
        </li>
        <li><a href="">Events</a>
        </li>
        <li><a href="">The Talk</a>
        </li>
        <li><a href="">Resources</a>
        </li>
        <li><a href="">Donate</a>
        </li>
        <li><a href="">#Aevidum</a>
        </li>
        <li><a href="">Contact</a>
        </li>
      </ul>
    </nav>
  </div>
</header>

Zilpah

yeah, ive come to the same conclusion as well, thanks for a point in the right direction. – Polyzoic

Answer 2

I guess you may be using the Brushed Template by Alessio Atzeni?

I had the same problem. Below is the full nav section I have, and where I added a class 'linkfix_LogIn' to the link I needed to be not a relative anchor.

    <header>
    <div class="sticky-nav">
        <a id="mobile-nav" class="menu-nav" href="#menu-nav"></a>

        <div id="logo">
            <a id="goUp" href="#home-slider" title="Home">Home</a>
        </div>

        <nav id="menu">
            <ul id="menu-nav">
                <li class="current"><a href="#home-slider">Home</a></li> 
                <li><a href="#about">What Is This</a></li>
                <li><a href="#contact">Contact</a></li>
                 <li class="linkfix_LogIn"><a href="http://www.YourURL.com">Outside Link</a></li>
            </ul>
        </nav>

    </div>
</header>

Also in the main.js file, amend the following inside this function:

BRUSHED.listenerMenu = function(){

And add this little method at the bottom:

    // Fix outside links.
    $('.linkfix_LogIn a').on('click',function() {           
        window.location.href = "http://www.YourURL.com";  // Change This
});

Throughway

Answer 3

If you use "Brushed Template by Alessio Atzeni", It seems to be caused by "plugin.js".

Get "jquery.nav.js" from the following page. https://github.com/davist11/jQuery-One-Page-Nav

Then overwrite the code of "jQuery One Page Nav Plugin" in the last part of "plugin.js" (near the 30th line to the end) with the contents of "jquery.nav.js".

I was able to solve the same problem in this way. I hope this helps someone.

Harrell

This also solves the very same issue in "Vesperr Bootstrap Theme" (bootstrapmade.com/vesperr-free-bootstrap-template) – Amphisbaena

Answer 4

I had the same problem. I just added diplay: block on the a tag. It's worked for me!

ul li a {
  display: block;
}

Bolometer

Actually this can be a cause, because <a> may take not all space inside li element but only as much as takes text – Fyrd

Answer 5

Issue might be with the jquery come with your template. If nothing worked out use a javascript onclick function on the 'href' tag to redirect

onclick="window.open('https://www.yoursite.com/mypage')"

If you want to mention the target type use this instead

onclick="window.open('https://www.yoursite.com/mypage', '_blank')"

Andraandrade

Answer 6

Proceed like this everything is gonna work perfectly .

    <ul  class="nav-links">
        <li> <a href="index.html">Home</a></li>
        <li> <a href="Tours.html">Tours</a></li>
        <li> <a href="Explore.html">Explore</a> </li>
        <li><a href="About.html">About</a></li>
    </ul>

Fortunna

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Seminary