10

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

chobo2
  • 83,322
  • 195
  • 530
  • 832

4 Answers4

13

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

Community
  • 1
  • 1
Nathan A
  • 11,059
  • 4
  • 47
  • 63
  • Huh, I don't remember adding it in, so VS 2013 might have but kinda shocked if it did that it would not account for this unless of course I deleted it without realizing. – chobo2 Apr 08 '14 at 22:14
7

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.

Amir5000
  • 1,718
  • 15
  • 19
  • hmm yea that seemed to be the problem, I guess "page-header" can't compensate. Though my header whitespace is still more than the example I am trying to build(http://startbootstrap.com/templates/2-col-portfolio.html). Not sure if this caused by my different theme or if they got a style fixing it. – chobo2 Apr 08 '14 at 22:04
  • 1
    the navbar is 50px high by default and the `page-header` class has only 40px margin on the top so that's not enough for it to show. So you can just add this CSS rule after the bootstrap CSS `.page-header {margin-top: 60px;}` – Amir5000 Apr 08 '14 at 22:26
  • Thanks, that was the problem for my case too – Dimitris Thomas Mar 07 '21 at 01:58
0

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!

Community
  • 1
  • 1
bto.rdz
  • 6,636
  • 4
  • 35
  • 52
  • Hmm, I am just following this template: https://github.com/IronSummitMedia/startbootstrap/blob/master/templates/2-col-portfolio.html and using http://bootswatch.com/cerulean/. It still gets cut off even with your changes. – chobo2 Apr 08 '14 at 21:58
  • just checked my template and you are missing une class, will update – bto.rdz Apr 08 '14 at 22:02
  • I do have that, there is some whitespace between those tags though.
    – chobo2 Apr 08 '14 at 22:04
  • do not repeat container, that have to work, just updated again – bto.rdz Apr 08 '14 at 22:06
  • I personally just use container class to wrap all my body once, if you need more info check what container, row, and col classes add to your css I am not sure why. I just avoid it because I get sometimes erorrs like this one – bto.rdz Apr 08 '14 at 22:13
  • hmm can't comment if multiple containers can cause problems(or if that is bad practice..might need to start a new topic on that) but that was the first thing I tried and nothing changed. Seems like this is more an issue with the nav being top-fixed. – chobo2 Apr 08 '14 at 22:17
  • nav bar fixed is ok. my template works as I already told you and I dont have those problems. but yes I'll be glad to read your next question and see a reasonable anwer. – bto.rdz Apr 08 '14 at 22:19
  • I tried again and removed the container from the body and still same result. – chobo2 Apr 08 '14 at 22:25
  • just wrap that h1 in a div with .page-header class. – bto.rdz Apr 08 '14 at 22:31
0

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.

iiRosie1
  • 162
  • 2
  • 17