Пытаюсь сделать горизонтальное меню которое фиксируется на верху, примеров уйма да не то что нужно, так как в этом меню (самой строке) хочу сделать логотип далее меню далее телефон и кусочек места для свернутого меню, вроде более менее получилось, но никак не могу добиться чтобы разворачивающееся меню было на всю ширину, оно подстраивается по заданному размеру col, перерыл инет и не могу найти что либо подобное, вобщем не справлюсь, обращаюсь за помощью.
Код:
CODE ( html):
скопировать код в буфер обмена
<nav role="navigation" class="navbar navbar-default navbar-fixed-top" id="Header"> <div class="container"> <div class="row"> <div class="col-lg-2 col-md-2 col-sm-2 col-xs-4" id="Logo"> <a href="/"><img src="/template/<?=Auth::GetTemplate()?>/img/logo.png"></a> </div> <div class="col-lg-8 col-md-8 col-sm-7 col-xs-1 text-center"> <div id="navbarCollapse" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a>Пункт меню</a></li> <li><a>Пункт меню</a></li> <li><a>Пункт меню</a></li> <li><a>Пункт меню</a></li> <li><a>Пункт меню</a></li> </ul> </div> </div> <div class="col-lg-2 col-md-2 col-sm-3 col-xs-6"> <span class="f-phone"> <span class="glyphicon glyphicon-earphone Blue"></span> <a class="WhilePhone" href="">Телефон</a> </span> </div> <div class="hidden-lg hidden-md hidden-sm col-xs-1"> <div class="navbar-header"> <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <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> </div> </div> </nav>
И ксс где переопределяю поведение:
CODE ( htmlphp):
скопировать код в буфер обмена
@media (max-width: 767px) { /*xs (extra small)*/ .text-xs-center { text-align: center; } #navbarCollapse { position:absolute;top:50px;float:left; left:0px;} #navbarCollapse ul{ padding-top:18px;} #navbarCollapse li{ display:flex !important;} #navbarCollapse li a{ font-size:1.2em !important;} }
(Добавление)
блин не могу отредактировать и читаемо вставить код (из DW и notepad++) только так(Отредактировано автором: 23 Января, 2017 - 23:06:42)
|