0

У меня есть две панели навигации слева и справа, а ширина составляет 50% на 50%, а их центр - мой логотип. Моя проблема - список моих навигационных меню в мобильном режиме. Когда я нажимаю раскрывающееся меню в моем списке меню, мое другое основное меню исчезает, как я могу избежать его падения. ? Пожалуйста, помогите мне.навигация меню отзывчивость бутстрап в WordPress мобильный вид

Вот мой сайт ссылка: http://bxuwp.codebox.ph/

Вот скриншот моей проблемы:

Здесь, до сих пор это хорошо:

Looking good

Вот проблема, когда я щелкните раскрывающееся меню. enter image description here

Вот мой код:

<div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container-fluid"> 

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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 class="logo-wrapper"> 

     <div class="logo"> 
      <?php if (get_theme_mod('m1_logo')) : ?> 
      <a href="<?php echo esc_url(home_url('/')); ?>" id="site-logo" title="<?php echo esc_attr(get_bloginfo('name', 'display')); ?>" rel="home"> 
      <img src="<?php echo get_theme_mod('m1_logo'); ?>" alt="<?php echo esc_attr(get_bloginfo('name', 'display')); ?>"></a> 
      <?php else : ?> 
        <img class="logo" src="<?php echo get_bloginfo('template_url') ?>/images/qmark_logo.png"/> 
      <?php endif; ?> 
     </div> 
    </div> 

    <div class="half">  
     <ul class="left-navlist"> 
      <?php 
      $args = array(
        'container'  => 'div', 
        'container_class' => 'collapse navbar-collapse pull-right', 
        'container_id'  => 'bs-example-navbar-collapse-1', 
        'menu'  => 'left', 
        'menu_class'  => 'nav navbar-nav', 
        'fallback_cb'  => 'wp_bootstrap_navwalker::fallback', 
        'walker'   => new wp_bootstrap_navwalker() 
      ); 
      ?> 
      <?php wp_nav_menu($args); ?> 
     </ul> 
    </div> 
    <div class="half">  
     <ul class="right-navlist"> 
      <?php 
      $args1 = array(
        'container'  => 'div', 
        'container_class' => 'collapse navbar-collapse', 
        'container_id'  => 'bs-example-navbar-collapse-1', 
        'menu'  => 'right', 
        'menu_class'  => 'nav navbar-nav', 
        'fallback_cb'  => 'wp_bootstrap_navwalker::fallback', 
        'walker'   => new wp_bootstrap_navwalker() 
      ); 
      ?> 
      <?php wp_nav_menu($args1); ?> 
     </ul> 
    </div> 
    </div> 
    </div> 

Вот мой маленький пользовательский CSS для начальной загрузки навигационной панели:

.navbar-fixed-top { 
     min-height: 95px; 
    } 
    .navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:focus, .navbar-inverse .navbar-nav > .open > a:hover { 
     background-color: #e1e1e1; 
     color: #fff; 
    } 
    .navbar-inverse { 
     border-radius: 0px; 
     margin-bottom: 0; 
     background-color: #e1e1e1; 
     border-color:#e1e1e1; 
     font-size: 16px; 
    } 
    .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .active > a:hover { 
     background-color: #e1e1e1; 
     color: #993300; 
    } 
    .navbar-inverse .navbar-nav > li > a { 
     color: #252525; 
    } 
    .logo-wrapper { 
     text-align: center; 
     margin-bottom: -65px; 
    } 

    .logo { 
     margin-top: 5px; 
     max-width: 80px; 
     display: inline-block; 
    } 
    .half { 
     width: 50%; 
     display: block; 
     float: left; 
    } 

    .right-navlist { 
     padding-left: 60px; 
    } 

    .left-navlist { 
     text-align: right; 
     padding-right: 60px; 
    } 
.drop { 
    position: absolute; 
} 
.nav > li { 
    float: left; 
} 
.navbar-inverse { 
    font-size: 11px; 
} 
.dropdown-menu { 
    font-size: 11px; 
} 

ответ

0

В таблице стилей Изменение

.navbar-nav .open .dropdown-menu { 
    position: static; 
} 

в

.navbar-nav .open .dropdown-menu { 
    position: absolute; 
} 

или просто удалить статический код позиции, потому что bootstrap по умолчанию имеет position: absolute; правило для выпадающих списков.

Смежные вопросы