Remove From My Forums

navigation bar color in bootstrap

Question

User351619809 posted

I am trying to change the background color of bootstrap navigation bar to a different color. I tried to put a different color in navbar-default like so:

.navbar-default {
  background-color:red;
  border-color: #e7e7e7;
}

I also put the .navbar-default in the tag like so:

 <div class="navbar navbar-inverse navbar-fixed-top navbar-default">

This did not change the background color of the bootstrap navigation bar. below is my layout page code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top navbar-default">
        <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>
                </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                   
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
    <script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
    <script src="~/Scripts/notify.min.js"></script>
    @RenderSection("scripts", required: false)
</body>
</html>

Below is the image of the navigation bar that I am seeing in my browser:

I just want a logo on the left side of the navigation bar and then the title right next to it.

Any help will be greatly appreciated.

Tuesday, September 8, 2020 6:33 PM

Answers

0

Sign in to vote
User475983607 posted

Place the following CSS in your Content\Site.css file. This overrides the Bootstrap CSS since it loads after Bootstrap.

Save the file and be sure to press ctrl-F5 in the browser to reload the Site.css file.

.navbar-inverse { background-color: blue; border-color: blue; }

You can figure a lot of the this out on your own if you learn how to use the browser's dev tools to view the CSS. You can even make changes to CSS directly in Dev Tools - very powerful. Learn how to take advantage of the tools in your tool chain.

I think you'll also be interested in learning CSS basics.  https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Tuesday, September 8, 2020 7:05 PM

Answered by:

navigation bar color in bootstrap

Question

Answers