2012-04-22 251 views
4

我試圖在Wordpress上爲我的博客做出響應式佈局,但我無法克服移動設備上導航欄的問題。Twitter Bootstrap和移動導航欄

<header class="span8" id="top-header"> 
<nav class="navbar navbar-fixed-top"> 
    <div class="navbar-inner"> 
     <div class="container-fluid"> 
      <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </a> 
      <?php 
      wp_nav_menu(array(
       'menu' => 'Top menu', 
       'menu_class' => 'nav' 
      )); 
      ?> 
      <ul class="nav"> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Categories <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
        <?php 
        $args = array(
         'exclude' =>'1', 
         'orderby' =>'name', 
         'order'  => 'ASC' 
        ); 
        foreach(get_categories($args) as $category): ?> 
         <li><a href="<?php echo get_category_link($category->term_id); ?>" title="Category: <?php echo $category->name; ?>"><?php echo $category->name; ?></a></li> 
        <?php endforeach; ?> 
        </ul> 
       </li> 
      </ul> 
     </div> 
    </div> 
</nav> 
<a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('title'); ?> - Back to the homepage"> 
    <hgroup class="row-fluid"> 
     <?php if(is_single()):?> 
      <h2 class="like-h1">My blog</h2> 
     <?php else: ?> 
      <h1>My blog</h1> 
     <?php endif; ?> 
     <h2>Bla bla bla</h2> 
    </hgroup> 
</a> 
</header> 

在移動設備上,下拉菜單在Twitter Bootstrap的示例上不起作用,但它顯示了來自導航欄的每個鏈接。它不切換。你可以在這裏看到:my blog example

回答

9

你需要將你的菜單包裝在<div class="nav-collapse">..</div> div內,以便在屏幕調整大小/移動視圖時摺疊菜單。試試這個:

HTML

<header class="span8" id="top-header"> 
<nav class="navbar navbar-fixed-top"> 
    <div class="navbar-inner"> 
     <div class="container-fluid"> 
      <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </a> 
      <div class="nav-collapse"> 
       <?php 
       wp_nav_menu(array(
        'menu' => 'Top menu', 
        'menu_class' => 'nav' 
       )); 
       ?> 
       <ul class="nav"> 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">Categories <b class="caret"></b></a> 
         <ul class="dropdown-menu"> 
         <?php 
         $args = array(
          'exclude' =>'1', 
          'orderby' =>'name', 
          'order'  => 'ASC' 
         ); 
         foreach(get_categories($args) as $category): ?> 
          <li><a href="<?php echo get_category_link($category->term_id); ?>" title="Category: <?php echo $category->name; ?>"><?php echo $category->name; ?></a></li> 
         <?php endforeach; ?> 
         </ul> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</nav> 
<a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('title'); ?> - Back to the homepage"> 
    <hgroup class="row-fluid"> 
     <?php if(is_single()):?> 
      <h2 class="like-h1">My blog</h2> 
     <?php else: ?> 
      <h1>My blog</h1> 
     <?php endif; ?> 
     <h2>Bla bla bla</h2> 
    </hgroup> 
</a> 
</header> 

另外,我建議你從你的header頁打破了你的固定導航和body標記後隔離開來,這樣,當你調整屏幕的媒體查詢或圍繞您的header的樣式不會影響頂部導航欄,這不應在移動視圖中修復。

+0

太棒了!這是我的問題的答案。謝謝! – sunpietro 2012-04-22 18:41:18