Блог

У меня есть изображение профиля в моей панели навигации bootstrap. Когда я нажимаю на изображение для выпадающего списка, цвет фона меняется на белый, и я не уверен, какой элемент CSS изменить. Смотрите CSS ниже и снимок экрана.

             <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="<?php echo base_url().'blahblahblah'; ?>">Blahblahblah</a></li>
                <?php
                    $link_protocol = USE_SSL ? 'https' : NULL;

                if($this->session->userdata('allow_login'))
                {
                    if( ! empty( $this->auth_role ) )
                    {
                        if(strpos(current_url(), 'member') == FALSE )
                        {
                        //User is logged in and not on a member page, show profile image or default image and member dropdown
                ?>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle profile-image" data-toggle="dropdown">
                            <img src="<?php echo $this->usr_profile_img; ?>" class="img-circle">amp;nbsp;<b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="<?php echo site_url('member/profile', $link_protocol); ?>">My Profile</a></li>
                                <li><a href="<?php echo site_url('member/settings', $link_protocol); ?>">Settings</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="<?php echo site_url('logout', $link_protocol); ?>">Logout amp;nbsp;<i class="fa fa-sign-out" aria-hidden="true"></i></a></li>
                            </ul>
                        </li>
                <?php
                        }
                    }
                    else
                    {
                        //User is not logged in
                        echo '<li class="side-padded"><p class="top_margin10"><a href="'.base_url().'login" role="button" class="btn btn-primary btn-sm">Sign In</a></p></li>';
                        echo '<li class="side-padded"><p class="top_margin10"><a href="'.base_url().'signup" role="button" class="btn btn-success btn-sm">Sign Up!</a></p></li>';
                    }
                }
                ?>
            </ul>
        </div>
  

CSS

 .navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #98cbed;
font-family: 'Roboto';
font-style: normal;
font-weight: 600;
background-color: none;
background-image: none;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #98cbed;
background-color: transparent;
font-family: 'Roboto';
font-style: normal;
font-weight: 600;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #98cbed;
font-family: 'Roboto';
font-style: normal;
font-weight: 600;
background-color: none;
background-image: none;
}
  

Исправлено.

Изменено это:

 .navbar-nav li a {
margin-top: 15px;
  

}

К этому:

 .navbar-nav {
margin-top: 15px;
  

}

И изменил это:

 .navbar .navbar-nav > li.open > a:hover,
.navbar .navbar-nav > li.open > a:focus,
.navbar .navbar-nav > li.open > a:active {
background-color: #282828;
  

}