Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Thanked 0 Times in 0 Posts

    Angry Header needs to be moved down on my site PLEASE HELP

    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


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

    Theme Name: Pink Touch 2- Child Theme
    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;

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



  2. AdSlot6
  3. #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Thanked 1,874 Times in 1,858 Posts
    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;
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts