Kaw123 Kaw123 - 1 year ago 136
jQuery Question

How i can change bootstrap navbar hover

How can i edit this to be able to see the navbar options. Currently it has the same color as background.I want to change the font before to white and change them when it hover to white background with blue color font.

<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<nav class="navbar navbar-dark bg-primary navbar-fixed-top " role="navigation">
<div class="container">
<div class="navbar-header">
<div class="tog" style="padding-top:7px; ">
<a href="#menu-toggle" class="btn btn-default btn-sm" id="menu-toggle"> <span class="glyphicon glyphicon-eye-open"></span> </a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#top-nav">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>

<div class="collapse navbar-collapse navbar-ex1-collapse" id="top-nav">
<ul class="nav navbar-nav">
<li ><a href="#"><i class="fa fa-home"></i> Home</a></li>
<ul class="nav navbar-nav navbar-right">
<li ><a href="#"><i class="fa fa-suitcase"></i><span class="glyphicon glyphicon-envelope"> </span></a></li>
<li ><a href="#"><i class="fa fa-suitcase"></i><span class=" glyphicon glyphicon-bell"> </span></a></li>

<li class="dropdown">
<a href="#" class="dropdown-toggle profile-image" data-toggle="dropdown">
<img src="http://placehold.it/30x30" class="img-circle special-img"> xxx <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="fa fa-cog"></i> Account</a></li>
<li class="divider"></li>
<li><a href="#"><i class="fa fa-sign-out"></i> Sign-out</a></li>

Answer Source

go to your downloaded bootstrap.css file and makes the changes maybe somewhere around line 4489..

change the css of this selector

.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
    color: #333;
    background-color: transparent;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download