CODEWITHSUNDEEP
cssasp.net-mvctwitter-bootstrap
chobo2
chobo2

Reputation: 85835

Why is my Header Getting Covered by Nav Bar? BootStrap

I am planning around with boostrap and wondering why when I use the built in classes that my header is still getting cut off. I can use css to move it but I would figure I would not need to add my own css when using the bootstrap header classes.

This is the generated page, I am using Asp.net MVC 5.1 from VS 2013. So alot of it is in the master page.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio - My ASP.NET Application</title>



    <link href="/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/modernizr-2.6.2.js"></script>




</head>
<body>
    <div class="navbar navbar-default 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" href="/">Application name</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="/home/index">Home</a>
                    </li>
                    <li>
                        <a href="#">Resume</a>
                    </li>
                    <li>
                        <a href="/home/portfolio">Portfolio</a>
                    </li>
                    <li>
                        <a href="#">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="container body-content">



<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">Portfolio</h1>
        </div>
    </div>


</div>



        <div class="navbar navbar-default navbar-fixed-bottom">
            <div class="container">
                <p class="navbar-text">&copy; 2014 - My ASP.NET Application</p>
            </div>
        </div>

        </div>

    <script src="/Scripts/jquery-2.1.0.min.js"></script>
    <script src="/Scripts/bootstrap.min.js"></script>

<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Firefox","requestId":"c8d12fe59c90426f9175a363b9a06484"}
</script>
<script type="text/javascript" src="http://localhost:58343/af7b5f6142444a738445c2a2e5c5a6d7/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>
</html>

enter image description here

Upvotes: 10

Views: 14939

Answers (4)

iiRosie1
iiRosie1

Reputation: 162

The laziest way is to add a bunch of <br> 's until the header isn't blocked. Or you could add padding to the top of the container. Normally your navigation bar is about 50px tall. You choose how much padding you want to give.

Upvotes: 0

Nathan A
Nathan A

Reputation: 11339

When using a fixed-top navbar, you have to add manual padding.

According to bootstrap documentation,

Body padding required

The fixed navbar will overlay your other content, unless you add padding to the top of the body tag. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.

body { padding-top: 70px; }

Make sure to include this after the core Bootstrap CSS.

Source: http://getbootstrap.com/components/#navbar-fixed-top

Upvotes: 13

bto.rdz
bto.rdz

Reputation: 6720

you have double container, remove that it will just look like this 

<div class="row">
    <div class="col-lg-12">
        <h1 class="page-header">Portfolio</h1>
    </div>
</div>

not:

 <div class="container">
<div class="row">
    <div class="col-lg-12">
        <h1 class="page-header">Portfolio</h1>
    </div>
</div>
</div>

Differences between container, row and span in Bootstrap

Hope it helps!

Upvotes: 0

Amir5000
Amir5000

Reputation: 1728

I believe it's because the Nav bar has the class navbar-fixed-top which makes the Navbar have a Fixed position in the CSS so just delete that class and it won't hide your header

Hope that fixes it for you.

Upvotes: 7

Related Questions