HTML UL LI a href links not working - html

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>Home
</li>
<li>Clubs
</li>
<li>Campaigns
</li>
<li>Movement
</li>
<li>Events
</li>
<li>The Talk
</li>
<li>Resources
</li>
<li>Donate
</li>
<li>#Aevidum
</li>
<li>Contact
</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/

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>Home
</li>
<li>Clubs
</li>
<li>Campaigns
</li>
<li>Movement
</li>
<li>Events
</li>
<li>The Talk
</li>
<li>Resources
</li>
<li>Donate
</li>
<li>#Aevidum
</li>
<li>Contact
</li>
</ul>
</nav>
</div>
</header>

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">Home</li>
<li>What Is This</li>
<li>Contact</li>
<li class="linkfix_LogIn">Outside Link</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
});

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.

Answer 4

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')"

Answer 5

I had the same problem. I just added diplay: block on the a tag. It's worked for me!
ul li a {
display: block;
}

Answer 6

Proceed like this everything is gonna work perfectly .
<ul class="nav-links">
<li> Home</li>
<li> Tours</li>
<li> Explore </li>
<li>About</li>
</ul>