bootstrap 4 fixed bottom nav and fixed header container fluid padding bug

97
June 09, 2018, at 10:50 PM

I have battling this issue for a bit now, and I am stumped. I want to have fixed header and footer navigations with fluid containers in between. I want one of the fluid containers, the main tag, to have no padding. However, when I remove it's adding it breaks the nav fixed to the bottom of the page.

CSS

.navbar {
  min-width: map-get($grid-breakpoints, 'minimium') !important;
  box-shadow: 0 0 0.25rem 0.25rem $purple-darkest;
  @include primary-font();
  .navbar-toggler {
    color: $white;
    border: none;
    border-radius: 0;
    padding: 0.25rem 0;
    button {
      color: $white;
      font-size: 1.25rem;
      line-height: 1;
      background-color: transparent;
      border: 1px solid $white;
      border-radius: .25rem;
      cursor: pointer;
      outline: none;
      @include media-breakpoint-up(xs) {
        padding: .50rem 1rem;
      }
      @include media-breakpoint-up(transition) {
        padding: .75rem 1.25rem;
      }
      @include media-breakpoint-up(sm) {
        display: none;
      }
    }
    .navbar-title {
      color: $white;
      @include secondary-font();
      @include media-breakpoint-up(xs) {
        line-height: 2.5rem;
        font-size: 1.20rem;
      }
      @include media-breakpoint-up(transition) {
        line-height: 3.2rem;
        font-size: 1.5rem;
      }
      @include media-breakpoint-up(lg) {
        line-height: inherit;
        text-align: right;
        white-space: nowrap;
        padding-top: 1rem;
      }
    }
    @include media-breakpoint-up(xs) {
      display: flex;
    }
    @include media-breakpoint-up(sm) {
      &:not(:disabled) {
        cursor: default;
      }
    }
  }
  .navbar-nav-item-wrapper {
    padding-right: 0;
    padding-left: 0;
    .navbar-nav {
      border: none;
      li {
        &:hover {
          box-shadow: 0 0 0.25rem 0.25rem $purple-medium-dark;
          background-color: $purple-medium-dark;
          color: $white;
          @include media-breakpoint-up(sm) {
            box-shadow: 0 0 1rem 0 $purple-medium-dark;
          }
          @include media-breakpoint-up(lg) {
            margin-top: -1rem;
            border-radius: 1.5rem 1.5rem 0 0;
            margin-bottom: -1rem;
            padding-top: 1rem;
          }
        }
        .nav-icon {
          margin-right: 0.50rem;
        }
        @include media-breakpoint-up(sm) {
          .nav-icon {
            margin-right: 0;
          }
        }
        .nav-link {
          padding: 1.25rem 1rem;
          &:hover {
            color: $white;
          }
          @include media-breakpoint-up(xs) {
            span {
              display: inline;
            }
          }
          @include media-breakpoint-up(sm) {
            font-size: 1.5rem;
            padding: 2rem;
            span {
              display: none;
            }
          }
        }
        @include media-breakpoint-up(xs) {
          text-align: left;
        }
        @include media-breakpoint-up(sm) {
          text-align: center;
        }
      }
      @include media-breakpoint-down(sm) {
        border-top: 0.15rem solid $purple-medium-dark;
        margin-top: 0.75rem;
      }
      @include media-breakpoint-up(sm) {
        border-top: 0;
        margin-top: 0;
        align-items: stretch;
        justify-content: space-around;
      }
      @include media-breakpoint-up(md) {
        max-width: none;
      }
      @include media-breakpoint-up(lg) {
        max-width: map-get($grid-breakpoints, "lg");
      }
      @include media-breakpoint-up(xl) {
        max-width: map-get($grid-breakpoints, "xl");
      }
    }
  }
  .navbar-header-wrapper {
    @include media-breakpoint-up(sm) {
      border-bottom: 0.15rem solid $purple-medium-dark;
    }
    @include media-breakpoint-up(lg) {
      border-bottom: 0;
      max-width: 375px;
    }
  }
  .container {
    @include media-breakpoint-up(sm) {
      margin: 0;
      max-width: inherit;
    }
    @include media-breakpoint-up(md) {
      margin: auto;
      max-width: none;
      padding: 0;
    }
    @include media-breakpoint-up(xl) {
      max-width: map-get($grid-breakpoints, "lg");
    }
  }
  .navbar-description-wrapper {
    color: $gray-600;
    text-align: right;
    @include media-breakpoint-up(xs) {
      display: none;
      .fa-arrow-circle-down {
        display: inline;
      }
      .fa-arrow-circle-right{
        display: none;
      }
    }
    @include media-breakpoint-up(sm) {
      display: block;
      font-size: 1rem;
      line-height: 3.8rem;
      min-height: 3.8rem;
    }
    @include media-breakpoint-up(lg) {
      font-size: 0.75rem;
      padding-top: 0.50rem;
      line-height: 1.5rem;
      min-height: 2rem;
      .fa-arrow-circle-down {
        display: none;
      }
      .fa-arrow-circle-right{
        display: inline;
      }
    }
  }
  @include media-breakpoint-up(md) {
    .navbar-toggler,
    .navbar-nav {
      margin: auto;
      max-width: map-get($grid-breakpoints, "maximum");
    }
  }
  @include media-breakpoint-up(sm) {
    padding: 0.5rem 0 0 0;
    margin-bottom: 0;
  }
  @include media-breakpoint-up(lg) {
    padding: 0;
  }
}

HTML

<body id="index">
    <div id="cover"></div>
    <header class="container-fluid fixed-top navigation-header">
      <div class="row flex-fill">
        <div class="col">
          <a href="/" class="home-link">
                <div class="flex-fill">
                  <span class="prefix">About</span><span class="username">Chris Hough</span><i class="em-svg em-face_with_monocle"></i>
                </div></a>
        </div>
      </div>
    </header><main class="container-fluid content-wrapper"><div class="container content-wrapper-body">
        <div class="row">
          <div class="col-3 personal-data-wrapper-left-stack">
            <div class="row">
              <div class="col personal-data-wrapper">
                <i class="fab fa-linkedin-in"></i>
              </div>
            </div>
            <div class="row">
              <div class="col personal-data-wrapper">
                <i class="fab fa-github"></i>
              </div>
            </div>
            <div class="row">
              <div class="col personal-data-wrapper">
                <i class="fas fa-road"></i>
              </div>
            </div>
            <div class="row">
              <div class="col personal-data-wrapper">
                <i class="fas fa-wrench"></i>
              </div>
            </div>
          </div>
          <div class="col-6">
            TEST
          </div>
          <div class="col-3">
            <div class="col-3 personal-data-wrapper-right-stack">
              <div class="row">
                <div class="col personal-data-wrapper">
                  <i class="fab fa-instagram"></i>
                </div>
              </div>
              <div class="row">
                <div class="col personal-data-wrapper">
                  <i class="fab fa-facebook-f"></i>
                </div>
              </div>
              <div class="row">
                <div class="col personal-data-wrapper">
                  <i class="fab fa-twitter"></i>
                </div>
              </div>
              <div class="row">
                <div class="col personal-data-wrapper">
                  <i class="far fa-envelope"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="container content-wrapper-footer">
        <div class="row">
          <div class="col">
            Lorem ipsum dolor amet polaroid literally lyft health goth, sartorial pour-over letterpress succulents pabst snackwave. Activated charcoal meggings shabby chic humblebrag, sriracha kinfolk cred iPhone irony DIY marfa shoreditch. Twee cred vape letterpress bespoke. Glossier coloring book food truck sriracha fam synth disrupt polaroid DIY gochujang iPhone. Tacos tofu migas before they sold out taiyaki iceland vinyl meditation cred. Meh enamel pin synth typewriter intelligentsia palo santo small batch. Twee green juice banjo swag, kitsch glossier affogato palo santo food truck. Fashion axe gluten-free authentic mumblecore selfies, tote bag migas humblebrag venmo shoreditch sartorial flexitarian tumblr activated charcoal polaroid. Sartorial chambray heirloom you probably haven't heard of them humblebrag man bun portland bicycle rights typewriter. Tote bag skateboard stumptown, glossier cray pour-over selvage etsy readymade keytar butcher tumblr offal deep v seitan. Single-origin coffee paleo PBR&B ennui ugh cardigan woke lyft man bun vaporware flexitarian photo booth leggings yr put a bird on it. Yuccie banjo pour-over palo santo humblebrag fixie intelligentsia cronut. Pug lomo umami four dollar toast, cold-pressed blog put a bird on it green juice bicycle rights direct trade retro PBR&B pour-over. Cred freegan single-origin coffee brooklyn craft beer prism viral. Tattooed pop-up organic letterpress direct trade enamel pin. Bushwick palo santo vaporware fam. Gluten-free artisan sriracha cloud bread, lyft poke waistcoat jean shorts craft beer kitsch gastropub slow-carb squid swag. 90's put a bird on it offal shabby chic scenester humblebrag umami mixtape fingerstache. Yr pug bicycle rights pop-up raw denim YOLO four loko woke hammock blog flannel unicorn you probably haven't heard of them PBR&B put a bird on it. Chartreuse hoodie art party, tousled beard woke artisan everyday carry chillwave tilde.
          </div>
        </div>
      </div></main><nav class="navbar fixed-bottom navbar-expand-sm navbar-dark bg-dark">
      <div class="container flex-fill">
        <div class="row flex-fill">
          <div class="col-12 col-sm-12 navbar-header-wrapper">
            <div aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle Navigation" class="row navbar-toggler" data-target="#navbarCollapse" data-toggle="collapse">
              <div class="col-10 col-sm-12 align-middle">
                <div class="row">
                  <div class="col-12 col-sm-8 col-md-8 col-lg-12 navbar-title">
                    Want to learn more about me?
                  </div>
                  <div class="col col-sm-4 col-md-4 col-lg-12 navbar-description-wrapper">
                    <span id="navbar-description"><span id="navbar-description-set"></span><span id="navbar-description-default">Topics <span id="navbar-description-default-icon"></span></span></span>
                  </div>
                </div>
              </div>
              <div class="col-2">
                <button class="float-right" type="button"><i class="fa fa-angle-double-up" id="nav-button"></i></button>
              </div>
            </div>
          </div>
          <div class="col navbar-nav-item-wrapper">
            <div class="navbar-collapse collapse" id="navbarCollapse">
              <ul class="navbar-nav flex-fill">
                <li class="nav-item flex-fill"><a href="/pages/vision-and-passion/" class="nav-link">
                                <i class="fas fa-eye nav-icon"></i><span>Vision & Passion</span></a>
                </li>
                <li class="nav-item flex-fill"><a href="/pages/career-path/" class="nav-link">
                                <i class="fas fa-map-signs nav-icon"></i><span>Career Path</span></a>
                </li>
                <li class="nav-item flex-fill"><a href="/pages/working-together/" class="nav-link">
                                <i class="fas fa-heart nav-icon"></i><span>Working Together</span></a>
                </li>
                <li class="nav-item flex-fill"><a href="/pages/family-journey/" class="nav-link">
                                <i class="fas fa-map-marker-alt nav-icon"></i><span>Family Journey</span></a>
                </li>
                <li class="nav-item flex-fill"><a href="/pages/thoughts-on-paper/" class="nav-link">
                                <i class="fas fa-lightbulb nav-icon"></i><span>Thoughts on Paper</span></a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

READ ALSO
GridPane background not showing transparancy with image

GridPane background not showing transparancy with image

This is the CSS for a 1x1 GridPane:

52
responsive embedded video script css

responsive embedded video script css

I am trying to make this script tag of an embedded video responsiveHowever it loads its own styles

43
Given the same alias config, why is `css-loader` not resolving this image request the same way as `enhanced-resolve`?

Given the same alias config, why is `css-loader` not resolving this image request the same way as `enhanced-resolve`?

This question is contextualized using a minimal repo so that you can reproduce what I am seeing

72
Keep a list item highlighted, react.js

Keep a list item highlighted, react.js

I would like to keep the background-color and color of the current clicked list itemI have made it to be highlighted via CSS with the following code:

70