Jump to content
Sign in to follow this  
mcarels

Two tone nav menus

Recommended Posts

catrina    103
catrina

First you'll need a two-tone image that stretches to the width of the navigation bar on your current site. That image could be implemented in the CSS to show behind the navigation links. Are you comfortable with using an image editing program to create the image?


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
studio8c    3
studio8c

HI Michael, Try this you still have to tweak around with it but its a start. Cheers Dennis

	.main_nav {
	line-height: 1.1em;
	text-align: left;
	margin-top: 0px;
	z-index: 28;
	position: relative;
	background: url(http://burnaby.mrrooter.ca/sites/mr.rooter/images/main-nav.png) no-repeat;
	width: 100%;
	height: 35px;
	}
	
	.sf-menu li, #primary-nav ul.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active, .commentlist ul.children .even, .alt #commentform textarea {background-color: transparent;}
	
	#primary-nav li a{color: white;}
	

Share this post


Link to post
Share on other sites
mcarels    0
mcarels

Thanks Dennis that code did a great job. But I couldn't find out how to make the Active page have the same colors. Also is there a way to make the headings go underlined when hovering, and no the standard change colors on hovering? Here's the updates: http://mrrooter.carellistudios.com

Share this post


Link to post
Share on other sites
catrina    103
catrina

To add the same style to the active pages, add this code:

ul.main-nav li.current_page_item a {color: #xxxxxx; background-color: transparent;}
Change xxxxxx to the color you want for the text link color. Add this line to the
.main_nav
code:
#primary-nav li a:hover {border-bottom: 1px solid #xxxxxx;}

Replace xxxxxx with the color you want for the bottom line that appears on hover.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×