CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user7273277
user7273277

Reputation:

Bootstrap Navbar alignment

I'm sorry if the answer to my question is really simple but here it is. So I need to put an image and nav bar in the header of the webpage and have them aligned so that the image is to the left and the nav bar is to the right. I have tried changing the "float" attribute however the nav bar and image are still stacked on top of each other. The image below should hopefully show you what I mean.

Here is my HTML code:

<header>
  <img src="White Logo.png" id="logo"/>
  <div class="container">
    <nav class="navbar navbar-default" id="mNavbar">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li><a href="#">Home</a></li>
            <li><a href="services.html">Services</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
        </div>
      </div>
    </nav>
  </div>
  <a href="#start"><span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span></a>
</header>

Here is the image (the box is where the logo will be): Image 1

Upvotes: 0

Views: 55

Answers (1)

MattD
MattD

Reputation: 4420

As noted in the official Bootstrap documentation, you need to replace the text used in navbar-brand with your image of choice.

<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>

The image tag after the anchor tag is where you'd want to place the image.

The top of your navbar markup should look like this:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <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="#">Brand</a>
    </div>

Where you see the text for Brand in there is where you'll place your image.

Upvotes: 1

Related Questions