Logo above bootstrap navbar

Question

Hello I am trying to put a logo above the bootstrap navbar:

https://jsfiddle.net/3jod2k8z/1/

<div>

<div id="logo"><img src="http://www.benchmarklearning.co.uk/photo/logo.jpg" class="img-responsive" alt="bmlogo"> </div>

<div class="container-fluid">



<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header"> 
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

    <span class="sr-only">Toggle navigation</span>

    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>

  <a class="navbar-brand" href="#"><img src="logotest.png">Benchmark</a>


   </div> 

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
  <ul class="nav navbar-nav">


      <!-- class="active"-->
    <li><a href="#a">About</a></li>
    <li><a href="#b">Who we are</a></li>
    <li><a href="#c">Latest Publications</a></li>
    <li><a href="#d">Online Center</a></li>
    <li><a href="#e">Our Partners</a></li>
    <li><a href="#f">English My Way</a></li>
    <li><a href="#g">Apprenticeship</a></li>
    <li><a href="#h">IT Academy</a></li>
    <li><a href="languagesense.html">Learning Sense</a></li>
  </ul>
</div><!-- /.navbar-collapse -->

As you can see the image is miniature and I cant seem to fix it, also is there a way to centre align it no matter what screen size?

Thank You

Answer 1

style name [logo] edit,

#logo{
    padding-top:10px;
    width:100%;
}

to

#logo img{
    padding-top:10px;
    width:100%;
}

https://jsfiddle.net/3jod2k8z/6/

Answer 2

As I realized you want to center align(horizontally?) it so its width won't (always) be 100%? If that's the case this should do the trick:

#logo img{
  display:block;
  margin: 0 auto;
  height:200px;
  width:auto;
}

here is the fiddle

Answer 3

Set the display to block and use margin to center the image. Then you can use media queries to keep it responsive on smaller viewports. You may also want to set the background color of the #logo div to white since your image doesn't have a transparent background and would look odd if you have background set on the body.

See working Example Snippet.

 html, body { background: lightblue; } .navbar.navbar-default { background-color: #132D93; /* Old browsers */ background-image: -moz-linear-gradient(left, #0000CD 32%, #4169E1 50%, #0000CD 68%); /* FF3.6+ */ background-image: -webkit-gradient(linear, left top, right top, color-stop(32%, #0000CD), color-stop(50%, #4169E1), color-stop(68%, #0000CD)); /* Chrome,Safari4+ */ background-image: -webkit-linear-gradient(left, #0000CD 32%, #4169E1 50%, #0000CD 68%); /* Chrome10+,Safari5.1+ */ background-image: -o-linear-gradient(left, #0000CD 32%, #4169E1 50%, #0000CD 68%); /* Opera 11.10+ */ background-image: -ms-linear-gradient(left, #0000CD 32%, #4169E1 50%, #0000CD 68%); /* IE10+ */ background-image: linear-gradient(to right, #0000CD 32%, #4169E1 50%, #0000CD 68%); /* W3C */ filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#0000CD', endColorstr='#0000CD', GradientType=1); /* IE6-9 */ border-bottom: 6px solid #B9975B; margin-bottom: 0px; } #logo { width: 100%; background: white; } #logo img { display: block; margin: 0 auto; height: 150px; padding: 10px; } .navbar.navbar-default ul li a { color: white; text-transform: uppercase; font-size: 13px; padding: 20px 10px; font-weight: bold; } .navbar.navbar-default .navbar-header a { color: white; text-transform: uppercase; font-size: 13px; padding: 20px 10px; font-weight: bold; } .navbar.navbar-default .navbar-brand { color: white; margin-top: -6px; } .navbar.navbar-default .navbar-brand img { margin-left: 23px; width: 40px; } .navbar.navbar-default .navbar-nav > .active > a, .navbar.navbar-default .navbar-nav > .active > a:hover, .navbar.navbar-default .navbar-nav > .active > a:focus { color: #000; background: #B9975B; font-weight: bold; } .navbar.navbar-default .active { color: #000; background: #B9975B; font-weight: bold; } .navbar.navbar-default .navbar-collapse { max-height: 300px; } .navbar.navbar-default .navbar-collapse li { font-size: 10px; } .navbar.navbar-default #a { color: red; } .navbar.navbar-default #b { color: green; } .navbar.navbar-default #c { color: blue; } .navbar.navbar-default .icon-bar { background-color: #B9975B; } .navbar.navbar-default .navbar-toggle { border: 2px solid #B9975B; } @media (max-width: 767px) { #logo img { height: 125px; } .navbar.navbar-default .navbar-brand { margin-top: -10px; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <div id="logo"> <img src="http://www.benchmarklearning.co.uk/photo/logo.jpg" alt="bmlogo"> </div> <nav class="navbar navbar-default" id="topnavbar"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"> <img src="http://www.benchmarklearning.co.uk/photo/logo.jpg">Benchmark</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="#a">About</a> </li> <li><a href="#b">Who we are</a> </li> <li><a href="#c">Latest Publications</a> </li> <li><a href="#d">Online Center</a> </li> <li><a href="#e">Our Partners</a> </li> <li><a href="#f">English My Way</a> </li> <li><a href="#g">Apprenticeship</a> </li> <li><a href="#h">IT Academy</a> </li> <li><a href="languagesense.html">Learning Sense</a> </li> </ul> </div> </div> </nav>