dongtun1683 2016-01-11 16:14 采纳率: 0%
浏览 72
已采纳

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

I am making a custom wordpress theme with bootstrap for my client. He want similar like this website with drop-down menu as primary menu. How I can remove or hide the images on drop-down menu like screenshot below:

drop-down menu

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>

For more detail please check out my website

  • 写回答

3条回答 默认 最新

  • doudao8283 2016-01-11 16:21
    关注

    you have added background image to every li element but you should do it only for the .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;
    }
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥15 fpga自动售货机数码管(相关搜索:数字时钟)
  • ¥20 Python安装cvxpy库出问题
  • ¥15 用前端向数据库插入数据,通过debug发现数据能走到后端,但是放行之后就会提示错误
  • ¥15 python天天向上类似问题,但没有清零
  • ¥30 3天&7天&&15天&销量如何统计同一行
  • ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
  • ¥15 C#调用python代码(python带有库)
  • ¥15 活动选择题。最多可以参加几个项目?
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题