Quote Originally Posted by Glamorousshoe View Post
Iam trying to build a site based on the Default Zen Template.
I want to change the Navigation Bar to Look like the ones in the Cherry Template. I tryied to copy the StyleSheet from the Cherry to my site, which as you know changes the whole layout, SO the question is What do I need to change in my Stylesheet to be able to get the same Navigation bar without changing any other configuration for the header, I want to keep the white line between the logo area and the navigation bar. Also I want the Cherry Navigation bar to be centered.
The site is www.coolcarpartsonline.com. Its not done yet but its a start.
Sorry, it's not just about moving the stylesheet over, and unless I've done it, I can't tell you how to do it, but I can give you a step in the right direction. Past that, you'll have to do some figuring out. You'll need to copy over the navMainWrapper section from includes/templates/cherry_zen/common/tpl_header.php, and then only use the related css:

Code:
#navMainWrapper {
	background:url("../images/red/header.gif");
	}

#navMainWrapper {
	height:32px;
	width:100%;
	font-size:12px;
	}

#navMain a {
	background:url("../images/red/tableftE.gif") no-repeat left top;
	}
	
#navMain a span {
	background:url("../images/red/tabrightE.gif") no-repeat right top;
	}
	
#navMain a span.last {
	background:url("../images/red/tabrightE_last.gif") no-repeat right top;
	}

#navMain a span {
	color:#ffffff; /* color of header links, HOME, LOGIN, MY ACCOUNT, etc. */
	}
	
#navMain a:hover span {
	color:#ffffff; /* color of header links, HOME, LOGIN, MY ACCOUNT, etc. when hovered over */
	}

#navMain {
	float:right;
	width:750px;
	line-height:normal;
	}

#navMain ul {
	float:right;
	list-style:none;
	}
	  
#navMain li {
	display:inline;
	}
	  
#navMain a {
	float:left;
	text-decoration:none;
	}
	
#navMain a span {
	float:left;
	display:block;
	padding:7px 15px 10px 15px;
	text-align:center;
	width:90px;
	cursor:pointer;
	}
	
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#navMain a span {float:none;}
/* End IE5-Mac hack */

#navMain a:hover {
	background-position:0% -32px;
	}
    
#navMain a:hover span {
	background-position:100% -32px;
	}