Jump to content


Photo

navigation buttons - customised


  • Please log in to reply
24 replies to this topic

#21 cocogreen

cocogreen

    Advanced Member

  • Members
  • PipPipPip
  • 42 posts

Posted 08 April 2012 - 11:49 PM

Hi Danny,

Please see the screenshot i would like to achieve Posted Image

thanks

Tom

#22 Danny

Danny

    Is Awesome!

  • Moderators
  • 13021 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 09 April 2012 - 10:18 AM

Hi Tom, Can you tell me where you have added this custom CSS. Also, can you back up this custom CSS to a text file and then remove it from your theme. This custom CSS, is making it difficult to assist you.

#23 cocogreen

cocogreen

    Advanced Member

  • Members
  • PipPipPip
  • 42 posts

Posted 09 April 2012 - 02:44 PM

Hi Danny I am putting it into the Custom Code within the Eco Pro Pagelines section of wordpress. I have backed up the custom CSS and removed it as requested. Hope that helps

#24 Jenny

Jenny

    Owned by PageLines

  • Unicorn Store Dev

  • 2917 posts
  • LocationWV
  • Country: Country Flag

Posted 09 April 2012 - 03:06 PM

Hi @cocogreen.

This should get you started. It has the basic effects that you're looking for. You will just need to add things as you want them to appear and change the colors.

 /** MENU ITEMS **/
	#nav li a {
	    background: none repeat scroll 0 0 green;
	    color: white;
	}
	
	/** MENU ITEMS ON HOVER **/
	#nav li a:hover, #nav ul.dropdown a:hover, #nav ul.dropdown li.menuhover > a {
	    background: none repeat scroll 0 0 orange !important;
	    color: white;
	}
	
	/** DROP DOWN MENU ITEMS **/
	#nav ul.dropdown ul li a {
	    background: none repeat scroll 0 0 green !important;
	    color: white;
	}

For active items, you can try to use:

 #nav .current_page_item a, #nav .current_page_item a:hover, #nav .current_page_ancestor a, #nav .current_page_parent a, #nav ul li a:active

Active menus are tricky so you'll have to play around with it.

With that said, you need to remember that we can't design your site for you so if you need CSS help, make sure you've downloaded Firebug for Firefox and check out W3 Schools for more info. Also please be sure to watch our Firebug video tutorial here.

You may also wish to consider requesting a quote from one of our authorized Professional designers by visiting our Pros page.