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:

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

bootstrap dropdown下拉菜单无法显示

yds3300376yd

0个回复