Bootstrap手機菜單不顯示在wordpress

我已經爲我的WordPress網站創建了一個引導主題，但當我的瀏覽器窗口變小時，移動菜單不顯示我已經嘗試了一切在stackoverflow到目前爲止，但每當我嘗試使用另一個菜單代碼時，我的菜單變得很小，並被拉到瀏覽器窗口的右側。我不知道問題是什麼。Bootstrap手機菜單不顯示在wordpress

這裏是我的菜單代碼：

<body <?php body_class(); ?>> 
<?php if (is_front_page()) { ?> 

<nav class="navbar navbar-home navbar-static-top" role="navigation"> 
<div class="container"> 
    <!-- Mobile display --> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="<?php echo home_url(); ?>"><img src="http://localhost:8888/wp-content/uploads/2016/01/[email protected]" height="20" width="157"></a> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="navbar-ex1-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> 

    <!-- Collect the nav links for toggling --> 
    <?php // Loading WordPress Custom Menu 
    wp_nav_menu(array(
     'container_class' => 'collapse navbar-collapse navbar-ex1-collapse', 
     'container_id' => 'navbar-ex1-collapse', 
     'menu_class'  => 'nav navbar-nav pull-right', 
     'menu_id'   => 'main-menu', 
     'walker'   => new Cwd_wp_bootstrapwp_Walker_Nav_Menu() 
    )); 
    ?> 
</nav> 

    <div class="fullscreen-bg"> 
    <div class="hometext"> 
<h1 style="color: #ffffff;">VI ÄLSKAR BILDER.</h1> 
<h4 style="color: #ffffff;">Vi gör tavlor på en mängd olika vis. Komponera din egen kombination av material och bearbetning eller välj bland våra färdiga lösningar.</h4> 
</div> 
<span class="read-more-container"><a class="scroll" href="#start">LÄS MER<br><img src="http://localhost:8888/wp-content/uploads/2016/01/arrowdown.png" style="max-width: 50px;"/></a></span> 
</div> 

<?php } else { ?> 
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
<div class="container"> 
    <!-- Mobile display --> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="<?php echo home_url(); ?>"><img src="http://localhost:8888/wp-content/uploads/2015/10/[email protected]" height="20" width="157"></a> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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> 

    <!-- Collect the nav links for toggling --> 
    <?php // Loading WordPress Custom Menu 
    wp_nav_menu(array(
     'container_class' => 'collapse navbar-collapse navbar-ex1-collapse', 
     'menu_class'  => 'nav navbar-nav pull-right', 
     'menu_id'   => 'main-menu', 
     'walker'   => new Cwd_wp_bootstrapwp_Walker_Nav_Menu() 
    )); 
    ?> 
</nav>

我有我的網站上兩個不同的菜單。只顯示在首頁上，另一頁顯示在其他頁面上。（他們有不同的顏色和廣告圖標）

編輯：所呈現的HTML代碼：

<nav class="navbar navbar-home navbar-static-top" role="navigation"> 
<div class="container"> 
    <!-- Mobile display --> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="http://localhost:8888"><img src="http://localhost:8888/wp-content/uploads/2016/01/[email protected]" height="20" width="157"></a> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="navbar-ex1-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> 

    <!-- Collect the nav links for toggling --> 
    <div id="navbar-ex1-collapse" class="collapse navbar-collapse navbar-ex1-collapse"><ul id="main-menu" class="nav navbar-nav pull-right"><li id="menu-item-394" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-394"><a href="http://localhost:8888/material/">MATERIAL</a></li> 
<li id="menu-item-393" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-393"><a href="http://localhost:8888/bearbetning/">BEARBETNING</a></li> 
<li id="menu-item-392" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-392"><a href="http://localhost:8888/bildtjanster/">BILDTJÄNSTER</a></li> 
<li id="menu-item-115" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-115"><a href="http://localhost:8888/kontakt/">KONTAKT</a></li> 
</ul></div> 
</nav>

來源

2016-01-24 Christian

您可以添加爲導航呈現的HTML嗎？我猜你有一些課程或結構錯誤，你錯過了這阻止移動導航正常顯示。我在PHP中看不到它，並且我不完全確定Cwd_wp_bootstrapwp_Walker_Nav_Menu（）在做什麼，所以HTML會有所幫助。 – tayvano

你在'wp_nav_menu'數組中定義的'menu_class'上有'pull-right'類。如果您不想讓菜單向右移動，請從中刪除「向右拉」。您可以使用CSS Media Queries來控制不同屏幕尺寸的'pull-right'類，如果您需要它的大視圖，但不要小視圖。 –

我已經添加了呈現給我的問題的HTML！ – Christian

你需要（逆導航欄或）添加導航欄，默認

<nav class="navbar navbar-default navbar-home navbar-static-top" role="navigation">

然後，您可以使用自定義navbar-home類來覆蓋樣式/顏色。或者，如果你自己編譯boostrap，你可以在變量中使用所有導航/懸停狀態的顏色。

我會親自將navbar-default應用於您的內部頁面導航的主頁導航和navbar-inverse，並從那裏使用顏色&樣式進行演示，完全不需要額外的類。

http://codepen.io/anon/pen/jWZXvZ

附加功能：

您還缺少一個右容器div標籤
您可以使用在.navbar崩潰DIV .navbar右。
您將需要確保您正在加載jquery，然後引導的JS的切換功能。

來源

2016-01-24 21:02:58 tayvano

謝謝！第1步和第2步解決了我的問題。我在前頁使用navbar-default，在其他頁面使用navbar-inverse，然後我就像我想要的那樣對它們進行了樣式化。這使得切換功能也起作用了！非常感謝。 – Christian

Bootstrap手機菜單不顯示在wordpress

回答

相關問題