-1

I have a problem using Bootstrap's grid system, what's happening is that my nav bar is seemingly covering up the other content, which is intended to be underneath it!

I'm using ASP.NET MVC in this Project, so all I've done is set up a Layout page like this;

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>You Hire it Ltd</title>
    <script src="~/scripts/jquery-2.2.4.js"></script>
    <script src="~/scripts/bootstrap.js"></script>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/style.css" rel="stylesheet" />
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <header>
                <nav class="navbar navbar-default navbar-fixed-top">

                    <div class="col-md-8">
                        <div class="navbar-header">
                            <a class="navbar-brand" href="#">
                                You Hire It
                            </a>
                        </div>
                        <ul class="nav nav-pills">
                            <li class="active">@Html.ActionLink("Home", "Index")</li>
                            <li>@Html.ActionLink("About", "About")</li>
                            <li>@Html.ActionLink("T&Cs", "Legal")</li>
                            <li>@Html.ActionLink("Contact us", "Contact")</li>

                        </ul>

                    </div>
                    <div class="col-md-offset-2"></div>

                    <div class="col-md-2 pull-right">
                        <div class="container-fluid">
                            <div class="ButtonWrapper">
                                <button class="btn btn-success">Sign up/Login</button>
                            </div>

                        </div>

                    </div>
                </nav>
            </header>
        </div>

    </div>
    @RenderBody()




</body>
</html>

and the page in question is like this;

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6">

            <h1>Hello</h1>
        </div>
    </div>

</div>

I'm not entirely sure what's causing this behavior, any pointers would be greatly appreciated.

Thanks guys :)

Captain_Custard
  • 1,308
  • 6
  • 21
  • 35

1 Answers1

1

You need to add padding to the top. From the Bootstrap docs:

The fixed navbar will overlay your other content, unless you add padding to the top of the body.

So in your style.css you need..

body {
   padding-top:70px;
}
Carol Skelly
  • 351,302
  • 90
  • 710
  • 624