Question

我为我的wordpress网站创建了一个bootstrap主题但是当我使浏览器窗口变小时，移动菜单没有出现到目前为止，我已经尝试了stackoverflow上的所有内容，但每当我尝试另一个菜单代码时，我的菜单变得很小并被拉到浏览器窗口的右侧。我不知道问题是什么。

这是我的菜单代码：

<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>

我的网站上有两个不同的菜单。一个只显示在首页上，另一个显示在每个其他页面上。（它们有不同的颜色和标识）

编辑：正在呈现的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

您需要将navbar-default（或navbar-inverse）添加到

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

然后，您可以使用自定义navbar-home类来覆盖样式/颜色。或者，如果您正在自己编译boostrap，则可以使用variables.less中的所有导航/悬停状态的颜色。

我个人会将navbar-default应用到您的主页导航和navbar-inverse到您的内部页面导航并使用颜色＆amp;从那里开始造型，根本不需要额外的课程。

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

附加功能：

您还缺少一个结束容器div标签
您可以在.navbar-collapse div上使用.navbar-right。
您需要确保加载jquery，然后使用bootstrap的JS来获取切换功能。

Bootstrap移动菜单不会在wordpress中显示

1 个答案: