douzhanyan5015 2016-01-24 19:49
浏览 64
已采纳

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

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

<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>
  • 写回答

1条回答 默认 最新

  • dqan70724 2016-01-24 21:02
    关注

    You need to add navbar-default (or navbar-inverse) to 

    <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. Or, if you are compiling the boostrap .less yourself, you can play with the colors for all the navigation/hover states in variables.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.

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

    Extras:

    1. You are also missing a closing container div tag

    2. You can use .navbar-right on the .navbar-collapse div.

    3. You will need to make sure you are loading jquery and then bootstrap's JS for the toggle functionality.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 #MATLAB仿真#车辆换道路径规划
  • ¥15 java 操作 elasticsearch 8.1 实现 索引的重建
  • ¥15 数据可视化Python
  • ¥15 要给毕业设计添加扫码登录的功能！！有偿
  • ¥15 kafka 分区副本增加会导致消息丢失或者不可用吗？
  • ¥15 微信公众号自制会员卡没有收款渠道啊
  • ¥100 Jenkins自动化部署—悬赏100元
  • ¥15 关于#python#的问题：求帮写python代码
  • ¥20 MATLAB画图图形出现上下震荡的线条
  • ¥15 关于#windows#的问题：怎么用WIN 11系统的电脑 克隆WIN NT3.51-4.0系统的硬盘