Titanium FAQ and Tips and tricks

How to move the navigation bar below the header image

Note: code may vary slightly depending on theme version.

1. Move the navigation code out of the header part

in header.php, change the last lines of code:

<div class="w900-" id="header">
	<a id="title" href="<?php bloginfo('url'); ?>" title="Return to Home"><?php bloginfo('name'); ?></a>
	<!--<p id="desc"><?php bloginfo('description'); ?></p>-->
</div>

	<div class="wrap" id="menu">
		<ul id="nav"><?php require_once( $GLOBALS['ithemes_theme_path'] . '/menu-pages.php' ); ?></ul>
	</div>

Notice how the div container "menu" now is below the last closing <div> and the header div is closed before the menu div.

2. Change padding on the header and menu in the stylesheet style.css

Change the code in the stylesheet style.css as indicated.

/*********************************************
		Header Styles
*********************************************/
#header {
	background: #111 url(images/header.jpg) no-repeat;
	width: 900px; height: 85px;
	margin: 0px 0px 5px 0px;   <===== set the 3rd margin value (=bottom) from 5px to 0px
}

And a little below that:

/*********************************************
		Horizontal Navigaion Styles 
				(with dropdowns)
*********************************************/
#menu {
	display: block; float: right;
	background: url(images/menu-bg.gif) repeat-x;
	border: 1px solid #FFF;
	border-right: none;
	font-size: 11px;
	width: auto; height: 20px;
	margin: 30px 20px 0px 0px; padding: 0px;     <===== set the 1st and 2nd margin value (=top and right) from 30px 20px ==> 0px 0px
	z-index: 100;
}