Question

我有一个项目，我应该完成，直到明天，但我有一个问题。当我调整浏览器的大小（较小）时，主菜单消失并显示一个带有名称nav-toggle的空元素。即使我删除了导航切换，主菜单也无法显示。

这是我的PHP代码

<div class="header-wrapper">

        <div class="header">

            <div class="section-inner">

                <?php if ( get_theme_mod( 'rowling_logo' ) ) : ?>

                    <a class="blog-logo" href='<?php echo esc_url( home_url('/') ); ?>' title='<?php echo esc_attr( get_bloginfo( 'title' ) ); ?> &mdash; <?php echo esc_attr( get_bloginfo( 'description' ) ); ?>' rel='home'>
                        <img src='<?php echo esc_url( get_theme_mod( 'rowling_logo' ) ); ?>' alt='<?php echo esc_attr( get_bloginfo( 'title' ) ); ?>'>
                    </a>

                <?php elseif ( get_bloginfo( 'description' ) || get_bloginfo( 'title' ) ) : ?>

                    <h2 class="blog-title">
                        <a href="<?php echo esc_url( home_url('/') ); ?>" title="<?php echo esc_attr( get_bloginfo( 'title' ) ); ?> &mdash; <?php echo esc_attr( get_bloginfo( 'description' ) ); ?>" rel="home"><?php echo esc_attr( get_bloginfo( 'title' ) ); ?></a>
                    </h2>

                    <?php if ( get_bloginfo( 'description' ) ) : ?>

                        <h4 class="blog-description">
                            <?php bloginfo('description'); ?>
                        </h4>

                    <?php endif; ?>

                <?php endif; ?>

                <div class="nav-toggle">

                    <div class="bars">

                        <div class="bar"></div>
                        <div class="bar"></div>
                        <div class="bar"></div>
                    </div>

                </div> <!-- /nav-toggle -->

            </div> <!-- /section-inner -->

        </div> <!-- /header -->

        <div class="navigation">

            <div class="section-inner">

                <ul class="primary-menu">

                    <?php if ( has_nav_menu( 'primary' ) ) {

                        wp_nav_menu( array( 

                            'container' => '', 
                            'items_wrap' => '%3$s',
                            'theme_location' => 'primary'

                        ) ); } else {

                        wp_list_categories( array(

                            'container' => '',
                            'title_li' => ''

                        ));
                        wp_list_pages( array(

                            'container' => '',
                            'title_li' => ''

                        ));
                    } ?>

                </ul>

                <div class="clear"></div>

            </div>

        </div> <!-- /navigation -->

        <ul class="mobile-menu">

            <?php 

            ?>

        </ul> <!-- /mobile-menu -->

    </div> <!-- /header-wrapper -->

这是主菜单类的一些css代码

.primary-menu { display: none; }

.primary-menu ul ul { 
padding-top: 0;
top: 10px;
}

.primary-menu ul ul li { background: #333; }
.primary-menu ul ul .menu-item-has-children:hover::after { border-left-
 color:  #333; }
.primary-menu ul ul ul li { background: #444; }
.primary-menu ul ul ul .menu-item-has-children:hover::after { border-left-
color: #444; }
.primary-menu ul ul ul ul li { background: #555; }
.primary-menu ul ul ul ul .menu-item-has-children:hover::after { border-
left- color: #555; }
.primary-menu ul ul ul ul ul li { background: #666; }
.primary-menu ul ul ul ul ul .menu-item-has-children:hover::after { border-
left-color: #666; }

.primary-menu li > ul > li:hover > ul {
opacity: 1;
top: 0;
left: 220px;
margin-left: 0;
}

.navigation .section-inner { background-color: #C0C0C0; }


.primary-menu { font-size: 0.8rem; }

.primary-menu > li { 
float: left; 
border-right: 1px solid rgba(0,0,0,0.1);
border-left: 1px solid rgba(255,255,255,0.1);
}

.primary-menu > li:last-child:after {
content: "";
display: block;
border-right: 1px solid rgba(255,255,255,0.1);
position: absolute;
top: 0;
right: -2px;
bottom: 0;
}

.primary-menu > li > a {
display: block;
padding: 20px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 1px;
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,0.25);
}

.primary-menu > li.menu-item-has-children > a { padding-right: 34px; }

.primary-menu > li.menu-item-has-children:before,
.primary-menu > li.menu-item-has-children:after {
content: "";
display: block;
border: 4px solid transparent;
border-top-color: #fff;
position: absolute;
top: 50%;
margin-top: -3px;
right: 20px;
}

.primary-menu > li.menu-item-has-children:before {
border-top-color: rgba(0,0,0,0.25);
margin-top: -2px;
}

.primary-menu > li:hover > a {
background: rgba(255,255,255,0.1);
color: #fff;
}

.primary-menu > li.current_menu_item > a { 
background: #fff; 
border: none; 
color: #333;
}

如果我想显示菜单，即使浏览器已调整大小，也有人可以帮助我该怎么办？

如何在调整浏览器大小时显示菜单？（wordpress）

0 个答案: