Форумы портала PHP.SU » Клиентская разработка » HTML, Дизайн & CSS » Bootstrap горизонтальное меню

Страниц (1): [1]
 

1. 3d_killer - 23 Января, 2017 - 23:02:08 - перейти к сообщению
Пытаюсь сделать горизонтальное меню которое фиксируется на верху, примеров уйма да не то что нужно, так как в этом меню (самой строке) хочу сделать логотип далее меню далее телефон и кусочек места для свернутого меню, вроде более менее получилось, но никак не могу добиться чтобы разворачивающееся меню было на всю ширину, оно подстраивается по заданному размеру col, перерыл инет и не могу найти что либо подобное, вобщем не справлюсь, обращаюсь за помощью.
Код:
CODE (html):
скопировать код в буфер обмена
  1.  
  2. <nav role="navigation" class="navbar navbar-default navbar-fixed-top" id="Header">
  3.         <div class="container">
  4.                 <div class="row">
  5.                         <div class="col-lg-2 col-md-2 col-sm-2 col-xs-4" id="Logo">
  6.                                 <a href="/"><img src="/template/<?=Auth::GetTemplate()?>/img/logo.png"></a>
  7.                         </div>
  8.                         <div class="col-lg-8 col-md-8 col-sm-7 col-xs-1 text-center">
  9.                                 <div id="navbarCollapse" class="collapse navbar-collapse">
  10.                                         <ul class="nav navbar-nav">
  11.                                                 <li><a>Пункт меню</a></li>
  12.                                                 <li><a>Пункт меню</a></li>
  13.                                                 <li><a>Пункт меню</a></li>
  14.                                                 <li><a>Пункт меню</a></li>
  15.                                                 <li><a>Пункт меню</a></li>
  16.                                         </ul>
  17.                                 </div>
  18.                         </div>
  19.                         <div class="col-lg-2 col-md-2 col-sm-3 col-xs-6">
  20.                                 <span class="f-phone">
  21.                                         <span class="glyphicon glyphicon-earphone Blue"></span>
  22.                                         <a class="WhilePhone" href="">Телефон</a>
  23.                                 </span>
  24.                         </div>
  25.                         <div class="hidden-lg hidden-md hidden-sm col-xs-1">
  26.                                 <div class="navbar-header">
  27.                                         <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
  28.                                                 <span class="sr-only">Toggle navigation</span>
  29.                                                 <span class="icon-bar"></span>
  30.                                                 <span class="icon-bar"></span>
  31.                                                 <span class="icon-bar"></span>
  32.                                         </button>
  33.                                 </div>
  34.                         </div>
  35.                 </div>
  36.         </div>
  37. </nav>
  38.  


И ксс где переопределяю поведение:
CODE (htmlphp):
скопировать код в буфер обмена
  1.  
  2. @media (max-width: 767px) { /*xs (extra small)*/
  3.   .text-xs-center {
  4.     text-align: center;
  5.   }
  6.   #navbarCollapse { position:absolute;top:50px;float:left; left:0px;}
  7.  #navbarCollapse ul{ padding-top:18px;}
  8.  #navbarCollapse li{ display:flex !important;}
  9.  #navbarCollapse li a{ font-size:1.2em !important;}
  10.  
  11.  
  12.  
  13. }
  14.  

(Добавление)
блин не могу отредактировать и читаемо вставить код (из DW и notepad++) только так
2. 3d_killer - 24 Января, 2017 - 10:48:18 - перейти к сообщению
пробую так:
CODE (html):
скопировать код в буфер обмена
  1.  
  2. <nav role="navigation" class="navbar navbar-default navbar-fixed-top">
  3.         <div class="container">
  4.                 <div class="navbar-header">
  5.                 <a class="navbar-brand" href="#">
  6.                         <img alt="Brand" src="/template/<?=Auth::GetTemplate();?>/img/logo.png">
  7.                 </a>   
  8.                  <p class="navbar-text pull-right">Signed</p>
  9.             <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
  10.                                 <span class="sr-only">Toggle navigation</span>
  11.                                 <span class="icon-bar"></span>
  12.                                 <span class="icon-bar"></span>
  13.                                 <span class="icon-bar"></span>
  14.                         </button>
  15.         </div>
  16.         <div id="navbarCollapse" class="collapse navbar-collapse">
  17.         <ul class="nav navbar-nav">
  18.                                 <li><a>Пункт меню</a></li>
  19.                                 <li><a>Пункт меню</a></li>
  20.                                 <li><a>Пункт меню</a></li>
  21.                                 <li><a>Пункт меню</a></li>
  22.                                 <li><a>Пункт меню</a></li>
  23.                         </ul>
  24.         </div>       
  25.         </div>
  26. </nav>
  27.  

Тоже ведет себя не так. добиться хочу того что в рисунке
3. skruglikov - 24 Января, 2017 - 19:24:47 - перейти к сообщению
выложите код где-то на https://jsfiddle[dot]net/
или http://codepen[dot]io/pen/ — тут даже можно подключить bootstap

 

Powered by ExBB FM 1.0 RC1