CODEWITHSUNDEEP
htmlcsshtml-lists
Benjamin Porter
Benjamin Porter

Reputation: 447

HTML UL LI a href links not working

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/

Upvotes: 5

Views: 37398

Answers (6)

Joseph NISHIMWE
Joseph NISHIMWE

Reputation: 1

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>

Upvotes: 0

Nikz
Nikz

Reputation: 1406

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

Upvotes: 1

Kapilraj Parameswararajah
Kapilraj Parameswararajah

Reputation: 372

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

ul li a {
  display: block;
}

Upvotes: 1

diceworks
diceworks

Reputation: 21

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.

Upvotes: 2

vr_driver
vr_driver

Reputation: 2085

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
});

Upvotes: 2

Sunil Goli
Sunil Goli

Reputation: 459

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>

Upvotes: 5

Related Questions