CODEWITHSUNDEEP
htmlbootstrap-4navbarnav
Jordan Mahsman
Jordan Mahsman

Reputation: 104

Image won't move to the left of my navbar

I'm trying to get the image "travel.png" to be at the left side of my navbar, like it's hugging the left side of the screen.

(https://i.sstatic.net/I9tJw.jpg)

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
  <div class="container">
   <a class="navbar-brand" href="travelindex.html">
    <img src="travel.png" width="30" height="30" class="d-inline-block align-top" alt="">
  </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="travelindex.html">Home
                <span class="sr-only">(current)</span>
              </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="reservations.html">Reservations</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="aboutus.html">About Us</a>
        </li>
      </ul>
    </div>
  </div>

Upvotes: 0

Views: 588

Answers (1)

IvanS95
IvanS95

Reputation: 5732

I'm not really clear and what the issue is; testing your code it looks like the image is where its supposed to be, however, if you are referring to the image being somewhat centered on the screen, its because of the .container element you have inside the navbar, removing this would cause the navbar to use the full available width of the screen.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
  <div class="container">
    <a class="navbar-brand" href="travelindex.html">
      <img src="https://via.placeholder.com/30" class="" alt="">
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="travelindex.html">Home
                <span class="sr-only">(current)</span>
              </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="reservations.html">Reservations</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="aboutus.html">About Us</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Without container

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<!-- Without container -->
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
  <a class="navbar-brand" href="travelindex.html">
    <img src="https://via.placeholder.com/30" class="" alt="">
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
  <div class="collapse navbar-collapse" id="navbarResponsive">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="travelindex.html">Home
                <span class="sr-only">(current)</span>
              </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="reservations.html">Reservations</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="aboutus.html">About Us</a>
      </li>
    </ul>
  </div>
</nav>

Upvotes: 1

Related Questions