1

My header has 2 divs that are overlapping and one is making another one impossible to click on.

The website is here: www.vocabularybuilder.co, as you can see the logo can't be pressed as it is overlapped by the navigation div.

How can I make the logo clickable?

Joe
  • 4,877
  • 5
  • 30
  • 51
Dominykas Laurinavicius
  • 29
  • 6

2 Answers2

1

Instead of making the logo z-index to be positive, make the nav z-index to be negative, like this (ofcourse use css after you sure that it works :D):

<nav class="nav-bar animate" role="navigation" style="
z-index: -1;"><!--Your content-->
</nav>

Should be working since I have tried this method out on your site~

Some further reading (Specifically, look at Kelly Elton answer, which inplicitly shows why setting logo to positive value is not working):What is default z-Index of <div> element in HTML, and how to get it using JavaScript?

Community
  • 1
  • 1
Ng Sek Long
  • 4,233
  • 2
  • 31
  • 38
  • side question: why is it important to use css? I understand that it saves space, but is there something more important that i'm missing if I just write the code in-line? :) – Dominykas Laurinavicius Jan 22 '17 at 07:12
  • 1
    See [link](http://stackoverflow.com/questions/2612483/whats-so-bad-about-in-line-css). In your case it is still reasonable to use in-line css, since the logo only appears once in your website and your css intention is clear. However, if you have more than one line of css, or your element need to be used in multiple areas (Perhaps you want to format your h1 tag with class red to be color red), than using a css folder will make maintanence much easier! – Ng Sek Long Jan 22 '17 at 13:00
  • hey man, it doesn't work again, I added a bunch of code and it doesn't work now, as in, I can click on the logo but not on the navigation bar :/ can't find the culprit, maybe you know?... – Dominykas Laurinavicius Jan 25 '17 at 23:49
  • I think you have fixed it, I don't see any problem. If you still haven't fixed it, try removing cache or changing browser, maybe some of your old version of code (that have been cached) is making some error – Ng Sek Long Jan 29 '17 at 08:02
0

You can add a z-index CSS rule higher than the header z-index

.site-header__logo-link {
z-index:2500;
}

I added 2500 becauuse i think that it is higher than the header z-index, if it still dont working, try a higher number

NOTE:I am not magic ... you will get me

JosephDFGX
  • 216
  • 3
  • 6