Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Put div below navigation bar and don't overlap content

My issue is that I fixed a navigation bar at the top of my webpage and it includes both side margins and top one. Below this navigation bar, I want to set an scrollable container.

Let me say I'm using Bootstrap 3.2.0 to lay out the site.

The issue is that due to the margins of my navigation bar, the content I want to put below overlap the navigation bar and it's shown besides the navigation bar. For a better explanation of this I provide you my code, and a live example:

UPDATE: I have noticed something that increases a little bit the difficult from my point of view, and it's that the body has a rule to hide the scroll and doesn't let scroll up/down:

I would like just to scroll over the content "Hi World" and obviously that the whole content is shown from the first word: "BEGIN" to "END" word scrolling.

body {
   overflow: hidden;
}

http://www.bootply.com/TZebvFEl3T (I updated the bootply code with the required restictions).

<nav class="navbar navbar-default navbar-fixed-top my-own-style">
   <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>
    <li class="divider-vertical"></li>
    <li><a href="#">More</a></li>
    <li><a href="#">Options</a></li>
   </ul>
</nav>

<div>
    <p>BEGIN</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
    ...
    <p>END</p>
</div>

UPDATE 2:

Experimenting with your answers and my own research I achieved something it's close to work for me, I have an scroll for the div with the content below the navigation menu and now the content doesn't overlap.

The issue is that I also have a fixed footer at the page, if I resize the window the scroll is not completely visible and I can't reach the end of the list because is overlaped by the footer, so doesn't let me see the end of the scroll, if I remove the footer obviously this is visible.

But I have to adjust my scroll to start at the bottom of the top nav menu, and end at the top of my footer as you can see in the example, the issue appears when you resize the browser.

I think I'm looking for something like this for my container, please have a look to next link:

Content with 100% between header and footer

And here is my code:

http://www.bootply.com/knJkGoEHWQ

HTML:

<nav class="navbar navbar-default navbar-fixed-top my-own-style">
    <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>
        <li class="divider-vertical"></li>
        <li><a href="#">More</a></li>
        <li><a href="#">Options</a></li>
    </ul>
</nav>

<div class="container-fluid scroll">
    <p>BEGIN</p>
    <p>Hi World</p>
    <p>Hi World</p>
    <p>Hi World</p>
    <p>Hi World</p>
    <p>Hi World</p>
    <p>Hi World</p>
    <p>Hi World</p>
    <p>Hi World</p>
    ... 
    <p>END</p>
</div>

<div class="navbar navbar-default navbar-fixed-bottom">
    <div class="navbar-header"><a class="navbar-brand" href="#">Brand</a></div>
    <ul class="nav navbar-nav">
     <li class="active"><a href="#">Home</a></li>
     <li><a href="#">Link</a></li>
     <li><a href="#">More</a></li>
     <li><a href="#">Options</a></li>
      </ul>
</div>

CSS:

/* CSS used here will be applied after bootstrap.css */

body, html {
    height: 100%;
    overflow: hidden;
    padding-top: 44px;
}

.my-own-style {
    margin-left: 37px;
    margin-top: 37px;
}

.scroll {
    overflow: auto;
    height: 80%;
    padding: 0;
    margin-left: 37px;
}

UPDATE 3 (SOLUTION):

Ok regarding the update 2, the issue was so simple to sort it out, maybe I didn't see it. Basically in the same way I added a padding on the top of the body to set my main container below the top navigation menu, I have to do exactly the same but with the bottom padding of the body to set my main container above the bottom navigation menu.

Moreover, I set the height to 100% for my main container in that way it expand along the whole div which contains it.

Here is the solution:

http://www.bootply.com/sazMMHNCGy

HTML:

<nav class="navbar navbar-default navbar-fixed-top my-own-style">
    <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>
        <li class="divider-vertical"></li>
        <li><a href="#">More</a></li>
        <li><a href="#">Options</a></li>
    </ul>
</nav>

<div class="scroll">
    <p>BEGIN</p>
    <p>Hi World</p>
    Hi World
    <p>Hi World</p>
    <p>Hi World</p>
    Hi World
    <p>Hi World</p>
    <p>Hi World</p>
    <p>Hi World</p>
    <p>Hi World</p>
    ...
    <p>END</p>
</div>

<div class="navbar navbar-default navbar-fixed-bottom">
    <div class="navbar-header"><a class="navbar-brand" href="#">Brand</a></div>
    <ul class="nav navbar-nav">
     <li class="active"><a href="#">Home</a></li>
     <li><a href="#">Link</a></li>
     <li><a href="#">More</a></li>
     <li><a href="#">Options</a></li>
      </ul>
</div>

CSS:

/* CSS used here will be applied after bootstrap.css */

body, html {
    height: 100%;
    overflow: hidden;
    padding-top: 44px;
    padding-bottom: 25px;
}

.my-own-style {
    margin-left: 37px;
    margin-top: 37px;
}

.scroll {
    overflow: auto;
    height: 100%;
    padding: 0;
    margin-left: 37px;
}

And for me this is the solution I was looking for.

like image 814
Joe Lewis Avatar asked Oct 16 '14 10:10

Joe Lewis


People also ask

Why is my navbar covering next section container?

It is because the nav bar is fixed.

How do you make a top fixed navbar stay in the container and not stretch?

Use fixed-top before <nav></nav> tags.

How do I add a space between NAV links?

You can use margin-left or margin-right to create spaces between inline block elements.

Why do we set zero paddings and margins when creating a navigation bar?

A navigation bar does not need list markers. Set margin: 0; and padding: 0; to remove browser default settings.


2 Answers

From the Bootstrap documentation:

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

So just add your body padding:

body
{
    padding-top: 70px;
}

If you don't want your body to scroll behind the navbar, change your CSS to use padding instead of margin:

.my-own-style {
    padding-left: 37px;
    padding-top: 37px;
}
like image 127
DavidG Avatar answered Sep 23 '22 17:09

DavidG


I really don't like having to add elements that are just there for purposes of pushing content around. This is what positioning is designed to handle. The best way to do this is to start by adding padding to the top of your body, as @davidg stated in his answer. Further, to move your navbar into position, don't use margins. Instead using the top, left and right properties. The navbar-fixed-top class already sets the position to fixed, so you don't need to give any position property value. I also added the container-fluid class to your div (so that you get some padding inside) and a custom class scrollable to set the overflow property.

DEMO

CSS:

html, body {
  height: 100%; /*Fixes the height to 100% of the viewport*/
}
body {
  padding-top: 87px; /*50px for the height of the navbar + 37px for the offset*/
  padding-bottom: 50px; /*50px for the height of the bottom navbar*/
}
.navbar-offset {
    top: 37px; /*Offsets the top navbar 37px from the top of the viewport*/
}
.container-fluid.scrollable {
  height: 100%; /*Sets the scrollable area to 100% of the viewport*/
  overflow: auto; /*Allows the scrollable area to have a scrollbar based on the height of its content*/
  background: #ccc;
}

HTML:

<nav class="navbar navbar-default navbar-fixed-top navbar-offset">
    <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>
        <li class="divider-vertical"></li>
        <li><a href="#">More</a></li>
        <li><a href="#">Options</a></li>
    </ul>
</nav>

<div class="container-fluid scrollable">
    <p>BEGIN</p>
    <p>Hi World</p>

    ...

    <p>END</p>
</div>


<nav class="navbar navbar-inverse navbar-fixed-bottom">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span></a></li>
        <li><a href="#"><span class="glyphicon glyphicon-user"></span></a></li>
        <li><a href="#"><span class="glyphicon glyphicon-calendar"></span></a></li>
        <li><a href="#"><span class="glyphicon glyphicon-comment"></span></a></li>
        <li><a href="#"><span class="glyphicon glyphicon-star"></span></a></li>
    </ul>
</nav>
like image 20
jme11 Avatar answered Sep 22 '22 17:09

jme11