Icons at the bottom of the navbar not moving according to the resizing of the frame

Question

I am trying to position something at the bottom of the navbar.

Sample code: https://jsfiddle.net/545cdqb2/1/

Having trouble with this part of the code.

.push-to-bottom 
{
  position: absolute;
  bottom: 0px;
  height: 100px;
  width: 100%;
}

Upon resizing of the frame, the "red div" hides the navbar elements behind it and I'm unable to click on them.

Issue screenshot

Answer 1

Just use the flexbox system. I made a wrapper around the navbar and the red container. Remove the absolute positioning of the red box!

@media (min-width: 768px) {
    #navWrapper {
        height: 100vh; 
        display: flex;
        flex-direction: column;
        justify-content: space-between
    }

    #navbar {
        flex-grow: 1;
    }
}

.push-to-bottom {
    height: 100px;
    width: 100%;
    flex-shrink: 0;
}

With the flexbox system you can easily spare both containers (nav and red one) from each other if you give the navbar a flex-grow of 1. Wrap it in a media query for the non-mobile version or it will crush your design! The red box get a flex-shrink: 0 to keep its height of 100px!

The html code (important snippet)

<div id="navWrapper" class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href="#">Brand Name</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-font-family">
            <li><a href="#">Nav 1</a></li>
            <li><a href="#">Nav 2</a></li>
            <li><a href="#">Nav 3</a></li>
            <li><a href="#">Nav 4</a></li>
            <li><a href="#">Nav 5</a></li>
            <li><a href="#">Nav 6</a></li>
            <li><a href="#">Nav 7</a></li>
        </ul>
    </div>
    <div align="center" class="hidden-xs push-to-bottom" style="background-color: red; color: black">Hello!</div>
</div>

Working Sample: https://jsfiddle.net/545cdqb2/8/

Answer 2

Use this.

 .push-to-bottom { position: absolute; bottom: 0px; height: 100px; width: 100%; } /* https://github.com/samrayner/bootstrap-side-navbar#css */ @media (max-width: 768px) { .navbar-fixed-side { margin-left: -15px; margin-right: -15px } } @media (min-width: 768px) { .navbar-fixed-side { position: fixed; margin: 0 -15px; height: 100vh; width: inherit; overflow: auto; border-top-width: 0; border-bottom-width: 0; border-radius: 0 } .navbar-fixed-side .container, .navbar-fixed-side .container-fluid { width: auto; padding-left: 0; padding-right: 0 } .navbar-fixed-side .navbar-header { float: none } .navbar-fixed-side .navbar-brand { height: auto } .navbar-fixed-side>.container .navbar-brand, .navbar-fixed-side>.container-fluid .navbar-brand { margin-left: 0 } .navbar-fixed-side .navbar-collapse { width: 100%; border-top: 1px solid #e7e7e7 } .navbar-fixed-side .navbar-nav { float: none; margin: 0 -15px } .navbar-fixed-side .navbar-nav>li { float: none } .navbar-fixed-side .navbar-nav>li>a { padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid #e7e7e7 } .navbar-fixed-side .navbar-form { margin: 0; margin-left: -15px; margin-right: -15px; padding: 10px 15px; border-bottom: 1px solid #e7e7e7 } .navbar-fixed-side .navbar-text { float: none; margin-left: 0; margin-right: 0 } .navbar-fixed-side .navbar-left, .navbar-fixed-side .navbar-right { float: none !important } .navbar-fixed-side .navbar-nav .dropdown-menu { position: static; float: none; width: auto; margin-top: 0; background-color: transparent; border: 0; box-shadow: none; border-bottom: 1px solid #e7e7e7 } .navbar-fixed-side .navbar-nav .dropdown-menu>li>a, .navbar-fixed-side .navbar-nav .dropdown-menu .dropdown-header { padding: 5px 15px 5px 25px } .navbar-fixed-side .navbar-nav .dropdown-menu>li>a { line-height: 20px; color: #777 } .navbar-fixed-side .navbar-nav .dropdown-menu>li>a:hover, .navbar-fixed-side .navbar-nav .dropdown-menu>li>a:focus { background-image: none } .navbar-fixed-side .navbar-nav .dropdown-menu>.active>a { background-color: #e7e7e7; color: #555 } .navbar-fixed-side .navbar-nav>li>a:hover, .navbar-fixed-side .navbar-nav>li>a:focus, .navbar-fixed-side .navbar-nav .dropdown-menu>li>a:hover, .navbar-fixed-side .navbar-nav .dropdown-menu>li>a:focus { background-color: #f0f0f0; color: #333 } .navbar-fixed-side .dropdown>.dropdown-toggle, .navbar-fixed-side .dropdown-menu>.dropdown-header { background-color: transparent !important; color: #9d9d9d !important; cursor: default; font-size: 0.8em; text-transform: uppercase; border-bottom: none; padding-bottom: 0 } .navbar-fixed-side .dropdown-toggle .caret { display: none } .navbar-fixed-side .dropdown-menu { display: block } .navbar-fixed-side.navbar-inverse .navbar-collapse, .navbar-fixed-side.navbar-inverse .navbar-nav>li>a, .navbar-fixed-side.navbar-inverse .navbar-form, .navbar-fixed-side.navbar-inverse .navbar-nav .dropdown-menu { border-color: #363636 } .navbar-fixed-side.navbar-inverse .divider { background-color: #363636 } .navbar-fixed-side.navbar-inverse .navbar-nav .dropdown-menu>li>a { color: #9d9d9d } .navbar-fixed-side.navbar-inverse .navbar-nav .dropdown-menu>.active>a { background-color: #090909; color: #fff } .navbar-fixed-side.navbar-inverse .navbar-nav>li:not(.active)>a:hover, .navbar-fixed-side.navbar-inverse .navbar-nav>li:not(.active)>a:focus, .navbar-fixed-side.navbar-inverse .navbar-nav .dropdown-menu>li:not(.active)>a:hover, .navbar-fixed-side.navbar-inverse .navbar-nav .dropdown-menu>li:not(.active)>a:focus { background-color: #2f2f2f; color: #fff } .navbar-fixed-side.navbar-inverse .dropdown>.dropdown-toggle { color: #777777 !important } } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <body> <div class="container-fluid"> <div class="row"> <div class="col-sm-3 col-lg-2"> <nav id="side-navbar" class="navbar navbar-default navbar-fixed-side"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#"> Brand Name </a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-font-family"> <li><a href="#">Nav 1</a></li> <li><a href="#">Nav 2</a></li> <li><a href="#">Nav 3</a></li> <li><a href="#">Nav 4</a></li> <li><a href="#">Nav 5</a></li> <li><a href="#">Nav 6</a></li> <li><a href="#">Nav 7</a></li> </ul> </div> <a align="center" href="#" class="hidden-xs push-to-bottom" style="background-color: red; color: black;"> Hello! </a> </div> </nav> </div> <div class="col-sm-9 col-lg-10"> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> </div> </div> </div> </body>