Menu item is not clickable. when I put over header background image

Question

Menu Link is not working. I am unable to click on menu item. When I placed the link inside the body that time works fine but when I put over the background header image, it's not working. Many Thanks in advance.

<div class="item bg" style="background-image: url('img/1.jpg');">

  <div class="topnav1">
    <a><img src="img/logo.png" style='height: 150px; width: 120px; object-fit: contain'></a>
  </div>

  <div class="topnav" id="myTopnav">
    <a href="#contact">Contact</a>
    <a href="#about" class="active">About</a>
    <a href="#services">Services</a>
    <a href="#portfolio">Portfolio</a>
    <a href="#team">Founder Desk</a>
    <a href="#home">Home</a>

    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
      <i class="fa fa-bars"></i>
    </a>
  </div>
</div>

Thanks

The code should work however your `` element is not a valid link. It needs a `href=""` attribute to be a link. See https://stackoverflow.com/questions/8970767/is-href-required-on-links — Ivan Kahl, Feb 05 '20 at 07:16

score 0 · Answer 1 · answered Feb 05 '20 at 07:16

Wrapping an <a> tag around an <img> is perfectly normal and should work as seen in my example:

<a href="https://stackoverflow.com">
  <img style="width: 100px; height: 100px;" src="https://televistar.com/media/u_media/stack.png" alt="stackoverflow logo"/>
</a>

Could it be that your issue is caused by your <a> tag not having any attributes?

Menu item is not clickable. when I put over header background image

1 Answers1