2015-04-03 51 views
0

我有這個網站:我如何可以通過菜單下方引導

http://avocat2.dac-proiect.ro/

這是菜單代碼:

<header id="masthead" class="navbar navbar-default" role="banner"> 
    <div class="container"> 
     <nav class="" role="navigation"> 
<!--   <div class="container-fluid">--> 
       <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-navbar-collapse-1"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 

       <h1 class="site-title"><a href="<?php echo esc_url(home_url('/')); ?>" rel="home"><?php bloginfo('name'); ?></a></h1> 
      </div> 

      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse" id="bs-navbar-collapse-1"> 

       <!--   <form class="navbar-form navbar-left" role="search">--> 
       <!--    <div class="form-group">--> 
       <!--     <input type="text" class="form-control" placeholder="Search">--> 
       <!--    </div>--> 
       <!--    <button type="submit" class="btn btn-default">Submit</button>--> 
       <!--   </form>--> 

       <a class="screen-reader-text skip-link" href="#content"><?php _e('Skip to content', 'zdwpbs'); ?></a> 
       <?php 
       wp_nav_menu(array('theme_location' => 'primary' , 
            'menu_class' => 'nav-menu')); 
       ?> 
      </div><!-- /.navbar-collapse --> 
<!--   </div>--> 
    <!-- /.container-fluid --> 
     </nav> 
    </div><!-- .container --> 
</header> 

我當一切寬= 1200像素以下的菜單去的地方。 目前正在進行下面的所有菜單項目。

我想留在所有行的元素,但去下面

我把一個圖片,以便更好地理解我的意思。 http://i58.tinypic.com/35bbf9h.jpg

我該如何解決這個問題?

在此先感謝!

+0

可以共享呈現的html代碼而不是服務器代碼嗎? – 2015-04-03 10:21:22

回答

0

你應該添加自定義媒體CSS在你的CSS代碼。作爲一個知道你的代碼。 把這個和

我希望它會幫助你

@media screen and (max-width: 1200px) and (min-width: 768px){ 
    .collapse.navbar-collapse ,.navbar-header{float: none;} 
    .menu-menu-container ul{padding:10px 0;} 
    .menu-menu-container ul:after{content: '';display: block;clear:both;} 
    .menu-menu-container ul li{padding:0 50px 0 0;} 
} 

你應該根據你的需要定製這個。

+0

我試圖添加此代碼,但不起作用。 我必須做點特別的事情嗎? 我認爲找不到類菜單.menu – 2015-04-03 10:30:57

+0

您能否在http://www.bootply.com/new上顯示您的代碼以便更好地理解。 – 2015-04-03 10:36:08

+0

是的我會把它和php代碼 – 2015-04-03 10:38:35