CODEWITHSUNDEEP
htmlcss
Jonah
Jonah

Reputation: 16242

Pushing content below a position:fixed top nav so it's visible

This problem arises when you are using a position:fixed top nav bar: Since the nav bar is out of the document flow, the initial content that you put after it will be hidden by the nav bar itself. This fiddle shows my solution which uses an extra spacer div and padding-top:

http://jsfiddle.net/MFwJT/

html

<div class="fixednav">some nav stuff</div>
<div class="navspacer"></div>
main content which should not be covered by nav

css

.fixednav { position:fixed; width: 100%; height: 30px; background: #999 }
.navspacer { padding-top: 30px; } /* This works */

2 questions

  1. Is there a better solution?
  2. If you change padding-top to margin-top, the nav bar behaves as if the spacer came before it rather than after it. I'd like to know why this happens.

To clarify question 2, margin-top produces this:

Imgur

whereas padding-top produces this (the correct behavior):

Imgur

Upvotes: 2

Views: 4900

Answers (5)

fat penguin
fat penguin

Reputation: 190

My solution to your questions:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .fixednav {
      position:fixed;
      top: 0;      
      width: 100%;
      height: 30px;
      background: #999
    }

    .main-contents {
      margin-top: 30px; 
    }
  </style>  
  <title>this is a test</title>
</head>
<body>
  <div class="fixednav">some nav stuff</div>
  <div class="main-contents">
    Lorem ipsum dolor sit amet...
  </div>
</body>
</html>

For the first question, you can fix it by putting all your main contents in a <div> and place the div under your main nav bar.

For your second question, it can be solved by simply adding top: 0; to the style

the mdn states that

The element is removed from the normal document flow, and no space is created for the element in the page layout. The element is positioned relative to its initial containing block, which is the viewport in the case of visual media. Its final position is determined by the values of top, right, bottom, and left.

Which means you ought to definite its position. Otherwise the browser has no idea how to place the element.

Upvotes: 1

Frontend Backend Bookend
Frontend Backend Bookend

Reputation: 133

If you are using in nav with is-fixed-top i.e.:

<nav class="navbar is-fixed-top">

then add below class to your body

<body class="has-navbar-fixed-top">

this will take care of appropriate spacing. You can also add the class to HTML which will give you some additional space from top of page.

The class is basically adding a padding top of 3.25rem either to body or html.

Upvotes: 0

reinerBa
reinerBa

Reputation: 1660

You can use a div for spacing like youtube does. Here i made an example wich uses javascript to listen on window resizes and adjusts the spacer if necessary. But you can also use this jQuery plugin for every single div.

    //initial adjustment
    $(function () { $('#topSpacer').height($('#fixedtop').height()); });

    //adjustment on every resize event        
    $(window).resize(function () {
        $('#topSpacer').height($('#fixedtop').height());
        console.log("<div>" +$('#topSpacer').height() + "</div>");
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="topSpacer"></div>

<div>
  Does anyone overlay me?
</div>

    <div id="fixedtop" style="position:fixed; top: 0px;">
        Top navbar elements Page0000000000000 Page11111111111111 Page2222222222222
    </div>

<div>
    Another relative element
</div>

Upvotes: 0

NoobEditor
NoobEditor

Reputation: 15911

Is there a better solution

IMHO, better solution would be to avoid a fake spacer div navspacer and instead, go with the span as you can easily achieve your target with a single div, using line-height and without a fake div

Example Fiddle

CSS

.fixednav {
    width: 100%;
    height: 30px;
    background: #999;
    line-height:90px; /*this is the key here*/
}
.fixednav > span {
    position:fixed;
    display:block;
    width:100%;
    line-height:30px;/*this is the key here*/
}

HTML

<div class="fixednav"> 
    <span>some nav stuff</span>
    main content which should not be covered by nav
</div>

Question 2

If you change padding-top to margin-top, the nav bar behaves as if the spacer came before it rather than after it. I'd like to know why this happens.

when you give the padding-top: 30px;, it is applied to the inside of the content area, making the whole div height (30px + if anything is in content), check this demo to see it

when you give margin-top: 30px;, it is applied to the outside of the content, demo and the contents overlap as FIXED position divs do not follow the document flow but the viewport flow!!

Upvotes: 1

Katrina
Katrina

Reputation: 1935

The problem here is that you fixed the position of the fixednav but not the navspacer. When you do this, the fixednav and navspacer are on the same line since one is fixed and not the other. When you add padding to the navspacer, it pushes away the fixednav from it. When you add margin-top:30px; it moves the fixednav and navspacer together. To fix this, add a fixed position to the navspacer and add the content to the fixed navspacer:

/*html*/    
<div class="fixednav">some nav stuff</div>
<div class="navspacer">main content which should not be covered by nav</div>

/*css*/ 
.fixednav { position:fixed; width: 100%; height: 30px; background: #999 }
.navspacer { position:fixed; margin-top: 30px; }

This will give you the correct behavior you are looking for. Here is a link: http://jsfiddle.net/4vAgZ/

Also, this picture should help you with the padding vs. margin thing. http://s3.amazonaws.com/codecademy-blog/assets/ae09140c.png

Hope this helps.

Upvotes: 0

Related Questions