The markup for a css sprites nav bar?

[reachmore_ 0]

Platform Pro! I love messing around with this awesome theme! No matter what I do, I just can't break this bad boy! lol Far and away the sweetest theme I own! Has anyone had success creating a css sprite nav-bar similar to the one above? I have a killer psd file with images (5 editable text buttons ) displaying 3 states + a search field. 4 different color schemes. I'd like to mimic the look of the navigation on this forum page. So, where do I start? #brandnav {....? Should I create the menu in the dashboard, or add an html ordered list to ?????? I understand that all css should be added to the child theme, but can't wrap my head around where to place the html. Also, should I add - or could I add my logo image and custom full- width background to the image sprite prior to setting the css rules? Or will creating the sprite image (my killer psd files) be able to sit on top of the header background and be placed to the right of the logo? Some markup examples of how to do this would be greatly appreciated and forever Karmasized! Thanks in advance.

[cmunns 16]

I would start by getting something like FireBug to dissect what is going on in the nav above. You will see the rules and such for :hover :active, etc and may learn a lot

[reachmore_ 0]

Thanks for the reply Adam. Yup, been there done that! Just wanted to know if anybody else is using a sprite nav with Pagelines Pro theme, and maybe swipe some css markup to tweak. I'd like to replicate the header/nav from this page, but can't seem to wrap my head around how to go about it. <div class="content-pad"> <div class="inline-nav main_nav fix"> <ul id="menu-main-nav" class="main-nav"> <li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-15 current_page_item menu-item-34"> <li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"> <li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"> <li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32"> <li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30"> How would I position my image sprite within the divs here? I have a logo to contend with also. Any help would be great! All I got is time, patience and a passion to learn. Thanks

[cmunns 16]

the sprite is controlled by css markup not HTML markup...it just changes background location based on the :hover :active and normal states. Is that your question?

[joie 4]

I am trying to do the same thing, Using firebug, the sniplet for the home navigation button currently is like below

<div id="branding" class="container fix"> ... ... <div id="primary-nav" class="container fix"> <div class="texture"> <div class="content"> <div class="content-pad"> <div id="nav_row" class="main_nav fix"> <ul id="menu-home-page-first" class="main-nav"> <li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-12 current_page_item menu-item-17"> Home <li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-18"> Sample Page .... .... ....

Does anyone know how to : - resize the height of the navigation menu to fit the image - write sample code at custom CSS to apply the button image Image width:157px height:363px is at cheers, Joie

[timlinson 3]

The power of using firebug isn't seeing the html markup. It's seeing the css associated with the markup elements. Click on those html elements and you can start messing around with the css on the right and see what you're doing in real-time.

[nudolio 1]

It is sloppy but this worked great for me -

	#primary-nav #nav_row {
	    border-color: #333333;
	height: 40px;
	}
	
	.main_nav li a {
	    -moz-border-bottom-colors: none;
	    -moz-border-image: none;
	    -moz-border-left-colors: none;
	    -moz-border-right-colors: none;
	    -moz-border-top-colors: none;
	    border-color: transparent transparent -moz-use-text-color;
	    border-style: none;
	    border-width: 0;
	    display: block;
	}
	
	#nav_row li {background-image:url(/wp-content/uploads/2011/06/tab-sprite.png); background-repeat:no-repeat;background-position:right 0;border:none;}
	
	#nav_row li a:link {color: #FFFFFF;}
	
	#nav_row li a:visited {background-image:url(/wp-content/uploads/2011/06/tab-sprite.png); background-repeat:no-repeat;background-position:right 0;border:none;}
	
	#nav_row li a:hover {background-image:url(/wp-content/uploads/2011/06/tab-sprite.png); background-repeat:no-repeat;background-position:right -40px;border:none;}
	
	#nav_row li a:active {background-image:url(/wp-content/uploads/2011/06/tab-sprite.png); background-repeat:no-repeat;background-position:right -40px;border:none;}
	
	#nav ul.dropdown li.no-click > a:hover {cursor:default !important;}
	
	.main-nav li.current-page-ancestor a, .main-nav li.current_page_item a, .main-nav li.current-page-ancestor ul a, .main-nav li.current_page_item ul a, .sf-menu li li, .sf-menu li li, .sf-menu li li li {
	    background: none repeat scroll 0 0 transparent;
	}
	
	.main_nav .main-nav li a:hover,  #grandchildnav .current_page_item a, #grandchildnav li a:hover, #grandchildnav .current_page_item  ul li a:hover, .sf-menu li:hover, .sf-menu li.sfHover {
	background-color: #b2a586;
	}
	
	#primary-nav .main-nav li a {color:#d7c574;}
	#primary-nav .main-nav li a:hover {color:#FFFFFF;}
	
	#primary-nav ul.sub-menu {width:250px;}
	#primary-nav ul.sub-menu li {position:relative;top:7px;left: 0;}
	#primary-nav ul.sub-menu li a{background:#bfa76d;color:#FFFFFF;}
	#primary-nav ul.sub-menu li a:hover {background:#a4812e;color:#FFFFFF;}
	#primary-nav ul.sub-menu li li{position:relative;}
	
	.main_nav ul.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {background-image:url(/wp-content/uploads/2011/06/tab-sprite.png); background-repeat:no-repeat;background-position:right 0;border:none;}
	
	a > span.sf-sub-indicator {
	    background-position: 0 -99px;
	    top: 0.8em;
	}

here is the sprite: