Build a simple custom theme – Part 1
Step 3: Let’s look at the header
Looking at our design, we can see that our header area is 115px tall and contains a logo and navigation.
The header.php in our basic theme has a logo and tagline and below the header div comes the navigation.
Our design doesn’t have a tagline, so we can simply remove it.
We can then move our navigation inside our header div.
So our codes in the header.php should now look like:
<header id="branding"> <div id="logo"><a href="<?php echo home_url() ?>/"><?php bloginfo( 'name' ); ?></a></div> <nav id="top_nav"> <?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?> </nav> </header>
Now that we’ve modified this template, we need to make the following adjustments to our header div in your style.css.
#branding { float:left; width:900px; height:115px; background: #FFF url(images/header.gif) bottom repeat-x; border-left:30px solid #FFF; border-right:30px solid #FFF; -webkit-box-shadow: 0 0 5px rgba(0,0,0,.6); -moz-box-shadow: 0 0 5px rgba(0,0,0,.6); box-shadow: 0 0 5px rgba(0,0,0,.6); }
We also need to adjust the logo div to make it display:
#logo a { display:block; width: 212px; height: 45px; float:left; margin:30px 0 0 0px; text-indent:-9999em; outline:0; background:url(images/logo.png) top left no-repeat; }
Below the #logo, comes the #tagline. Since, we’ve deleted this div from our header.php we can no longer need the css. So let’s just delete that code.