DomainFlag DomainFlag - 11 months ago 54
CSS Question

Full height responsive logo as much as header in Bootstrap

I have this bootstrap theme-header from laravel auth:

<body id="app-layout" style="background-color:#F5F5F5;">
<nav class="navbar navbar-default navbar-static-top" style="background-color:white;">
<div class="container">
<div class="navbar-header">

<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>

<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">


I want to add my logo after the
<!-- Branding Image -->

<img class="navbar-brand" src="images/logoName.svg"></img>

But the result, is that logo is so small so it can be recognized even if it is in vector format.

enter image description here

My question how to make the logo within the header to be the same height as the header is, or at least make it big enough.

Answer Source

You should set your logo's specific height:

.navbar-brand {
   height: 50px;
   width: 50px;

or use percentages: