CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Kaw123
Kaw123

Reputation: 89

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.

<head>
  <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>
</head>

<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>
      </div>
      <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>
      </button>

    </div>
    <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>
      <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>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Upvotes: 0

Views: 966

Answers (1)

Dhaval Chheda
Dhaval Chheda

Reputation: 5187

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

Upvotes: 2

Related Questions