iswg iswg - 1 month ago 21
CSS Question

bootstrap navbar brand image goes out of bounds

enter image description here

I want the image on the top left to be perfectly centered. How do I achieve this?

Also how do I remove the gray highlight that appears(top right) whenever I click open/close a link and move away the mouse?

<div class="navbar navbar-custom">
<div class="container-fluid">

<div class="navbar-header">
<button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#home-news-users" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<%= link_to image_tag("rnc_small.png"), home_path, class: "navbar-brand" %>
</div>


/* Nav Bar */

.navbar.navbar-custom {
background-color: $light_navy;
border-radius: 0;
border: 0;
margin-bottom: 0;
}

.navbar-custom .navbar-header .navbar-toggle {
background-color: white;
}

.navbar-custom .navbar-header .navbar-toggle .icon-bar {
background-color: $light_navy;
}

.navbar-custom .navbar-nav .dropdown-menu {
border: 0;
}

.navbar-custom .navbar-header .navbar-brand {
vertical-align: middle;
}

.navbar-custom .navbar-nav > li > a {
color: white;
}

.navbar-custom .navbar-nav > li > a:hover {
color: $rnc_orange;
background-color: transparent;
}

.navbar-custom .navbar-nav > .close > a,
.navbar-custom .navbar-nav > .close > a:hover,
.navbar-custom .navbar-nav > .close > a:active,
.navbar-custom .navbar-nav > .close > a:focus {
background-color: transparent;
}

.navbar-custom .navbar-nav > .open > a,
.navbar-custom .navbar-nav > .open > a:hover,
.navbar-custom .navbar-nav > .open > a:active,
.navbar-custom .navbar-nav > .open > a:focus {
background-color: transparent;
}

.navbar-custom .navbar-nav .open .dropdown-menu>li>a,
.navbar-custom .navbar-nav .open .dropdown-menu {
background-color: $light_navy;
color:white;
}

.navbar-custom .navbar-nav .dropdown .dropdown-menu > li > a:hover{
color: $rnc_orange;
background-color: transparent;
}

.navbar-custom .navbar-nav .dropdown .dropdown-menu > .close > a,
.navbar-custom .navbar-nav .dropdown .dropdown-menu > .close > a:hover,
.navbar-custom .navbar-nav .dropdown .dropdown-menu > .close > a:active,
.navbar-custom .navbar-nav .dropdown .dropdown-menu > .close > a:focus {
background-color: transparent;
}

.navbar-custom .navbar-nav .dropdown .dropdown-menu > .open > a,
.navbar-custom .navbar-nav .dropdown .dropdown-menu > .open > a:hover,
.navbar-custom .navbar-nav .dropdown .dropdown-menu > .open > a:active,
.navbar-custom .navbar-nav .dropdown .dropdown-menu > .open > a:focus {
background-color: transparent;
}

GvM GvM
Answer

check this fiddle

.navbar-brand>img {
  height: 100%;
}
.navbar-brand {
  padding: 0;
}