Bootstrap移动菜单未在Wordpress中显示

Question

I have created a bootstrap theme for my wordpress website but the mobile menu doesn't show up when I make my browser window smaller I've tried everything on stackoverflow so far, but whenever I try out another menu code, my menu gets tiny and pulled to the right side of my browser window. 我为wordpress网站创建了引导程序主题，但是当我缩小浏览器窗口时，移动菜单没有显示。到目前为止，我已经尝试了stackoverflow上的所有内容，但是每当尝试其他菜单代码时，菜单就会变得很小且拉到我的浏览器窗口的右侧。 I don't know what the problem is. 我不知道问题是什么。

Here's my menu code: 这是我的菜单代码：

<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/proformat_logotypewhite@2x.png" 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/proformat_logotype@2x.png" 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>

I have two different menus on my website. 我的网站上有两个菜单。 One that is showing only on the front page, and another one on every other page. 一个仅显示在首页上，另一个显示在其他页面上。 (they have different colors and logotypes) （它们具有不同的颜色和徽标）

EDIT: The HTML code that is being rendered: 编辑：正在呈现的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/proformat_logotypewhite@2x.png" 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>

Answer 1

You need to add navbar-default (or navbar-inverse) to 您需要将navbar-default（或navbar-inverse）添加到

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

You can then use your custom navbar-home class to override the styles/colors. 然后，您可以使用自定义的navbar-home类覆盖样式/颜色。 Or, if you are compiling the boostrap .less yourself, you can play with the colors for all the navigation/hover states in variables.less. 或者，如果您自己编译boost.less，则可以在variable.less中使用所有导航/悬停状态的颜色。

I would personally apply navbar-default to your homepage navigation and navbar-inverse to your internal page navigation and play with colors & styling from there, removing the need for the additional classes at all. 我个人会将navbar-default应用于您的主页导航，将navbar-inverse应用于您的内部页面导航，并从那里开始使用颜色和样式，从而完全不需要其他类。

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

Extras: 附加功能：

You are also missing a closing container div tag 您还缺少关闭容器的div标签
You can use .navbar-right on the .navbar-collapse div. 您可以在.navbar-collapse div上使用.navbar-right。
You will need to make sure you are loading jquery and then bootstrap's JS for the toggle functionality. 您将需要确保先加载jquery，然后再加载bootstrap的JS以实现切换功能。

Bootstrap移动菜单未在Wordpress中显示

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-01-24 21:02:58

Bootstrap移动菜单未在Wordpress中显示

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-01-24 21:02:58

解决方案1
0 已采纳 2016-01-24 21:02:58