Jump to content


Photo
- - - - -

Two tone nav menus


  • Please log in to reply
4 replies to this topic

#1 mcarels

mcarels

    Advanced Member

  • Members
  • PipPipPip
  • 69 posts

Posted 07 May 2011 - 04:56 AM

Is it possible to make this red two tone Nav bar on this site?:

Please Login or Register to see this Hidden Content

If so, how? Here is my current site I'd like it on:

Please Login or Register to see this Hidden Content



#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 07 May 2011 - 04:28 PM

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?

#3 studio8c

studio8c

    Advanced Member

  • Members
  • 96 posts
  • Country: Country Flag

Posted 07 May 2011 - 06:12 PM

HI Michael,

Try this you still have to tweak around with it but its a start.

Cheers Dennis

Please Login or Register to see this Hidden Content



#4 mcarels

mcarels

    Advanced Member

  • Members
  • PipPipPip
  • 69 posts

Posted 11 May 2011 - 10:38 PM

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:

Please Login or Register to see this Hidden Content



#5 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 12 May 2011 - 02:07 AM

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

Please Login or Register to see this Hidden Content


Change xxxxxx to the color you want for the text link color.

Add this line to the

Please Login or Register to see this Hidden Content

code:

Please Login or Register to see this Hidden Content


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