CODEWITHSUNDEEP
csstwitter-bootstrap
Vector
Vector

Reputation: 172

change css in bootstrap

I want to change the color of my navbar links to orange upon hover effect. I tried doing it this way but it didn't work. Help as I am new to bootstrapping and I do not know how to properly add our own css in twitter bootstrap

<head runat="server">
<title>My Bootstraping </title>
<link href="content/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<style type = "text/css">
a:hover
{
    background-color: Orange;
    }


</style>
<asp:ContentPlaceHolder ID="head" runat="server"> </asp:ContentPlaceHolder>
</head>
<body>
 <div class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" 
       data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="Default.aspx">Home</a></li>
        <li><a href = "About.aspx" > About </a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>

<div class="container">
    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

    </asp:ContentPlaceHolder>
</div>
</body>
</html>

Upvotes: 1

Views: 1858

Answers (3)

Dinesh Kanivu
Dinesh Kanivu

Reputation: 2587

I hope this will Work

HTML

<div class="navbar navbar-inverse">
    <div class="navbar-inner">
        <div class="container">
            <a class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".navbar-inverse-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
            <div class="item"><a class="brand" href="#"><img src="images/ocutag-logo.png"></a></div>

            <div class="nav-collapse navbar-inverse-collapse collapse" style="height: 0px;">
                <ul class="nav span6">
                    <li class=""> <a href="documents/overview">Overview</a></li>
                    <li><a href="documents/api">API</a></li>
                    <li><a href="documents/authoring">Authoring</a></li>
                    <li> <a href="documents/pricing">Pricing</a></li>
                    <li> <a href="documents/news">News</a></li>

                </ul>






            </div><!-- /.nav-collapse -->
        </div>
    </div><!-- /navbar-inner -->
</div>

CSS

.navbar-inner:hover{background: #febf01; /* Old browsers */
background: -moz-linear-gradient(45deg, #febf01 0%, #febf01 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#febf01), color-stop(100%,#febf01)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, #febf01 0%,#febf01 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg, #febf01 0%,#febf01 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg, #febf01 0%,#febf01 100%); /* IE10+ */
background: linear-gradient(45deg, #febf01 0%,#febf01 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#febf01', endColorstr='#febf01',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}

Upvotes: 0

jbarnett
jbarnett

Reputation: 984

You probably do not have a higher 'style rule precedence' on your style.

In order to override twitter bootstrap's a:hover, you need to be more specific in your selector. This will mostly likely be sufficient to override twitter bootstrap's a:hover

.navbar .container .nav a:hover {
    background-color: orange;
}

Upvotes: 1

AhmedBinNasser
AhmedBinNasser

Reputation: 2732

add this to your css file if you use a custom css file to override the main bootstrap css:

.navbar-inverse .nav > li > a:hover {
   color: orange;
 }

if you only use the css fils that comes with bootstrap then search the bootstrap.css for .navbar-inverse .nav > li > a:hover and change the value of color: xx; to the above code.

hope this will help

Upvotes: 0

Related Questions