How do you align navigation to the right with bootstrap? - Photoshop

tosaDevs
June 25, 2021
94 views
1 vote
2 Answers

We are trying to have our navigation items aligned to the right of our page. We have used a container class as well as align-items-end to no avail. We will admit that this section is pretty hacked together and we don’t quite understand everything that’s going on. What we’re trying to accomplish is to have the top of our page have a cover cover image with our navigation to the right, included in the container, we want a heading and two buttons. We also need our navigation collapse at the small (mobile) breakpoint.

This is our design from Photoshop and what we want our end design to look like.

This is what our current code renders.

What are we doing wrong?

.cover {
  min-height: 500px;
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(img/moco-trucks.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
  position: relative;
}

.navbar-dark .navbar-nav .nav-link {
  color: #fff;
}

.navbar-dark:hover,
.navbar-dark:focus,
.navbar-dark:active {
  color: rgba(199, 84, 40, 1)
}

.nav-item,
.nav-link {
  color: #fff;
  text-transform: uppercase;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  color: #fff;
  background-color: #c75428;
}

.nav-pills .nav-link.active:hover,
.nav-pills .show>.nav-link {
  color: #fff;
  background-color: #a64723;
}

.nav-link:hover,
.nav-link:focus,
.nav-link:active {
  color: #c75428;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<!-- container with bg img -->
<div class="cover">
  <div class="container justify-content-end">
    <!-- NAV Here -->
    <nav class="navbar navbar-expand-sm navbar-dark" aria-label="responsive navbar">
      <a class="navbar-brand" href="index.html"><img src="img/the-other-side-moving-storage-color-white.png" width="75%" height="75%"></a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#responsive-navbar" aria-controls="responsive-navbar" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      <div class="collapse navbar-collapse" id="responsive-navbar">
        <ul class="navbar-nav me-auto mb-2 mb-sm-0">
          <li class="nav-item">
            <a class="nav-link" href="denver-moving-services.html">Moving</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="denver-storage-company.html">Storage</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="receiving-and-delivery.html">Furniture Delivery</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="about-us.html">About</a>
          </li>
          <li class="nav-item">
            <a href="free-estimate.html"><button class="btn btn-tosa" type="submit">Free Estimate</button></a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
  <!-- Nav end -->
  <!-- FS Hero -->
  <div class="container-xl mb-4">
    <div class="row text-center">
      <div class="col-12">
        <h1 class="py-5">Denver Moving and Storage</h1>
        <a href="free-estimate.html"><button type="button" class="btn btn-tosa mx-3">Free Estimate</button></a>
        <a href="about-us.html"><button type="button" class="btn btn-outline-tosa mx-3">Our Story</button></a>
      </div>
    </div>
  </div>
  <!-- End FS Hero -->
</div>
<!-- End Cover -->

Answers

I’ve applied justify-content-end to the link wrapper.

See all flex utilities.

.cover {
  min-height: 500px;
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(img/moco-trucks.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
  position: relative;
}

.navbar-dark .navbar-nav .nav-link {
  color: #fff;
}

.navbar-dark:hover,
.navbar-dark:focus,
.navbar-dark:active {
  color: rgba(199, 84, 40, 1)
}

.nav-item,
.nav-link {
  color: #fff;
  text-transform: uppercase;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  color: #fff;
  background-color: #c75428;
}

.nav-pills .nav-link.active:hover,
.nav-pills .show>.nav-link {
  color: #fff;
  background-color: #a64723;
}

.nav-link:hover,
.nav-link:focus,
.nav-link:active {
  color: #c75428;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<!-- container with bg img -->
<div class="cover">
  <div class="container">
    <!-- NAV Here -->
    <nav class="navbar navbar-expand-sm navbar-dark d-flex" aria-label="responsive navbar">
      <a class="navbar-brand" href="index.html"><img src="https://via.placeholder.com/60" width="75%" height="75%"></a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#responsive-navbar" aria-controls="responsive-navbar" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      <div class="collapse navbar-collapse justify-content-end" id="responsive-navbar">
        <ul class="navbar-nav me-auto mb-2 mb-sm-0">
          <li class="nav-item">
            <a class="nav-link" href="denver-moving-services.html">Moving</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="denver-storage-company.html">Storage</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="receiving-and-delivery.html">Furniture Delivery</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="about-us.html">About</a>
          </li>
          <li class="nav-item">
            <a href="free-estimate.html"><button class="btn btn-tosa" type="submit">Free Estimate</button></a>
          </li>
        </ul>
      </div>
    </nav>
    <!-- Nav end -->
  </div>
  <!-- FS Hero -->
  <div class="container-xl mb-4">
    <div class="row text-center">
      <div class="col-12">
        <h1 class="py-5">Denver Moving and Storage</h1>
        <a href="free-estimate.html"><button type="button" class="btn btn-tosa mx-3">Free Estimate</button></a>
        <a href="about-us.html"><button type="button" class="btn btn-outline-tosa mx-3">Our Story</button></a>
      </div>
    </div>
  </div>
  <!-- End FS Hero -->
</div>
<!-- End Cover -->

I added this code to your CSS:

#responsive-navbar .navbar-nav{
  position: absolute !important;
  right: 0;
}

to make the navbar position to the right.

.cover {
  min-height: 500px;
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),url(img/moco-trucks.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
  position: relative;
}

.navbar-dark .navbar-nav .nav-link {
    color: #fff;
}

.navbar-dark:hover, .navbar-dark:focus, .navbar-dark:active{
  color: rgba(199, 84, 40, 1)
}

.nav-item, .nav-link {
  color: #fff;
  text-transform: uppercase;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #fff;
    background-color: #c75428;
}

.nav-pills .nav-link.active:hover, .nav-pills .show>.nav-link {
    color: #fff;
    background-color: #a64723;
}

.nav-link:hover, .nav-link:focus, .nav-link:active {
  color: #c75428;
}
#responsive-navbar .navbar-nav{
  position: absolute !important;
  right: 0;
}

<!-- container with bg img -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <div class="cover">
    <div class="container justify-content-end">
      <!-- NAV Here -->
      <nav class="navbar navbar-expand-sm navbar-dark" aria-label="responsive navbar">
        <a class="navbar-brand" href="index.html"><img src="img/the-other-side-moving-storage-color-white.png" width="75%" height="75%"></a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#responsive-navbar" aria-controls="responsive-navbar" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="responsive-navbar">
          <ul class="navbar-nav me-auto mb-2 mb-sm-0">
            <li class="nav-item">
              <a class="nav-link" href="denver-moving-services.html">Moving</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="denver-storage-company.html">Storage</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="receiving-and-delivery.html">Furniture Delivery</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="about-us.html">About</a>
            </li>
            <li class="nav-item">
              <a href="free-estimate.html"><button class="btn btn-tosa" type="submit">Free Estimate</button></a>
            </li>
          </ul>
        </div>
      </nav>
    </div>
    <!-- Nav end -->
    <!-- FS Hero -->
    <div class="container-xl mb-4">
      <div class="row text-center">
        <div class="col-12">
          <h1 class="py-5">Denver Moving and Storage</h1>
          <a href="free-estimate.html"><button type="button" class="btn btn-tosa mx-3">Free Estimate</button></a>
          <a href="about-us.html"><button type="button" class="btn btn-outline-tosa mx-3">Our Story</button></a>
        </div>
      </div>
    </div>
    <!-- End FS Hero -->
  </div>
  <!-- End Cover -->

Please signup or login to give your own answer.

Click here to cancel reply.

How do you align navigation to the right with bootstrap? – Photoshop

Answers