中央のナビゲーションバーとロゴを中心にして折りたたまれたメニュー項目を表示します（ブートストラップ）

センターバーのナビゲーションバーを使用してウェブサイトを作成していますが、ロゴもナビバーの中央に配置されています。私はBootstrapとLESSを使用しています。ナビゲーションバーが折りたたまれたときに中央のナビゲーションバーとロゴを中心にして折りたたまれたメニュー項目を表示します（ブートストラップ）

問題モバイル/タブレットビューで

は、メニュー項目が
を見栄えしないときも携帯で/垂直、水平方向ではなく表示されますタブレットの表示、3つのバーをクリックするとトグルメニュー内にロゴが表示され、さらに悪く見える
モバイルビューでクリックするとトグルメニューが表示されます私はそれに

私のソリューション

をクリックしたときに、私は、私はちょうど752px下のデバイスのリスト項目「インライン・ブロック」を表示するためにメディアクエリを追加することが、何らかの理由で試してみました近くesn'tそれを働かせることはできません。

ロゴは、「visible-lg」クラスを使用してみましたが、大きな画面でしか表示されないようにしました（小さな画面でのみ表示する予定）が、ロゴが私はCSSでこれを変更することはできません。ちょうどそのままにしておきます。

ロゴが中央のナビゲーションバーの中央に配置されていて、今のところ解決策を見つけようとしていますが、コードを書くことは特にメニューアイテムがトグルメニューにどのように表示されるかに違いがあるようです。このNavbarで動作させることはできますか？以下のため、このナビゲーションバーコードを試してみてください

#navbar-primary .navbar-nav { 

    max-height:120px; 
    width: 100%; 
    text-align: center; 
li { 
display: inline-block; 
float: none; 
a { 
    padding-left: 30px; 
    padding-right: 30px; 
    padding-top:10px; 
} 
} 

} 


@media (max-width: 932px) { 
.navbar-default .navbar-nav > li { 
float:none; 
display: block; 
vertical-align: top; 
text-align:center; 
} 
} 


// main Header 
.header { 
#logo { padding:0px 0; } 
} 

.navbar dropdown-menu > ul 

{ 
    white-space:normal; 
    position:relative; 

    } 
.downdown-menu { 

white-space: normal; 
position:relative; 

} 

.dropdown-menu > li > a { 
white-space:normal; 
position:relative; 

} 



// Remove excess borders etc 
.navbar-default { 
border-top:none; 
border-left: 0; 
border-right: none; 
margin-top:0px; 

padding-bottom: 0px; 

font-family: 'Open Sans Condensed', sans-serif; 
margin-bottom: 0; 
font-size:18px; 
border-color: transparent; 

white-space: normal; 

    } 

.navbar-default .navbar-nav > li 

{ 
margin-top:20px; 


}

出典

2017-01-04 ck777

：私は...すべてのヘルプや提案に感謝

Here is the HTML for the navbar: 

<nav class="navbar navbar-default navbar-fixed-top text-center"> 


<nav id="navbar-primary" class="navbar" role="navigation"> 
<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=".navbar-collapse"> 
    <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-primary-collapse"> 
    <ul class="nav navbar-nav"> 
    <li><a href="#" data-ajax="false">ABOUT</a></li> 
    <li><a href="gallery.php" data-ajax="false">OUR CARS</a></li> 
    <li><a href="Prices.php" data-ajax="false">PRICES</a></li> 
    <a href="index.php" data-ajax="false"><img src="../assets/images/logo-dark.png" width="250" alt="Logo"></a> 
    <li><a href="#" data-ajax="false">PACKAGES</a></li> 
    <li><a href="gallery.php" data-ajax="false">BLOG</a></li> 
    <li><a href="contact.php" data-ajax="false">CONTACT</a></li> 

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

</div><!-- /.container-fluid --> 

</nav> 
</nav>

CSS、それの内側中央にロゴを持っていることについて、私はもう一度やり直すと忘れする必要が心配していますあなたのウェブサイトや応答cssのためにこれらのクラスを使用

<!DOCTYPE html> 
<html> 
<head> 

<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> 
</head> 

<body> 
    <nav class="navbar"> 
     <div class="container"> 


<a class="navbar-brand" href="index.php">Shubhsoft</a> 

    <div class="navbar-header navbar-right"> 
     <ul class="nav navbar-nav"> 
      <li><a href="index.php">Home</a></li> 
      <li><a href="index.php">Project</a></li> 
      <li><a href="index.php">Client</a></li> 
      <li><a href="index.php">Services</a></li> 
      <li><a href="index.php">Contact-Us</a></li> 
      <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Wom Dropdown<b class="caret"></b></a> 
       <ul class="dropdown-menu"> 
        <li><a href="index.php">Link1</a></li> 
        <li><a href="#">Link1</a></li> 
        <li><a href="#">Link1</a></li> 
        <li class="divider"></li> 
        <li <a href="#">Seperated link</a></li> 
        <li class="divider"></li> 
        <li <a href="#"> one more Seperated link</a></li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
    </div> 
</nav> 
<script type="text/javascript" href="js/bootstrap.min.js"></script> 
<script type="text/javascript" href="js/jquery.js"></script>

出典

2017-01-04 21:27:15

これは左側のロゴとnavbarのメニュー項目を右側に置いています - これを行う方法はわかっていますが、言及したように本当に好きです - ロゴの中央にあるnavbar。あなたの提案をありがとう – ck777

screenshotをアップロードして何をしたいのですか –

i.stack.imgur.com/DpZ8I.pngこれは私が欲しいものですが、上にリストされているような問題はメニュー項目が横にロゴとトグルで表示されることを意味しますメニュー。 – ck777

中央のナビゲーションバーとロゴを中心にして折りたたまれたメニュー項目を表示します（ブートストラップ）

答えて

関連する問題