CODEWITHSUNDEEP
twitter-bootstrap-3navbar
Andrea
Andrea

Reputation: 23

Get Rid of white space around navbar-brand?

I'm a newbie and I'm trying to get rid of extra "white" space around my navbar-brand. I want the background to be the same color, no borders, but I can't figure how what's causing it or how to target it.

I am also trying to target the background of the other links when hovering.

Any suggestions?

<nav role="navigation" class="navbar navbar-fixed-top">
        <div class="container">
          <header class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-collapse">
                 <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
             </button>
<!--navbar-brand-->
               <a class="navbar-brand" href="#"><span class="first-name">Sume</span></a>
          </header>
          <div class="collapse navbar-collapse" id="nav-collapse">
             <ul class="nav navbar-nav">
              <li class="active"><a href="#intro">About</a></li>
              <li><a href="#exp">Experience</a></li>
              <li><a href="#skl">Technical Skills</a></li>
              <li><a href="#contact">Contact</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </nav>

CSS

.navbar-nav a {
  color: white;
  font-size:125%;
}
.navbar .navbar-header .navbar-brand {
    color: white;
} 
.navbar {
  background-color:rgb(37,96,155);

}
.navbar .navbar-brand {
  background-color:rgb(37,96,155);
  color:white;
}

Upvotes: 1

Views: 467

Answers (1)

Marcelo
Marcelo

Reputation: 4425

Looks like you accidentally opened a new button element instead of closing the one you started. Change this block like so:

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

Upvotes: 1

Related Questions