Changing Navbar color for Bootstrap Yeti theme

Question

I am new to using Bootstrap Version 3 an I am trying to change the default navbar color of the Bootstrap Yeti theme, http://bootswatch.com/yeti/, for my ASP web application in VS 2013. I downloaded the bootstrap.css and bootstrap.min.css files and copied them to my project.

I want to change the navbar background color to green: 93c951 and the navbar text to blue: 0f74bc.

I have followed the instructions here Change navbar color in Twitter Bootstrap 3 for the correct answer but the navbar color remains the same when I change the .navbar-default colour settings among other navbar setting changes. I make the changes to the bootstrap.css file under the Content folder that was made when I created my Visual Studio Web Forms application.

What do I need to do to make these changes?

Site.Master

<!DOCTYPE html>

<html lang="en">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%: Page.Title %> - Ecoline</title>

    <asp:PlaceHolder runat="server">
        <%: Scripts.Render("~/bundles/modernizr") %>
    </asp:PlaceHolder>

    <webopt:BundleReference runat="server" Path="~/Content/css" />
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

</head>

score 0 · Accepted Answer · answered Apr 08 '14 at 09:27

0

Hmmm, it might be that the original bootstrap styles are overwriting your custom styles. Try replacing/deleting the styles you downloaded from Bootstrap – or use !important, if you must.

.navbar-default {
    background-color: #93c951 !important;
    border-color: #222222;
}


.navbar-default .navbar-nav > li > a {
    color: blue;
}


// Also don't forget to change the hover styles as well

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    color: blue;
    background-color: #93c951 !important;
}   


// And the brand colour

.navbar-default .navbar-brand {
    color: blue;
}

answered Apr 08 '14 at 09:27

Richard Oliver Bray

1,043
13
20

Thanks for your reply. I have done as you have suggested to the bootstrap.css. No change. Do I need to do the same for the min.css? – Kinyanjui Kamau Apr 08 '14 at 11:04
If you've got the main bootstrap you shouldn't need the min.css, try getting rid of it. – Richard Oliver Bray Apr 08 '14 at 12:38
Still no change. Going through the css to check if additional changes are needed. – Kinyanjui Kamau Apr 08 '14 at 13:01
Could you please post the head part of your html below the doctpye declaration please. Might have something to do with the ordering. – Richard Oliver Bray Apr 08 '14 at 13:32
Huh, you don't import your stylesheets like this `` okay. Do you use any other css files? – Richard Oliver Bray Apr 08 '14 at 15:58
I created a Webforms application using VS 2013. I have NOT added any code to the header. All that code including that line – Kinyanjui Kamau Apr 08 '14 at 18:55
Hmm, Instead of putting you CSS in another file try inlining it like so; `
`
– Richard Oliver Bray Apr 10 '14 at 10:46

Changing Navbar color for Bootstrap Yeti theme

Site.Master

1 Answers1