Overlapping sections

HTML & CSS
1

For some reason my content section #ContentContainer is floating up into my nav section #NavContainer. I see the paddings and margins being 0 so I don’t know why this is. I’ve looked at this a lot but can’t find the solution.

NuCounseling.com is the domain.

You do have to enter the password opensesame to view the site.

Anyways, if someone can help a brother out then it would be appreciated. thx

2

#NavContainer is {position:fixed} which removes it from the flow of the page. But the complicating factor is that its height is fluid. If it had a fixed height, you could add padding-top of that same value to #ContentContainer and the top of it would not hide beneath #NavContainer.

It is possible to use JavaScript to pad the top of #ContentContainer as the height of #NavContainer.changes.

3

That header is rather too big to be a fixed positioned header and you would be better off just removing the position:fixed and letting it behave normally which I think is much nicer anyway.

Fixed positioned headers are fine if they are fixed height and unobtrusive (i.e. a one line header or footer) but large elements are not suitable to be fixed positioned for many reasons - especially usability.

What some people do these days is to let the main header scroll away and then replace it with a smaller fixed header.

Here’s a rough example.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
	margin:0;
	padding:0
}
/* sticky message at top of page */
.header {
	margin:0;
	border-radius:0;
	min-height:50px;
	border-bottom:1px solid red;
	background:rgb(242,222,222);
	padding:1px;
	text-align:center;
	top:-100px;
}
.fixedElement {
	position:fixed;
	top:0;
	right:0px;
	left:0px;
	z-index:999;
	background:rgba(242,222,222, 0.9);
	margin-bottom:0;
	-webkit-box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.25);
	-moz-box-shadow:    2px 3px 3px rgba(0, 0, 0, 0.25);
	box-shadow:         2px 3px 3px rgba(0, 0, 0, 0.25);
	-moz-transition:2s all 0s;
	-webkit-transition:2s all 0s;
	transition:2s all 0s;
}
</style>
</head>

<body>
<div class="header fixit">
		<h1>Testing sticky header</h1>
</div>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<script src="http://code.jquery.com/jquery.js"></script> 
<script type="text/javascript">
   function fixedHeaders() {
           var el = $(".fixit"),
               offset = el.offset(),
               elHeight = el.height(),
               scrollTop = $(window).scrollTop()
               if ((offset.top < scrollTop - el.height())) {
                   el.fadeOut( "slow", function() {
																			el.addClass('fixedElement').fadeIn('slow');	
																	});
               }
           if (scrollTop === 0) {
               el.removeClass('fixedElement');
           }
   }

   $(function () {
       $(window)
           .scroll(fixedHeaders)
           .trigger("scroll");
   });

</script>
</body>
</html>