Bootstrap - remove background from navbar link

Question

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: http://prntscr.com/2ob9mj LinkedIn not linked, rest linked: http://prntscr.com/2ob2b2 CSS code added to bootstrap.min.css. Rest is as it comes: ``` .navbar-social{ float:right !important; padding:5px;…

Accepted Answer

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

WORKING EXAMPLE HERE

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

Bootstrap - remove background from navbar link

Solution

Problem