Bootstrap Responsive Media Query for Showing and Centering Elements Not Working on Ralis

Question

I currently am working with Bootstrap V4 and I'm trying to create a responsive navbar. On ipad and all mobile devices, I want my navbar brand/title to be centered aligned and for the links to disappear, and also for the sticky bottom navbar to appear. Currently, I have three issues:

1. I'm not sure how to make the sticky bottom nav only appear on the ipad screen widths and below.
2. The text-align center doesn't seem to be working.
3. on smaller screen widths, the li links on the bottom nav turn into a vertical list.

Currently, here's my _nav.html.erb

<nav class="navbar navbar-expand-lg">
  <a class="navbar-brand" id='title' href="#">App</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto">
        <li class="nav-item">
            <a class="nav-link" href="#">Leaderboard</a>
        </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Challenges</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">My Team</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Gallery</a>
        </li>
    
    </ul>
  </div>


  <nav class="navbar fixed-bottom navbar-light bg-light justify-content-center" >
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="#">Leaderboard</a>
        </li>
        <li class="nav-item">
             <a class="nav-link" href="#">Challenges</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">My Team</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Gallery</a>
        </li>

    </ul>
    </nav>
</nav>

And here's my application.scss

@import "bootstrap";

.navbar{
    background-color:pink;
}

@media only screen and (max-width: 1200px) {

    .navbar-brand {
        display:inline-block;
        text-align: center;
    }

}

Any help or feedback would be appreciated!

Answer 1

1. you can add bootstrap class d-{size}-none, like d-md-none to your nav fixed bottom. md stands for a bootstrap breakpoint. you can overwrite it, or even add others if you will. if that doesn't pleases you can add media breakpoint with display: none to your footer nav.

2. text-align wont work for inline-block. the tag width will be the same as the text, hence the text will be centered already.

you could try to display: block; width: 100;. that would make the text centered,. or use text-center class to your parent. but still you may have issues other elements on your nav (e.g. button element) that may harm your nav-brand to be perfectly centered.

a guarantee approach is to use position absolute like below (you just have to certify that parent has its position declared, which in bootstrap case it has):

---

@media only screen and (max-width: 1200px) {
  .navbar-brand {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

---

3. bootstrap use display flex to ul element to align li elements. it sets flex-direction to row direction at larger screen while for smaller it sets to column. you want to be be row direction for smaller so you need to overwrite to be row only just set the ul class as navbar-nav flex-row.

you will face another issue since bootstrap also overwrites all horizontal padding on anchor tags to zero at smaller screens. to have the same padding as before you may need to set each link class as nav-link px-2, or set another horizontal padding of your liking to your anchor tags.