2016-10-12 35 views
0

私は自分のブートストラップナビバーにプロファイルイメージを持っています。ドロップダウンのイメージをクリックすると、背景色が白に変わり、変更するCSSエレメントがわからない。以下のCSSとスクリーンショットを参照してください。固定ブートストラップnavbarを削除できませんimgドロップダウンの背景色

enter image description here

  <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">&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 &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; 
} 

答えて

0

。これに

.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; 

}

関連する問題