如何在 wordpress 主题的下拉菜单中隐藏图像？

Question

我正在为我的客户制作一个带有 bootstrap 的自定义 wordpress 主题。他想要类似 this website 的下拉菜单作为主菜单。我如何删除或隐藏下拉菜单中的图像，如下图所示：

style.css

.navbar-nav {
    z-index: 0;
    position: absolute;
    left: 0;
    right: 0;
    height: 0
}

.navbar-nav a {
    display: block;
}

.navbar-nav li {
    display: block;
    margin: -33px auto 0 auto;
    width: 180px;
    height: 150px;
    background: url(img/logo.png) no-repeat scroll right/ 91% 100%;
   /* text-indent: -999em;*/
    direction: ltr;
    float: none;
}

.navbar-nav li a {
    background: transparent;
}

.navbar-default .navbar-nav>li>a {
    color: transparent;
}

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus {
    background: transparent; 
    /* background-color: #e7e7e7; */
    /* color: #555; */
}

.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {
    color: transparent;
    background-color: transparent;
}

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus {
    /* background-color: #e7e7e7; */
    /* color: #555; */
}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus {
    color: transparent;
    background-color: transparent;
}

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus {
    /* background-color: #e7e7e7; */
    color: transparent;
}



.nav .open>a, .nav .open>a:hover, .nav .open>a:focus {
    /* background-color: #eeeeee; */
    border-color: #337ab7;
}

.navbar-nav ul {
}

.navbar-nav ul ul {
}

.navbar-nav ul ul ul {
}

.navbar-nav ul ul a {
}

.nav .open>a, .nav .open>a:hover, .nav .open>a:focus {
    /* background-color: #eeeeee; */
    border-color: #337ab7;
}

.dropdown-menu li a {
    background-color: #ccc;
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.428571429;
    color: #333;
    white-space: nowrap;
}
.dropdown-menu li a:hover,
.dropdown-menu li a:focus {
    color: #ffffff;
    text-decoration: none;
    background-color: #357ebd;
    background-image: -webkit-gradient(linear, left 0%, left 100%, from(#428bca), to(#357ebd));
    background-image: -webkit-linear-gradient(top, #428bca, 0%, #357ebd, 100%);
    background-image: -moz-linear-gradient(top, #428bca 0%, #357ebd 100%);
    background-image: linear-gradient(to bottom, #428bca 0%, #357ebd 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0);
}
.dropdown-menu ul { list-style: none; }

header.php

<div class="navbar navbar-default">
                    <div class="navbar-header">
                        <!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="sr-only"><?php _e('Toggle navigation','_tk') ?> </span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>

                        <!-- Your site title as branding in the menu -->
                        <a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">Home</a>
                    </div>

                    <!-- The WordPress Menu goes here -->
                    <?php wp_nav_menu(
                        array(
                            'theme_location'    => 'primary',
                            'depth'             => 2,
                            'container'         => 'div',
                            'container_class'   => 'collapse navbar-collapse',
                            'menu_class'        => 'nav navbar-nav',
                            'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                            'menu_id'           => 'main-menu',
                            'walker'            => new wp_bootstrap_navwalker()
                        )
                    ); ?>

                </div><!-- .navbar -->
            </div>

更多详情请查看my website

Answer 1

似乎有一张图片作为背景添加到列表 (li) 项中，这些项是 .navbar-nav (.navbar-nav li) 的子项，只需删除以下内容：

background: url(img/logo.png) no-repeat scroll right/ 91% 100%;

CSS 应该如下所示：

.navbar-nav li {
    display: block;
    margin: -33px auto 0 auto;
    width: 180px;
    height: 150px;
   /* text-indent: -999em;*/
    direction: ltr;
    float: none;
}

Answer 2

您已经为每个 li 元素添加了背景图片，但您应该只为 .navbar-nav

添加背景图片

.navbar-nav {
    background: url(img/logo.png) no-repeat scroll right/ 91% 100%;
    z-index: 0;
    position: absolute;
    left: 0;
    right: 0;
    height: 0
}

.navbar-nav a {
    display: block;
}

.navbar-nav li {
    display: block;
    margin: -33px auto 0 auto;
    width: 180px;
    height: 150px;
   /* text-indent: -999em;*/
    direction: ltr;
    float: none;
}

Answer 3

我认为您的下拉菜单在屏幕宽度达到 767 像素后才处于活动状态，因此请使用 @media css。

@media screen and (max-width: 767px) {
 .navbar-default .navbar-nav > li > a {
    background: none!important;
  }
}

如何在 wordpress 主题的下拉菜单中隐藏图像？

How I can hide image on drop down menu in wordpress theme?

css

php

wordpress

wordpress-theming