Header needs to be moved down on my site PLEASE HELP

[brittanylynn01]

I am coding a child theme for a website using wordpress. I had changed some of the CSS to make the nav bar on the top stay fixed when scrolling. When I made those changes, the header moved up. how can I move the header down while also making it fixed and only have the body scroll. Thanks in advance. any help would be greatly appreciated

site:http://www.fillyshred.com/install

coding in the child theme style.css sheet thus far:

/*
Theme Name: Pink Touch 2- Child Theme
Description:
Author: admin
Template: pink-touch-2

(optional values you can add: Theme URI, Author URI, Version)
*/

@import url("../pink-touch-2/style.css");

body {
background: top center no-repeat;
color: #a22665;
font-size: 16px;
font-family: Arial, Times New Roman, Trebuchet MS;
margin: 0 auto 0;
padding: 0;
line-height: 20px;
}

/****************navbar**************/
#nav-menu {
display: block;
float: left;
color: #a22665;
font-size: 12px;
margin: -4px 0px 4px -16px;

}

#navigation{position:fixed;z-index:1}
#navigation-frill{position:fixed;z-index:2;margin-top:25px}

[Excavator]

Hello brittanylynn01,
You should probably put #navigatin outside of #wrapper. Then you can put a top margin on #wrapper so it clears the fixed nav above it.

Like this -

	<div id="navigation">
			<div class="wrapper clearfix">
				<div id="nav-menu" class="menu-home-container"><ul id="menu-home" class="menu"><li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36"><a href="http://www.fillyshred.com/install/about/">About</a></li>
<li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-35"><a href="http://www.fillyshred.com/install/events/">Events</a></li>
<li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32"><a href="http://www.fillyshred.com/install/updates/">Updates</a></li>
<li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34"><a href="http://www.fillyshred.com/install/shredder-of-the-month-2/">Shredder of the Month</a></li>
<li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"><a href="http://www.fillyshred.com/install/swag-brag/">Swag Brag</a></li>
<li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"><a href="http://www.fillyshred.com/install/contact/">Contact</a></li>
</ul></div>				<form method="get" id="searchfield" action="http://www.fillyshred.com/install/">
	<input name="s" onfocus="if ( this.value=='Search' ) this.value='';" onblur="if ( this.value=='' ) this.value='Search';" value="Search" type="text">
</form>			</div>
		</div><!-- /#navigation -->
	<div id="wrapper">
	
		<div id="navigation-frill"></div>

		<div id="header">
			<h1><a href="http://www.fillyshred.com/install/" title="" rel="home"></a></h1>

#wrapper {
	margin: 40px auto 0; /*adjust as needed*/
	padding-bottom: 60px;
	position: relative;
	text-align: left;
}