All geek questions in one place

The icons at the bottom of the navigation bar do not move according to the change in frame size

I am trying to position something at the bottom of the navigation bar.

Code example: https://jsfiddle.net/545cdqb2/1/

There are problems with this part of the code.

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

When resizing the frame, the “red div” hides the elements of the navigation bar, and I cannot click on them.

Screenshot

+4
source share
2 answers

Just use the flexbox system. I wrapped around the navigation bar and the red container. Remove the absolute position of the red rectangle!

@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;
}

flexbox (nav red one) , flex-grow of 1. - ! flex-shrink: 0, 100 !

html ( )

<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>

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

+3

.

.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>
Hide result
0

Source: https://habr.com/ru/post/1690475/

More articles:


All Articles