Question

我正在使用wordpress网站上的导航栏有点困难。它在电脑上显示，但在手机上它只显示一个条。如果我点击栏，没有任何反应。

我的HTML如下

 <nav id="site-navigation" class="main-navigation" role="navigation">
        <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'Mandurah' ); ?></button>
        <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ) ); ?>
    </nav>

我可以看到我称之为CSS的

 /* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
    display: block;
}

@media screen and (min-width: 37.5em) {
    .menu-toggle {
        display: none;
    }
    .main-navigation ul {
        display: block;
    }
}

我对响应式设计非常陌生，我确信我只是缺少一些基本的东西。这个特殊的网站使用了bootstrap和下划线的混合。希望你能帮忙吗？

Answer 1

使用以下代码替换您的css代码并进行测试。

@media only screen and (min-width: 37.5em) { .menu-toggle { display: none; } .main-navigation ul { display: block; }

Answer 2

它确实只显示一个条形，因为您将display：none设置为按钮：

.menu-toggle {
    display: none;
}

从我看到的，当您点击栏时，您正试图显示菜单？

Answer 3

使用以下代码替换您的css代码并进行测试。

@media only screen and (min-width: 37.5em) {
    .menu-toggle {
        display: block;
    }
    .main-navigation ul {
        display: none;
    }

移动wordpress导航

3 个答案: