CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Lechucico
Lechucico

Reputation: 2102

Inserting image on bootstrap navbar

I'm trying to set an image on the navbar but I can't just place it correctly.

Here is the html:

<nav class="navbar navbar-inverse navbar-fixed-top  ">
  <div class="navbar-header">
    <a class="navbar-brand" href="#">
      <img width="130px" height="70px"src="{% static "series/images/logo.png"%}">
    </a>
    <a class="navbar-brand" href="{% url 'series:index'%}">
      <span class="glyphicon glyphicon-home"></span> | MEGA SERIES  </a>
  </div>
  <ul class="nav navbar-nav">
    <li class="active"><a href="{% url 'series:index'%}">Series</a></li>
  </ul>
</nav>

Here is how the image shows:

enter image description here

What I could do?

Thanks.

Upvotes: 2

Views: 22089

Answers (3)

neophyte
neophyte

Reputation: 6626

You can do this in this way--

Working Example

 .navbar-inverse .navbar-brand {
  display: flex;
  align-items: center;
  padding: 5px;
}
.navbar-brand img {
  height: 100%;
  margin-right: 20px;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
           <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
           <style type="text/css">
           
           </style>
           </head>
           <body>
            <nav class="navbar navbar-inverse navbar-fixed-top  ">
  <div class="navbar-header">
    <a class="navbar-brand" href="#">
      <img classs="img-responsive" width="130px" height="" src="https://cdn.pixabay.com/photo/2016/02/19/15/46/dog-1210559_960_720.jpg">
    </a>
    <a class="navbar-brand" href="">
      <span class="glyphicon glyphicon-home"></span> | MEGA SERIES  </a>
  </div>
  <ul class="nav navbar-nav">
    <li class="active"><a href="">Series</a></li>
  </ul>
</nav>
  </body>
  </html>

Upvotes: 1

Jhay
Jhay

Reputation: 76

You can use CSS to align the image. 

<img width="130px" height="70px"src="{% static "series/images/logo.png"%}" style="position:relative;top:-10px">

Upvotes: 3

klepzers
klepzers

Reputation: 149

.navbar-brand should have display:inline-block; .navbar-brand .img should have max-width, max-height;

Also try adding vertical-align: top;

Upvotes: 0

Related Questions