Bootstrap 3 Отзывчивый выпадающий оверлей Navbar и 100% высоты - PullRequest
Новая
       27

Bootstrap 3 Отзывчивый выпадающий оверлей Navbar и 100% высоты

0 голосов
/ 22 октября 2018

На мобильном устройстве Bootstrap 3 по умолчанию со стандартным навигационным меню при щелчке по меню состоит в том, чтобы перемещать содержимое вниз по странице.Вместо этого у меня есть наложение контента.Но проблема в том, что мне нужно, чтобы это наложение переместилось на 100%.

Я не могу использовать панель навигации с фиксированным верхом, потому что я не хочу, чтобы меню, заголовок или навигация следовали за мной по странице. 

/* Primary Navigation styles */

        .navbar { margin-bottom: 0; }
        .navbar .navbar-collapse { z-index: 99; }
        .navbar-toggle { float: left; margin-left: 15px; margin-right: 0; }

        @media (max-width: 1200px) { 

            /* Primary Navigation responsive styles */

            .navbar-nav { float: none!important; margin: 7.5px -15px;  }
            .navbar-nav>li { float: none; }
            .navbar-nav>li>a { padding-top: 10px; padding-bottom: 10px;  }
            .navbar-nav .open .dropdown-menu { position: static; float: none; width: auto; margin-top: 0; background-color: transparent; border: 0; -webkit-box-shadow: none; box-shadow: none; }
            .navbar .navbar-collapse { position: absolute; width: 100%; background-color: white;}
            .navbar-default .navbar-toggle { border: 0 none; margin-top: 28px; margin-bottom: 0; }
            .navbar-header { height: 90px; position: relative; float: none; }
            .navbar-toggle { display: block; }
            .navbar-collapse { border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);  }    
            .navbar-collapse.collapse { display: none!important; }
            .collapse.in { display: block !important; }

        }

        @media (min-width: 1201px) { 


            /* Primary Navigation responsive styles */

            .navbar { min-height: 0; -webkit-transition: all 0.6s ease-out; -moz-transition: all 0.6s ease-out; -o-transition: all 0.6s ease-out; -ms-transition: all 0.6s ease-out; transition: all 0.6s ease-out; border-radius: 0px; }
            .navbar-nav{ float:none; margin: 0 auto; display: table; table-layout: fixed;  }
            .navbar-nav > li > a { padding: 10px 29px;  }

        }


      <div class="navbar-header">

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-2">

        <span class="sr-only">Toggle navigation</span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

        </button>

      </div>

      <div class="collapse navbar-collapse" id="navbar-collapse-2">

        <ul class="nav navbar-nav">

          <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Menu Option</a>

            <ul class="dropdown-menu">

              <li>

                <div class="row">

                    sample text

                </div>

              </li> 

            </ul>

          </li>

        </ul>

      </div>


      <!-- /.navbar-collapse -->

    </nav>
...