Bootstrap custom header using navbar

0
votes

I'm trying to make a custom header for my website using boostrap navbar class, I'd like to change the links text color to white, the navbar background color to black and also change the links highlight color when the mouse goes over them.

Here is my html:

<html>
    <head>
        <meta charset="UTF-8" />

        <!-- css files -->
        <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
        <link rel="stylesheet" type="text/css" href="main.css">

        <!-- javascript -->
        <script src="jquery.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>
        <!-- webiste header -->
        <nav class="navbar navbar-default navbar-fixed-top header">
            <div class="container-fluid">
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">link1</a></li>
                        <li><a href="#">link2</a></li>          
                    </ul>
                </div>
            </div>
        </nav>
    <body>
<html>

and here is my css:

.header{
    background-color:#333333;
    color:red;
    font-size:1.5em;
}


.header li{
    border-bottom:3px solid #333333;
}

.header li:hover{
    background-color:black;
    border-bottom:3px solid orange;
}

Everything seems to work but the links color is grey instead of white as you can see on this screenshot. screenshot

1
htmlcsstwitter-bootstrap

1 Answers

0
votes
.header a {
    color: #fff;
}

.header a:hover {
    color: #f00;
}