Jump to content

Need Help with Navigation Hover Effect

Recommended Posts


Hello All! First, a quick disclaimer: I do not know how to write CSS and have only a basic knowledge of HTML. However, I've become pretty well-versed in creating a website using CMS and am comfortable with the PageLines framework. Now that that's out of the way, here's the link to my website (still under construction) www.dcdips.com. I want to make it so that when you mouseover the main nav menu at the top that the text will be white and the box around it will be red. I went to the design control tab and changed the colors on everything listed and it is not creating that effect. I have the "Custom CSS" plugin activated, but I don't know what to put in there. Can someone tell me how to do this or what to put on the CSS page? Thank You!

Share this post

Link to post
Share on other sites

Hi doziercreative

It is advisable to learn how to do this on your own too.

Check out http://www.pagelines.com/wiki/Custom_CSS

If you need more CSS help, make sure you've downloaded Firebug for Firefox

and check out W3 Schools for more info.


Life is too short to remove USB safely ...

Share this post

Link to post
Share on other sites

Okay, bookmark this link because you're going to learn to truly love it. http://www.colorpicker.com/

With that site you can pick a color you like. In the top, you'll see # with an alpha/numeric six digit code. For example #FFFFFF is white and #000000 is black.

In the various parts of the Simple CSS Lite plugin, you simply copy the code and insert the # first. So, if you wanted a deep red background color for menu items, you'd add #C00000 and thinking in terms of contrast, you'd probably want a white link. Since you might like to mouseover, it should still be light, so try a pale yellow, again, finding the right shades and colors you prefer using the colorpicker website.

Former PageLines Moderator, Food Expert and Raconteur

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

    • Liv Kundalini
      By Liv Kundalini+
      Hi -
      Pulling my hair out over here, and would love an assist!
      Site I am building, http://www.livkundalini.com/home, has a problem with the submenu items in the nav not appearing. 
      If anyone wants to see what the Nav should look like, feel free to look in the footer on the left hand side.
      Have tried disabling Pagelines and using the twentyseventeen theme, but problem persists.
      Saw this error (pasted at the bottom of this post) displaying in the inspector, and saw discussion of Jetpack potentially being a culprit. Disabled Jetpack, but the problem persists.
      Had the hosting company even flush the server-side cache, but no avail.
      Any thoughts? Please? It's the only thing keeping me from launching this site!
      Many Thanks,
      WebSocket connection to 'wss://public-api.wordpress.com/pinghub/wpcom/me/newest-note-data' failed: Error during WebSocket handshake: Unexpected response code: 403   O @ (index):7
    • 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?

    • 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

    • 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