CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
GibboK
GibboK

Reputation: 73928

What is the best way to add some space after Bootstrap navbar?

The following code displays a navbar always on the top of the page. I need the second container (content) to be positioned at the end of the navbar and not under it. At the moment second container is under the navbar.

I could add some empty space on the top of the content are, but I am not sure it is a good approach. Any idea how to solve it?

enter image description here

 <div class="container">
        <div class="row">
            <div class="container">
                <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
                    <div class="container">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="#">Home</a></li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                        </ul>
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>
                </nav>
            </div>
        </div>
        <div class="row">
            <div ng-view></div>
        </div>
    </div>

Upvotes: 19

Views: 30749

Answers (5)

logi-kal
logi-kal

Reputation: 7880

You may don't want to hardcode the padding-top value in your CSS, since it depends on the navbar's height.

Here's a dynamic solution with JavaScript:

let additionalPadding = 5; // 5px
function updatePaddingTop() {
    $("body").css({
        "padding-top" : $(".navbar").outerHeight() + additionalPadding
    });
}
$(document).ready(() => updatePaddingTop())

Also, if your navbox could change size (for example, on window's resize), you may want to detect such a change and re-apply the fix:

var observer = new ResizeObserver(() => {
    updatePaddingTop();
}).observe($(".navbar")[0]);

Upvotes: 0

Carol Skelly
Carol Skelly

Reputation: 362430

Updated 2018

Bootstrap 3

According to the Bootstrap docs (http://getbootstrap.com/components/#navbar-fixed-top) you should use padding-top on the body..

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

body { padding-top: 70px; }

Demo: http://www.bootply.com/Ob3Bajkv1f

Bootstrap 4

Padding is also recommended for the fixed-top Navbar in Bootstrap 4 to prevent content hiding at the top of the body. You can add custom CSS for padding-top or use the pt-5 utility class on the body tag:

<body class="pt-5"></body>

Upvotes: 26

GibboK
GibboK

Reputation: 73928

I was able to solve this issue using the following code.

  <div class="container">
        <!-- navbar -->
        <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">KanbanBoard</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="#">Boards</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">User</a></li>
                    </ul>
                </div>
            </div>
        </nav>

        <!-- boards -->
        <div ng-view></div>
    </div>

Upvotes: -1

Edgar Ortega
Edgar Ortega

Reputation: 1735

You would need some CSS like this:

body {
  padding-top: 20px;
  padding-bottom: 20px;
}

Or like this:

.navbar {
  margin-bottom: 20px;
}

Make sure you only use what you need,

Upvotes: 10

Wavemaster
Wavemaster

Reputation: 1824

Just add margin-top: 50px; to the underlaying container.

50px has to be the height of your navbar.

Upvotes: 1

Related Questions