CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Thomas Hutton
Thomas Hutton

Reputation: 803

Put Image Beside Navbar Bootstrap

Edit #1: Here's a picture of the issue:

enter image description here

Edit #2: Here's a picture after I use the brand class

enter image description here

Edit #3:

enter image description here

I'm trying to float an image beside a navbar. It works until I have the navbar 100% width. Then the navbar goes below the image.

Here's my HTML:

<nav class="navbar navbar-default navbar-static-top">
    <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">
            <img alt="Brand" class="pull-left" src="Images/logo.png">
          </a>
        </div>
        <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
        <span class="icon-bar"></span>
        </button>
        <div class="collapse navbar-collapse navHeaderCollapse">
            <ul class="nav navbar-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">Internet</a></li>
                <li><a href="#">Phone</a></li>
                <li><a href="#">Android TV</a></li>
                <li><a href="#">Shaw Direct</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
    </div>  
    </div>
</nav>

And here's my CSS:

.Navlinks {
    font-size: 24px;
    color: white;
    padding-top: 50%;
    vertical-align: middle;
}
.Navlinks:hover {
    color: white;
}
.Navlinks:focus {
    color: white;
}
.navbar-default {
    background-color: #00AEFE;
    height: 89px;
}

.nav.navbar-nav li a{
    color: white;
    font-size: 18px;
}

Is there a way to make sure these two can float side by side?

Upvotes: 0

Views: 1952

Answers (2)

mohamad faramarzi
mohamad faramarzi

Reputation: 536

This answer is based on @Serg Chernata answer

Your logo must be transparent and if it's so bigger than what you want, maybe a css style width or height to <img> tag is needed. something like navbar-brand > img {height: 40px;}

also you should move <button> into <div class="navbar-header"> to right positioning of navbar toggle button in mobile devices.

.Navlinks {
  font-size: 24px;
  color: white;
  padding-top: 50%;
  vertical-align: middle;
}
.Navlinks:hover {
  color: white;
}
.Navlinks:focus {
  color: white;
}
.navbar-default {
  background-color: #00AEFE;
  height: 89px;
}
.nav.navbar-nav li a {
  color: white;
  font-size: 18px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" class="pull-left" src="Images/logo.png">
      </a>
      <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse navHeaderCollapse">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">Internet</a>
        </li>
        <li><a href="#">Phone</a>
        </li>
        <li><a href="#">Android TV</a>
        </li>
        <li><a href="#">Shaw Direct</a>
        </li>
        <li><a href="#">Contact Us</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Upvotes: 0

Serg Chernata
Serg Chernata

Reputation: 12400

There's an example in official docs:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

https://getbootstrap.com/components/#navbar-brand-image

Upvotes: 1

Related Questions