remove bootstrap navbar hover effect on button
13,143
Solution 1
Add this css
.nav>li>a:focus, .nav>li>a:hover {
text-decoration: none;
background-color: transparent !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar transparent">
<div class="container-fluid logo ">
<div class="navbar-header ">
<a class="navbar-brand " href="#">
<img src="images/Logo.png" />
</a>
</div>
<ul class="nav navbar-nav navbar-right right">
<li>
<a href="#">Get free trial</a>
</li>
<li class="Buybtn-topright">
<a href="#">Buy now</a>
</li>
</ul>
</div>
</nav>
Solution 2
.navbar-default .navbar-nav li a:hover,
.navbar-default .navbar-nav > .active > a:hover, {
background-color: initial;
}
this would only remove the hover effect,not the active effect
Solution 3
a:hover {
display: none;
}
That is going to remove everything on hover, but if you want to just make it look like theres no hover there, you can set the a:hover have background-color same as the original one is. For example.
Author by
Amir Torkashvand
Updated on June 15, 2022Comments
-
Amir Torkashvand almost 2 years
I want to remove the hover effect from my button in navbar how can i do that?[enter image description here][1]
<nav class="navbar navbar transparent"> <div class="container-fluid logo "> <div class="navbar-header "> <a class="navbar-brand " href="#"> <img src="images/Logo.png" /> </a> </div> <ul class="nav navbar-nav navbar-right right"> <li> <a href="#">Get free trial</a> </li> <li class="Buybtn-topright"> <a href="#">Buy now</a> </li> </ul> </div> </nav>