duanbo7517 2018-12-13 17:17
浏览 89

Bootstrap 4 - 小尺寸菜单中没有导航内容

I connect my static HTML5 site with Wordpress, but I still have a problem to solve. I create my website with Bootstrap 4, and my navbar works good on PC, but when it comes to small devices and navbar change his position and form to responsive-mobile-version, then there is no menu inside.

Result on small screen devices

Here is my code from static site:

 <!-- Navigation -->
        <nav class="navbar navbar-light bg-towary navbar-expand-lg">                   
            <div class="container">             
                    <a class="navbar-brand" href="#"><img src="img/banner.jpg" class="logo-main d-inline-block mr-1 align-bottom" alt="My site"></a>

                            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainmenu" aria-controls="mainmenu" aria-expanded="false" aria-label="Navigation switch">
                                <span class="navbar-toggler-icon"></span>
                            </button>

                    <div class="collapse navbar-collapse" id="mainmenu">            
                        <ul class="navbar-nav w-75 justify-content-center">             
                            <li class="nav-item active">
                                <a class="nav-link" href="#"> HOME </a>
                            </li>                   
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" role="button" aria-expanded="false" id="submenu" aria-haspopup="true"> Page 2 </a>                      
                                    <div class="dropdown-menu" aria-labelledby="submenu">                       
                                        <a class="dropdown-item" href="#"> Subpage 1 </a>                           
                                            <div class="dropdown-divider"></div>                            
                                        <a class="dropdown-item" href="#"> Subpage 2 </a>                                                   
                                    </div>                                  
                            </li>                   
                            <li class="nav-item">
                                <a class="nav-link" href="#"> Page 3 </a>
                            </li>                   
                            <li class="nav-item">
                                <a class="nav-link" href="#"> Page 4 </a>
                            </li>                   
                            <li class="nav-item">
                                <a class="nav-link" href="#"> Page 5 </a>
                            </li>                   
                            <li class="nav-item">
                                <a class="nav-link" href="#"> Page 6 </a>
                            </li>                   
                            <li class="nav-item">
                                <a class="nav-link" href="#"> Page 7 </a>
                            </li>       
                        </ul>
                        <!-- Searchbar -->    
                            <form class="form-inline w-25 justify-content-center">
                                <input class="form-control mr-1 w-50 xs-col-12" type="search" placeholder="Search" aria-label="Search">
                                <button class="btn btn-light xs-col-12" type="submit">Search</button>
                            </form>                                                     
                    </div>                    
            </div>      
        </nav>

And after Wordpress

<nav class="navbar navbar-light bg-towary navbar-expand-lg">                   
            <div class="container">             
                    <a class="navbar-brand" href="#"><img src="<?php echo get_stylesheet_directory_uri(); ?>/img/logo.png" class="logo-main d-inline-block mr-1 align-bottom" alt="My site"></a>
                            <button class="navbar-toggler" type="button" data-toggle="dropdown" data-target="#mainmenu" aria-controls="mainmenu" aria-expanded="false" aria-label="Navbar switch">
                                <span class="navbar-toggler-icon"></span>
                            </button>
                            <ul class="navbar-nav w-75 justify-content-center">     
                                <div class="collapse navbar-collapse" id="mainmenu">            
                                    <?php
                                    wp_nav_menu( array(
                                        'theme_location'  => 'primary',
                                        'depth'           => 2, // 1 = no dropdowns, 2 = with dropdowns.
                                        'container'       => 'div',
                                        'container_class' => 'collapse navbar-collapse',
                                        'container_id'    => 'bs-example-navbar-collapse-1',
                                        'menu_class'      => 'navbar-nav mr-auto',
                                        'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
                                        'walker'          => new WP_Bootstrap_Navwalker(),
                                    ) );
                                    ?>
                                    <!-- Searchbar -->    
                                        <form class="form-inline w-25 justify-content-center">
                                            <input class="form-control mr-1 w-50 xs-col-12" type="search" placeholder="Wyszukaj" aria-label="Wyszukaj">
                                            <button class="btn btn-light xs-col-12" type="submit">Search</button>
                                        </form>  
                                </div> 
                            </ul>                   
            </div>      
        </nav>
  • 写回答

0条回答 默认 最新

    报告相同问题?

    悬赏问题

    • ¥15 vscode的问题提问
    • ¥50 切换TabTip键盘的输入法
    • ¥15 可否在不同线程中调用封装数据库操作的类
    • ¥15 微带串馈天线阵列每个阵元宽度计算
    • ¥15 keil的map文件中Image component sizes各项意思
    • ¥20 求个正点原子stm32f407开发版的贪吃蛇游戏
    • ¥15 划分vlan后,链路不通了?
    • ¥20 求各位懂行的人,注册表能不能看到usb使用得具体信息,干了什么,传输了什么数据
    • ¥15 Vue3 大型图片数据拖动排序
    • ¥15 Centos / PETGEM