Логотип в мобильном меню bootstrap

Я работаю над шаблоном бутстрапа, я создал div class с логотипом, но когда я зажимаю окно хром, логотип над мобильным меню.Логотип в мобильном меню bootstrap

Мой сайт (мобильная версия)

* То, что я хочу, чтобы мобильная версия моего сайта, чтобы выглядеть как **

Мой код:

<div class="logo"> 
 
    <img src="img/bulls-logo.png" class="img-responsive" width="500px" height="100px"> 
 
    </div> 
 

 

 
    <nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
    </div> 
 

 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#"><i class="fa fa-home" aria-hidden="true"></i> HOME<span class="sr-only">(current)</span></a></li> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-users" aria-hidden="true"></i> ATLETI<span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Action</a></li> 
 
      <li><a href="#">Another action</a></li> 
 
      <li><a href="#">Something else here</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">Separated link</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">One more separated link</a></li> 
 
      </ul> 
 
     </li> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-calendar" aria-hidden="true"></i> CALENDARIO GARE<span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Action</a></li> 
 
      <li><a href="#">Another action</a></li> 
 
      <li><a href="#">Something else here</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">Separated link</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">One more separated link</a></li> 
 
      </ul> 
 
     </li> 
 
     <li class="active"><a href="#"> 
 
<i class="fa fa-plus" aria-hidden="true"></i> AFFILIAZIONI<span class="sr-only">(current)</span></a></li> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-star" aria-hidden="true"></i> RISULTATI <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Action</a></li> 
 
      <li><a href="#">Another action</a></li> 
 
      <li><a href="#">Something else here</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">Separated link</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">One more separated link</a></li> 
 
      </ul> 
 
     </li> 
 
     <li class="active"><a href="#"> 
 
<i class="fa fa-phone" aria-hidden="true"></i> CONTATTI<span class="sr-only">(current)</span></a></li> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <i class="fa fa-cart-plus" aria-hidden="true"></i> SHOP<span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Action</a></li> 
 
      <li><a href="#">Another action</a></li> 
 
      <li><a href="#">Something else here</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">Separated link</a></li> 
 
     </li> 
 
     </ul> 
 
    </div><!-- /.navbar-collapse --> 
 
    </div><!-- /.container-fluid --> 
 
</nav>

CSS:

.logo 
 
{background-color: #FFF; 
 
height: auto; 
 
width: 100%; 
 
padding-bottom: 10px;} 
 

 

 
.navbar 
 
{margin-bottom:0px !important; 
 
font-size: 12px; 
 
: #000;}

источник

2016-08-24 Luca Delconte

Если вы хотите, чтобы ваш логотип быть внутри вашей навигационной панели, вы должны поместить свой логотип в HTML код из Navbar.

Попробуйте добавить эту строку внутри заголовка NavBar (и изменить IMG путь):

<a href="#" class="navbar-left hidden-md hidden-lg hidden-sm"><img src="path/to/your/image.jpg"></a>

и добавить несколько классов в дополнительный логотип DIV

<div class="logo"> 
    <img src="img/bulls-logo.png" class="img-responsive hidden-xs" width="500px" height="100px"> 
</div>

EDITED пример:

<div class="logo"> 
    <img src="img/bulls-logo.png" class="img-responsive hidden-xs" width="500px" height="100px"> 
    </div> 

    <nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <a href="#" class="navbar-left hidden-md hidden-lg hidden-sm"><img src="path/to/your/image.jpg"></a> 
     <button type="button" class="navbar-toggle collapsed navbar-left" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#"><i class="fa fa-home" aria-hidden="true"></i> HOME<span class="sr-only">(current)</span></a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-users" aria-hidden="true"></i> ATLETI<span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">One more separated link</a></li> 
      </ul> 
     </li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-calendar" aria-hidden="true"></i> CALENDARIO GARE<span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">One more separated link</a></li> 
      </ul> 
     </li> 
     <li class="active"><a href="#"> 
<i class="fa fa-plus" aria-hidden="true"></i> AFFILIAZIONI<span class="sr-only">(current)</span></a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-star" aria-hidden="true"></i> RISULTATI <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">One more separated link</a></li> 
      </ul> 
     </li> 
     <li class="active"><a href="#"> 
<i class="fa fa-phone" aria-hidden="true"></i> CONTATTI<span class="sr-only">(current)</span></a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <i class="fa fa-cart-plus" aria-hidden="true"></i> SHOP<span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
     </li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid -->

источник

2016-08-24 13:44:47

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

О, хорошо. Извините, я вас неправильно понял. В этом случае вы можете добавить скрытый-скрытый-скрытый-скрытый-скрытый-скрытый, скрытый, когда вам понадобится дополнительный div или изображение внутри navbar. Примечание. Например, я обновил свой ответ. –

Следующая ссылка может помочь вам понять, что я имею в виду http://getbootstrap.com/css/#responsive-utilities-classes –

Я не знаю, когда этот мобильный вид приходит, так что вы должны изменить точек. В моем примере показан вид, когда ширина меньше 720 пикселей.

@media (max-width: 720px) { 
.logo{ 
    width: 50%; 
    float: left; 
} 

.logo img{ 
    width: 100%; 
    float: none; 
    } 
}

И в head теге вашего HTML-файла, который вы должны добавить:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

источник

2016-08-24 13:19:39 Marcel1997

Логотип в мобильном меню bootstrap

ответ

Смежные вопросы