CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
Denis Yakovenko
Denis Yakovenko

Reputation: 3535

The html link is rendered on the page but behaves like it doesn't exist

I have the navbar made with Bootstrap 3.3.5 and there's the navbar-brand anchor element on the very left: here's the codepen with the code and here's the full page view.

The problem is the following:

this link element <a href='#' class='navbar-brand'>Symphony</a> is rendered, I can see it, but its behavior, it's like there's nothing at all. I can't click the link, I can't even select the text inside it.

Any ideas on what the actual problem could be? Is it possible that some CSS somehow implicitly breaks the link or the jQuery code does something wrong?

Update

I've tried adding this at the end if my stylesheet:

a.navbar-brand {
  z-index: 0/-9999/9999 !important;
}

Upvotes: 2

Views: 66

Answers (3)

Georgette Pincin
Georgette Pincin

Reputation: 292

As per my comment:

<div class="collapse navbar-collapse js-navbar-collapse">

is overlapping the element with the a-link. You can reorganize the html so that doesn't happen or do this:

.nav-brand {
      position:relative;
      z-index:10;
 }

code pen update

Upvotes: 2

Irfan Anwar
Irfan Anwar

Reputation: 1918

Masoom's answer is correct

if you dont want to change css then change position of this <a href='#' class='navbar-brand'>Symphony</a> like this

<div class="main-navbar">
<nav class="navbar navbar-default">
<div class="navbar-header">
    <button class="navbar-toggle" type="button" data-toggle="collapse"    data-target="js-navbar-collapse"> 
     <span class="sr-only">Toggle navigation</span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
   </button>

</div>


<!--"Browse the Store" DROPDOWN -->
<div class="collapse navbar-collapse js-navbar-collapse">

  <ul class="nav navbar-nav">

    <a href="https://google.com" class="navbar-brand">Symphony</a>

    <li class="dropdown mega-dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Browse The Store<span class="glyphicon glyphicon-chevron-down"></span></a>
      <ul class="dropdown-menu mega-dropdown-menu row">
        <li class="col-sm-3">
          <ul>
            <li class="dropdown-header">New in Symphony</li>
            <div id="myCarousel" class="carousel slide" data-ride="carousel">
              <div class="carousel-inner">
              </div>
              <!-- End Carousel Inner -->
            </div>
            <!-- /.carousel -->
            <li class="divider"></li>
            <li><a href="#">View all Instruments <span class="glyphicon glyphicon-chevron-right pull-right"></span></a></li>
          </ul>
        </li>
        <li class="col-sm-3">
          <ul>
            <li class="dropdown-header">Violins</li>
            <li class="divider"></li>
            <li class="dropdown-header">Pianos</li>
          </ul>
        </li>
        <li class="col-sm-3">
          <ul>
            <li class="dropdown-header">Guitars</li>
            <li class="divider"></li>
            <li class="dropdown-header">Saxophones</li>
          </ul>
        </li>
        <li class="col-sm-3">
          <ul>
            <li class="dropdown-header">Support</li>
            <li><a href="#">About</a></li>
            <li><a href="#">Delivery Info</a></li>
            <li><a href="#">FAQ &amp; Help</a></li>
            <li><a href="#">Contacts</a></li>
            <li class="divider"></li>
            <li class="dropdown-header">Newsletter</li>
            <form class="form" role="form">
              <div class="form-group">
                <label class="sr-only" for="email">Email address</label>
                <input type="email" class="form-control" id="email" placeholder="Enter email">
              </div>
              <button type="submit" class="btn btn-primary btn-block">Subscribe</button>
            </form>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
  <!--END "Browse the Store" DROPDOWN -->


  <!-- ========== (LOGIN) JOHN SMITH PROFILE ============= -->
  <ul class="nav navbar-nav navbar-right">
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">John Smith (₴560000)<span class="glyphicon glyphicon-chevron-down"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Profile</a></li>
        <li><a href="#">Shopping Cart (₴560000)</a></li>
        <li><a href="#">Settings</a></li>
        <li role="separator" class="divider"></li>
      </ul>
    </li>
  </ul>

  <!-- ========== END (LOGIN) JOHN SMITH PROFILE ============= -->


  <!-- ======= START SEARCH ========== -->
  <form class="navbar-form" role="search">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search">
      <span class="input-group-btn">
          <button type="reset" class="btn btn-default">
            <span class="glyphicon glyphicon-remove">
              <span class="sr-only">Close</span>
      </span>
      </button>
      <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-search">
              <span class="sr-only">Search</span>
        </span>
      </button>
      </span>
    </div>
  </form>
  <!-- === END SEARCH === -->

Upvotes: 2

Masoom
Masoom

Reputation: 731

Add the below code to .navbar-brand and see.

position: relative;
z-index: 1;

It is because this element is overlapping with .nav-bar. It will work fine if u increase z-index and to do that, we should change the position: static of that element to other position value. In your case position: relative will work.

Upvotes: 3

Related Questions