Jump to content
marklamberth

Please help change nav color/hover

Recommended Posts

marklamberth    0
marklamberth

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!!!

Share this post


Link to post
Share on other sites
James B    436
James B

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.com/store/plugins/simple-css-lite/


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
marklamberth    0
marklamberth

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?

Share this post


Link to post
Share on other sites
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
marklamberth    0
marklamberth

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

Share this post


Link to post
Share on other sites
James B    436
James B

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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
marklamberth    0
marklamberth

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.

Share this post


Link to post
Share on other sites
mackenzie    12
mackenzie

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


Mackenzie - PageLines Help Desk

The Centsible Family - Writer, Photographer and Coffee Addict

---------------------------------------------------

Kindly search this forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

Share this post


Link to post
Share on other sites
marklamberth    0
marklamberth

I am using Platform Pro, and version 1.5.3

Share this post


Link to post
Share on other sites
James B    436
James B

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;}



Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
marklamberth    0
marklamberth

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

Thank you all VERY MUCH for your help with this.

Mark

Share this post


Link to post
Share on other sites
James B    436
James B

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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
James B    436
James B

The topic was marked as resolved.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
stevelight82    0
stevelight82

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

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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.

  • Like 1

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
stevelight82    0
stevelight82

Thanks so much Danny!


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

 

Have a good day,

Cheers

Steve

Share this post


Link to post
Share on other sites
stevelight82    0
stevelight82

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

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


  • Similar Content

    • bnapoli
      By bnapoli+
      http://731.34b.myftpupload.com/ this website is using the NavPro navigation in Platform 5. It has a lot of menu items, so it breaks to two lines when the window is sized down. What is the media query to make the navigation either a) switch to "mobile mode" at a higher width, or b ) expand the nav into two lines. Thanks
    • pehja
      By pehja+
      It would be nice to have an option in the impuls section to only view hamburger menu.  That or let nav pro have that option ad also transparent background. Impuls is a great section. Love it.
    • catalinam
      By catalinam+
      Hi lovely Pagelines Forum Helpers!
      I am new to Pagelines as well as coding in general so sorry if this is stooopid. 
      I am reimaging my site www.theunimpossibles.com and I am trying to do a few seemingly simple things using paleness and modifying the lynette theme.
      How do I put a fine key line on the bottom of the dropdown nav? e.g. <hr style="height:1px;border-width:0;color:#e4e4e4;background-color:#e4e4e4”> I want a second nav in grey to site above it but I can't get the grey to go all the way to the top and full width. Is it possible to put social icons in the nav too? How can I make these two nav global but underneath the slider as per below only on the homepage? Is it possible to embed the royal slider onto the homepage? e.g putting the shortcode [new_royalslider id="4"] in the embed area generates the error: [RoyalSlider Error] Incorrect RoyalSlider ID or problem with query. Is it possible to make the slider, the instagram feed and the hero image on the blog posts full bleed? On the category page e.g http://theunimpossibles.com/category/recipes I would like to change "Posts  Currently viewing the category: "OM NOMS"" to be bigger, centred, and with more padding and only show the words "TOPIC: OM NOMS". Is it possible to remove the extract and put the date underneath similar to:  http://grittypretty.com/category/makeup/? Is it possible to make the post images on the blog posts wider and the text smaller? http://theunimpossibles.com/2015/06/30/amazingly-delicious-paleo-orange-blueberry-almond-meal-scones-with-earl-grey-cashew-cream/?pl_edit=on e.g the blog posts similar to http://grittypretty.com/makeup/the-top-6-office-beauty-must-haves/?  Obviously keeping everything responsive!
      I have been trying to Google all of this but alas I am very very stuck and would appreciate any help!
      Kindest,
      Catalina
       
    • richardjacruz
      By richardjacruz+
      I'm building a site at:
      http://dev.stevensoncraneservice.com/
      and I followed the instructions on building a "branding" area in the header:
      http://docs.pagelines.com/tutorials/creating-a-branding-area
      But, if you see the image I've attached, you'll see that there's a lot of space between the nav and the slider. Is this something I need to control with CSS in the Custom code section, or is there something else I can do that's part of the header section?

      Actually, what would also be nice is if I could put a divider line there... like an orange or a light gray.
      Thanks.
    • richardjacruz
      By richardjacruz+
      I saw this website build with PageLines DMS:
      http://lupusla.org/
      I want to have a header that's VERY similar. However, with the fixed area, I'm struggling with how to do that. 
      I want to have a "super menu" under one of the tabs, and drop downs for others, a larger logo to the left like this, a search all the way to the right, and a call-to-action at the top like we see with "Donate" (I want "Request a Quote").
      What area (fixed or header) is best to use for this, and, within that area, what are the best sections to place?
      Thanks. 
×