CODEWITHSUNDEEP
javascriptcsshtmltwitter-bootstrap
Grady D
Grady D

Reputation: 2039

BootStrap have mobile navbar entire bar dropdown

My site is gitlit.org and when I go mobile or scale my browser the navbar switches to the mobiel design without issues and I can click the three white lines (menu) button and it works but clicking Home does nothing. Is there a way so that the entire bar is clickable?

My navbar code:

  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">Home</a>
  <div class="nav-collapse collapse">
    <ul class="nav navbar-nav">
      <li><a href="about.html">About us</a></li>
      <li><a href="#about">resources</a></li>
      <li><a href="sermons.php">sermons</a></li>
      <li><a href="#contact">contact us</a></li>
      <li><a href="#contact">ministries</a></li>
      <li><a href="#contact">blog</a></li>
    </ul>
  </div>
</div>

Here is my custom CSS that is applied to the NavBar, I did not edit the main bootstrap css:

.navbar {
    background-color: #000;
    float: none;
}
.navbar-toggle {
    border: 0px solid #000;
    border-radius: 6px;
}
.navbar-nav > li > a {
    color: white;
    font-size: 13px;
    text-decoration: none;
    text-transform: uppercase;
}
.navbar-nav > .active > a, .navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus {
    background-color: #000;
    color: white;
}
.navbar-nav > .active > a:hover {
    color: #fdbb20;
}
.navbar-nav > li > a:hover, .navbar-nav > li > a:focus {
    color: #fdbb20;
}
.navbar-brand {
    color: white;
    font-size: 13px;
    text-decoration: none;
    text-transform: uppercase;
}
.navbar-brand:hover, .navbar-brand:focus {
    color: #fdbb20;
}

Upvotes: 1

Views: 2932

Answers (1)

sulfureous
sulfureous

Reputation: 1526

If I'm understanding your issue correctly... why is home outside your .navbar-nav div?

Shouldn't you move it inside with the rest of the menu?

<div class="nav-collapse collapse">
  <ul class="nav navbar-nav">
    <li><a href="#">Home</a></li>
    <li><a href="about.html">About us</a></li>
    <li><a href="#about">resources</a></li>
    <li><a href="sermons.php">sermons</a></li>
    <li><a href="#contact">contact us</a></li>
    <li><a href="#contact">ministries</a></li>
    <li><a href="#contact">blog</a></li>
  </ul>
</div>

If you want it to behave as the 3 little lines then you should add a class and two data- attributes like so:

<a href="#" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">Home</a>
<div class="nav-collapse collapse">
  <ul class="nav navbar-nav">
    <li><a href="about.html">About us</a></li>
    <li><a href="#about">resources</a></li>
    <li><a href="sermons.php">sermons</a></li>
    <li><a href="#contact">contact us</a></li>
    <li><a href="#contact">ministries</a></li>
    <li><a href="#contact">blog</a></li>
  </ul>
</div>

Let me know if this is what you meant and if it worked for you, if it's the right answer for this question remember to mark it... if not just let me know so I can modify it to be the right answer :)

Upvotes: 1

Related Questions