Need to make page appear lower after using position:fixed; for menu

[jonbey]

OK, not too sure how to explain this.

I created a top nav bar that "floats" or really is fixed to the top of the page. It works fine except when linking to a point on a page - then the point on the page is off screen (under the menu). An example should help.

If you navigate direct to here: http://www.motleyhealth.com/about-motley-health#trust the H2 header is not visible, it is under the blue nav bar at the top. This means that anyone following an "a name=" anchor does not see the sub-heading and this is likely to cause confusion.

I have tried adding padding and margins to the top of the "header" and the bottom of the "tophat" with no luck.

Does anyone know how I can fix it?

I am thinking that I probably may need an alternative top nav solution to the one I am using, but really hoping it is a simple CSS fix.

Maybe seeing the CSS will help:

#tophat{
  color: #fff;
 	background: #0A5784;
	float: left;
	width: 100%;
	height: 40px;
	position:fixed;
 z-index:1000;
  top: 0 !important;
  left: 0 !important;
  border-bottom: 4px solid #999999;
  padding-bottom: 5px;
  font-weight: 400;
	}
	
	#tophat a {
	color: #fff;
	text-decoration: underline;
	} 
	

#header{
	margin-top: 50px;
	background: #fff;
	float: left;
	width: 100%;
	}