Jump to content


Photo
Resolved

Please help change nav color/hover

nav

Best Answer Danny , 19 February 2013 - 11:44 AM

Hi Steve,

 

In order to change the color of text and hovers, you will need to inspect the menu using Firebug or your browsers built-in web dev tools. 

 

You can using this which should help you get started.

 

#page .main_nav ul li { }  <=== Use this to add a background color

#page .main_nav ul li a { }  <=== Use this to change the color of the text.

Go to the full post


  • Please log in to reply
18 replies to this topic

#1 marklamberth

marklamberth

    Member

  • Members
  • PipPip
  • 28 posts

Posted 12 October 2012 - 08:25 PM

Hey there, I posted a similar question a few days ago, and was directed to learn more about CSS from w3schools. I spent a lot of time over there and learned a lot, but still wasn't able to quite understand the information I need to be able to augment CSS myself. I am confident I will be able to learn it, but I really need to make this site live.


Can you please help me with the CSS I need to make the nav on this site:

LearnEnglishU.com ...

... look like the nav on this site:

LetsDoEnglish.com

I promise to continue to learn so I don't gum up the forum with basic questions.

(my developer worked on the LetsDoEnglish site. He is no longer available to work on this, or I would just have him do it.)

Thanks again!!!

#2 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 12 October 2012 - 09:02 PM

Hi there,

the easiest way to do this would be to download our free Css lite plugin as you're using the simple nav. This will allow you set the navigation colors using a menu on the site options tab. Here's the link http://www.pagelines...imple-css-lite/

#3 marklamberth

marklamberth

    Member

  • Members
  • PipPip
  • 28 posts

Posted 12 October 2012 - 09:06 PM

I already tried that yesterday. I installed the plug-in, but can't find the place to configure it anywhere on the back end of Pagelines/Wordpress admin. I looked up directions, but couldn't seem to find the configuration back end.

Where is it please?

#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 12 October 2012 - 10:24 PM

Try this to start:
 
.main_nav ul li {
    background: none repeat scroll 0 0 #E3E3E3;
    float: left;
    font-family: "Lucida Grande","Lucida Sans","Lucida Sans Unicode",sans-serif;
    font-size: 1.3em;
    font-weight: bold;
    margin: 0;
    padding: 0;
    text-align: right;
    text-transform: uppercase;
}

.main_nav {


	line-height: 0.3em;
	text-align: left;
}

.main_nav ul li:hover a, .main_nav ul a:focus, .main_nav ul a:active {


	background-color: #FFD400;
	color: #000000;
}

I am not sure how it will look as I cobbled it together from several sources.

#5 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 12 October 2012 - 10:38 PM

Simple CSS Lite would be the ideal scenario and really needs little instruction. Just select the colors you want. Hover means... when you mouse over it. Active is the page you're on. The rest should be self-explanatory.

Just add color codes like #C00000. You can get color codes from www.colorpicker.com.

#6 marklamberth

marklamberth

    Member

  • Members
  • PipPip
  • 28 posts

Posted 13 October 2012 - 12:18 AM

Thank you Rob. My problem is that I simply can't find the place to configure the CSS Lite plug-in. The plug-in page says - "The Simple CSS options are located at WordPress -> PageLines -> Settings.

Where can I find Wordpress>Pagelines> settings?

Sorry if this is a silly question. I just can't find it.

Thanks

#7 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 13 October 2012 - 12:48 AM

Go to Pagelines>Site Options, the Simple Css Lite tab will appear at the bottom of the list under the custom code box.

#8 marklamberth

marklamberth

    Member

  • Members
  • PipPip
  • 28 posts

Posted 13 October 2012 - 12:56 AM

Hi James, there is no Pagelines>site options.

There is Platform Pro tab, but I don't see "site options"

And, at the bottom of the Platform Pro tab settings, I do see Custom Code but there is nothing under that. I'll be happy to send you a screenshot.

I have properly uploaded the plug-in, and activated/deactivated it several times. I don't see it's configuration area anywhere on the back end of the site.

#9 mackenzie

mackenzie

    Advocate

  • Members
  • 333 posts
  • Country: Country Flag

Posted 13 October 2012 - 01:15 AM

I think James thought you were using Pagelines Framework versus Platform Pro. Please confirm which version and the # update you are using?

#10 marklamberth

marklamberth

    Member

  • Members
  • PipPip
  • 28 posts

Posted 13 October 2012 - 01:19 AM

I am using Platform Pro, and version 1.5.3

#11 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 13 October 2012 - 02:16 AM

Ah i see. I'm sorry i thought you were using the Framework. In that case I'm afraid you'll have to use the Css provided below by pasting it into the custom code box. The CSS lite plugin only works with the PL Framework.

Change the hex values to the color of your choice.

 
This code changes the Nav BG color

.main_nav ul li {
background: #000000;}

This will change the active color and font

.main_nav ul li:hover a, {
background-color: #FFD400;
color: #000000;
}

This will change the hover color and font

.main_nav ul a:active {
background-color: #FFD400;
color: #000000;}



#12 marklamberth

marklamberth

    Member

  • Members
  • PipPip
  • 28 posts

Posted 13 October 2012 - 03:22 AM

Okay, I'll use the CSS you sent over.

Thank you all VERY MUCH for your help with this.

Mark

#13 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 13 October 2012 - 03:31 AM

You're welcome Mark, I'll close this thread for you :-)

#14 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 13 October 2012 - 03:31 AM

The topic was marked as resolved.

#15 stevelight82

stevelight82

    Newbie

  • Members
  • 9 posts
  • Country: Country Flag

Posted 19 February 2013 - 11:15 AM

Hi guys,
Thanks for this. 

 

I have noticed that when using custom css with the code you gave before, you can only change the nav bg color. Anything else stays the same color. see http://stevelight.org/kambirdee/

 

I want to change the text and rollover colors but they do not change.


Please advise.

Thanks

Steve



#16 Danny

Danny

    Is Awesome!

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

Posted 19 February 2013 - 11:44 AM   Best Answer

Hi Steve,

 

In order to change the color of text and hovers, you will need to inspect the menu using Firebug or your browsers built-in web dev tools. 

 

You can using this which should help you get started.

 

#page .main_nav ul li { }  <=== Use this to add a background color

#page .main_nav ul li a { }  <=== Use this to change the color of the text.


  • stevelight82 likes this

#17 stevelight82

stevelight82

    Newbie

  • Members
  • 9 posts
  • Country: Country Flag

Posted 19 February 2013 - 01:13 PM

Thanks so much Danny!


I did use firebug, but couldn't find it. :-/

 

Have a good day,

Cheers

Steve



#18 stevelight82

stevelight82

    Newbie

  • Members
  • 9 posts
  • Country: Country Flag

Posted 19 February 2013 - 01:19 PM

Sorry dude, One more think, how do I change the colour of the current page selected in the nav? 

 

http://stevelight.org/kambirdee/

 

Tried this but no joy...

 

 

#page .main_nav .currentLink {
   color: #ffffff;
   background-color: #003366;
}
 
Thanks
Steve


#19 Danny

Danny

    Is Awesome!

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

Posted 19 February 2013 - 01:27 PM

Hi Steve,

 

You will need to use the menu classes that Wordpress provides.

 

http://codex.wordpre...tem_CSS_Classes

 

Which should look something like this:

 

 

#page .main-nav li.current_page_item a { }






Also tagged with one or more of these keywords: Resolved, nav