Jump to content

Archived

This topic is now archived and is closed to further replies.

mikeeg8

Nav text hover & active link colours

Recommended Posts

mikeeg8

Hi there guys,

 

I've been changing the colors on the nav - and it looks good.

 

I can't seem to change the hover and active states though.

 

Here is the URL:

 

http://www.greenlandcreative.co.u/pete

 

I'd like to:

 

1. Remove the squares that come up behind the text on hover

2. Change the active link color to red

 

Can you give me some pointers please? I've tried 'inspect element' but can't see where to locate the styling for these nav text states.

 

Thank you in advance

 

M

 

 

Share this post


Link to post
Share on other sites
Danny

Hi,

 

Try adding the following to your custom CSS:

 

#site .section-navi .pl-nav > li.current-menu-item > a,
#site .section-navi .pl-nav > li:hover > a {
  background: transparent;
}
#site .section-navi .pl-nav > li.current-menu-item > a {
  color: red;
}
 
In Chrome dev tools there is a button where you can determine specific states such as active, hover etc... this will greatly help you in the future when you wish to change the styling of a specific state. I think the best course of action would be for you to do the free interactive tutorial from Code School, its quite awesome.
 

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
mikeeg8

Thanks Danny, that's super dooper !!

 

Share this post


Link to post
Share on other sites
Danny

No problem at all.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • gregory.guz
      By gregory.guz+
      Hi ,
      I just noticed that the color picker has stopped showing up on my PL5 site ( please see attached image ) 
      Any idea what could be causing the problem?
       
      Thanks 
      Greg

    • Borries
      By Borries+
      I know this is not an easy problem. Maybe there is a easy solution.
      I have tryed to uses the existing solution, that I have found in the forum
      I changed the colours of my nav (simple nav) and the hover effect (a. hover).
      I really tryed to highlight the active/used link in the nav but I cant figure it out.
      I want it to be black when active.
      Any help would be appreciated. Thanks.
      http://www.marcborries.de  nav link: "Sinn & Selbst" 
    • greatthingsllc
      By greatthingsllc+
      In Platform 5, Using Framework Section for Content , I have set the hyperlink colors in the CUSTOMIZE section.   However, none of the pages are properly displaying the link colors.   Just defaulting to black, and underline on hover.   I did not see where this would be controlled at the page level or lower
      Site    doritbrauer.com
      Thanks
      Josh

    • Claudio
      By Claudio+
      I have a problem with the typography settings. I set the H1 class with "font-weight: 300;" (Very thin weight), and "font-size: 50px;" (To have considerable evidence of my problem). Unfortunately, as you can see on the screenshots, those setting don't have any incidence on the site, Infact in the home page editor there is a trial title called "Text test", bold, and 26 px approximatly sized.
      Why the typography settings are not transposed on the site? Where I wrong?


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