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

回答

相关问题