Bootstrap - remove background from navbar link

I’m trying to work on coding a website using the Bootstrap development kit. I’ve set up the navigation bar with a couple of links but I’m having some trouble with some custom links I’ve added. I added CSS to the bootstrap.min.css file titled ‘navbar-social’, which will be used to house social media icons for the navigation bar.

I added the images just fine and they display great. The problem I’m having is when I add a link to them they go out of line and hovering over them gives them a background box which I do not want.

I’ve attached some screenshots and the code used, I cannot for the life of me work out where the background box is coming from, because checking the a styles doesn’t seem to have anything there. I’m new to CSS so I apologise if I’m missing something obvious.

None linked:

LinkedIn not linked, rest linked:

CSS code added to bootstrap.min.css. Rest is as it comes:

  float:right !important;

HTML: (a href removed in this case)

<nav class="navbar navbar-default navbar-static-top" role="navigation">
  <div class="container">
       <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        <a class="navbar-brand" href="">REMOVED</a>

      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
              <li class="active"><a href="">About</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Programming <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Java</a></li>
                  <li><a href="#">C++</a></li>
                  <li><a href="#">Actionscript 3.0</a></li>
              <li><a href="">Web Design</a></li>
          <ul class="nav pull-right">
              <li class="navbar-social"><img src="images/linkedin.png" alt="LinkedIn" /></li>
              <li class="navbar-social"><img src="images/github.png" alt="GitHub" /></li>
              <li class="navbar-social"><img src="images/twitter.png" alt="Twitter" /></li>
              <li class="navbar-social"><img src="images/facebook.png" alt="Facebook" /></li>

Thanks all!


Bootstrap adds styling to the child a elements. You could simply overwrite it using the following:


.nav .navbar-social > a {
.nav>li>a:hover, .nav>li>a:focus {
  background-color: transparent;