0

On the following demo (http://bootsnipp.com/snippets/GXb7V) we have this line of markup:

<a class="navbar-brand" href="#">Brand</a>

Regardless of whether the href is changed to a URL or even left as the # it is not possible to click on this link.

Does anyone know how to fix this?

I believe the issue may be something to do with the search form and the way it expands to be full width of the nav (see bootsnipp for an example). I have also read a post here (Link isn't clickable within my navbar on Bootstrap 2 page) which discusses a clearfix class but that hasn't helped in this case.

Community
  • 1
  • 1
Andy
  • 5,142
  • 11
  • 58
  • 131

1 Answers1

2

Its likely because there is another element on top of it. You can fix it by changing its z-index. 

a.navbar-brand {
    position: relative;
    z-index: 1;
}
Tom
  • 2,543
  • 3
  • 21
  • 42
  • Glad that it helped. Don't forget to keep your z-index low and don't go crazy with 999 everywhere, it will become extremely hard to maintain. – Tom Sep 09 '16 at 09:03
  • Cheers. Incidentally I'm using an image in .navbar-brand and when using your suggested CSS that image shows up in the search bar when it's fully expanded. But it's possible to get round this by toggling the z-index from 1 to -1 using jquery when the search input is fully expanded to stop the image showing through. Thanks for the z-index info though, I wouldn't have got that. – Andy Sep 09 '16 at 09:16