Put a Logo on Twitter Bootstrap Navbar Without Resizing the Navbar

Put a logo on twitter bootstrap navbar without resizing the navbar

the links come over the logo

This is caused by the absolute positioning.

Update Without resizing the image :

.navbar .brand {
    max-height: 40px;
    overflow: visible;
    padding-top: 0;
    padding-bottom: 0;
}

Demo without resizing image (jsfiddle)

Insert a Logo on navbar without bootstrap

Simply nest the logo image into the nav and give it a class. I called it logo. Then you can position it wherever you desire using absolute positioning. In this demonstration, I positioned it in top left corner using top & left values under logo.

You can nest in an a href to make it "clickable"

* {
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-image: linear-gradient( 89.8deg, rgba(222, 74, 74, 1) 4.7%, rgba(30, 29, 29, 1) 120.3%);
}

nav {
  background: rgb(53, 66, 185);
  height: 70px;
  width: 100%;
}

nav ul {
  float: right;
  margin-right: 20px;
}

nav ul li {
  display: inline-block;
  line-height: 80px;
  margin: 0 5px;
}

nav ul li a {
  color: white;
  font-size: 17px;
  text-transform: uppercase;
  padding: 7px 13px;
  border-radius: 7px;
}

a.active,
a:hover {
  background: turquoise;
  transition: .5s;
}

.logo {
  width: 100px;
  height: 50px;
  position: absolute;
  top: 10px;
  left: 5px;
}

<body>
  <nav>
    <a href="#home">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTEkYgCth5MCuFtmT_dV3T2erG1nLltT1A0Gg&usqp=CAU" alt="logo" class="logo" />
    </a>
    <ul>

      <li> <a href="link">HOME/BIGLIETTERIA</a></li>
      <li> <a href="link">FILM</a></li>
      <li> <a href="link">DOVE SIAMO</a></li>
      <li> <a href="link">INFO E REGOLAMENTO</a></li>
      <li> <a href="link">ACCEDI/REGISTRATI</a></li>
    </ul>
  </nav>
</body>

How to avoid Logo changing position on resizing of window?

I added some background color so you can easily see the block for each container. The logo will be red, the navbar-header will be yellow, and the navbar-collapse will be green.

navbar-brand has a float: left so it will float to the left of the block, if you have it after navbar-header(which has display:block so it will take the whole width of the screen) block it will just floating left below, you can move it inside navbar-header or move it up outside of container-fluid.

.navbar-brand {

  background: red;

  float: right;

  display: block;

}

.navbar-header {

  background: yellow;

}

.navbar-collapse {

  background: green;

}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- Navigation Bar -->

<div class="navbar navbar-default" id="navbar-outer">

  <div class="container-fluid" style="margin:0px;">

    <div class="navbar-header">

      <a class="navbar-brand" href="#">

        <img src="../images/LOL_LOGO_NEW-01.png" />

      </a>

      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">

        <span class=" glyphicon glyphicon-menu-hamburger"></span>

      </button>

    </div>

    <div class="collapse navbar-collapse" id="menu">

      <ul class="navbar navbar-nav" id="navbar-menu">

        <li><a href="#">WHAT WE DO</a></li>

        <li><a href="#">WHO WE ARE</a></li>

        <li><a href="#">OUR WORK</a></li>

        <li><a href="#">VENTURES</a></li>

        <li><a href="#">BLOG</a></li>

        <li><a href="#">CONNECT</a></li>

      </ul>

    </div>

  </div>

Trying to resize an Image to fit on a Nav Bar in CSS without disturbing all other elements on the page

The MDN article on images covers many ways to handle this. You could target the img element and limit it to the size of the container or whatever it is appropriate in your case, for example:

img {
  max-width: 100%;
}

I've used img directly, but you'd probably use a class. One important point though, is that if you control the image, it might be better to resize the actual source, so that bandwidth is not wasted by downloading an unnecessarily large file.

Resize bootstrap navbar brand logo keeping proportions

In the CSS you provided, you may be referencing the wrong class name. You would need to override the .navbar-brand class, but you are referencing a .brand class name within .navbar. As such, the styles will not be applied to the element you are wanting it to.

Also, did you try using the class="img-responsive"on the image?

<a class="navbar-brand" href="#"><img alt="Brand" src="images/logo.png" class="img-responsive" /></a>

Otherwise, take a look at this Stackoverflow article, as it is similar: Bootstrap 3 Navbar with Logo.

Hope this helps your cause.

Put a Logo on Twitter Bootstrap Navbar Without Resizing the Navbar