CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Mikkel
Mikkel

Reputation: 1811

Change text color in nav bar "Bootstrap"

I'm a new user to bootstrap and want to change the color of the items in the navigation bar.

Have created my own css file called Site.CSS, but also have the bootstrap.css file. Right now the text color of the heading "Home, booking, contact, login and register" is grey. When you hoover over it, it turns white.

I want it to be white as standard and change it to grey as you hoover over it with the mouse.

Some code i have of the master page:

<form id="form" runat="server">
 <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" runat="server" href="~/default.aspx">M-Hotels</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a runat="server" href="~/default.aspx">Home</a></li>
                    <li><a runat="server" href="~/Booking.aspx">Booking</a></li>
                    <li><a runat="server" href="~/Contact.aspx">Contact</a></li>
                </ul>
                <asp:LoginView runat="server" ViewStateMode="Disabled">
                    <AnonymousTemplate>
                        <ul class="nav navbar-nav navbar-right">
                            <li><a runat="server" href="~/Registration.aspx">Register</a></li>
                            <li><a runat="server" href="~/Login.aspx">Log in</a></li>
                        </ul>
                    </AnonymousTemplate>
                    <LoggedInTemplate>
                        <ul class="nav navbar-nav navbar-right">
                            <li>
                                <a runat="server" href="~/User.aspx" title="Manage your account">Hello,!</a>
                            </li>
                            <li>
                                <a runat="server" href="~/default.aspx" title="Log out"></a>
                            </li>
                        </ul>
                    </LoggedInTemplate>
                </asp:LoginView>
            </div>
        </div>
    </div>
    <div class="container body-content">
        <asp:ContentPlaceHolder ID="MainContent" runat="server">
        </asp:ContentPlaceHolder>
        <hr />
        <footer>
            <p>&copy; <%: DateTime.Now.Year %> - M-Hotels A/S</p>
        </footer>
    </div>
</form>

Can any tell me, if i am supposed to change something in the bootstrap file or if i must add something to the Site.css file.

Upvotes: 1

Views: 21000

Answers (4)

Spela Cedilnik
Spela Cedilnik

Reputation: 1

This is an old question but this is what worked for me:

a {
color: #536872;
text-decoration: none;
background-color: transparent;
}

`

Upvotes: 0

user4754589
user4754589

Reputation:

try this 

.nav.navbar-nav li a {
     color: #fff !important; 
 }
 .nav .navbar-nav li a:hover { 
     color: grey !important;
 }

Upvotes: 0

Anandh Sp
Anandh Sp

Reputation: 787

You can add this code in your Site.css file

.nav.navbar-nav li a {
   color: #fff;
 }

.nav.navbar-nav a:hover {
 color: grey;
}

Upvotes: 5

David Setz
David Setz

Reputation: 200

You should add something to your site.css What probably happens is that bootstrap styles are overwriting what you write. In that case you need to increase specificity

Upvotes: 0

Related Questions