• 0
Sign in to follow this  
Followers 0

Two tone nav menus

Question

4 answers to this question

  • 0

Posted · Report post

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?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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.

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  
Followers 0