WordPress.org

Ready to get started?Download WordPress

Forums

Hover Navigation --> Underlined/Differenct Color Active Page? (8 posts)

  1. pokepsw
    Member
    Posted 5 years ago #

    I have a normal navigation setup as follows:

    <div id="menu">
    	<div class="widthlimiter">
    		<ul id="suckerfishnav">
    			<?php wp_list_pages('title_li=')?>
    		</ul>
    	</div>
    </div>

    CSS for that as follows:

    #suckerfish {background:#63A9D5;font-size:18px;font-family:helvetica,sans-serif;font-weight:bold}
    #suckerfishnav, #suckerfishnav ul {font-weight:bold;float:left;list-style:none;line-height:2em;padding:0;border:0px solid #aaa;margin:0 0 0 0;width:100%}
    #suckerfishnav a {display:block;color:#202225;text-decoration:none;padding:0px 10px}
    #suckerfishnav li {float:left;padding:0}
    #suckerfishnav li ul {position:absolute;left:-999em;height:auto;width:150px;font-weight:normal;margin:0;line-height:1}
    #suckerfishnav li li {padding-right:1px;width:150px;border-left:1px solid #aaa;border-right:1px solid #aaa;border-bottom:1px solid #aaa}
    #suckerfishnav li li a {padding:4px 10px;width:150px}
    #suckerfishnav li ul li {font-weight:normal; font-family:helvetica,sans-serif}
    #suckerfishnav li ul li a {font-size:12px; color:#202225}
    #suckerfishnav li:hover ul li a {color:#202225}
    #suckerfishnav li ul ul {margin:-20px 0 0 150px}
    #suckerfishnav li ul li:hover {background:#63A9D5}
    #suckerfishnav li ul li:hover a {color:#202225}
    #suckerfishnav li ul li:hover li a {color:#202225}
    #suckerfishnav li ul li li:hover a {color:#202225}
    #suckerfishnav li ul li ul li:hover ul li a {color:#202225}
    #suckerfishnav li ul li ul li:hover ul li:hover a {color:#202225}
    #suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul {left:-999em}
    #suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul {left:auto;background:#fff}
    #suckerfishnav li:hover, #suckerfishnav li.sfhover {background:#fff}
    #suckerfishnav li:hover a, #suckerfishnav li.sfhover a {color:#202225}

    Imagine I have 2 pages, About and Contact. When I hover over either page, I get a hover effect (background becomes white). What I am trying to do is have that effect stay when clicked so when you click on About and the page loads, the 'About' on the Nav Menu stays highlighted. Thanks!

  2. esmi
    Forum Moderator
    Posted 5 years ago #

    Try:

    #suckerfish .current_page_item {background:#fff}

  3. pokepsw
    Member
    Posted 5 years ago #

    Thanks, but that didn't work.

  4. esmi
    Forum Moderator
    Posted 5 years ago #

    Chances are that you have something further down the CSS that is over-writing the suckerfish id but without seeing your site, it's hard to say.

  5. pokepsw
    Member
    Posted 5 years ago #

    This is the entire CSS

    body {margin:0;padding:0}
    #header {background:#202225;width:100%;height:80px}
    #header .widthlimiter div {float:right;color:#63A9D5;font:italic bold 1em/80px sans-serif;}
    #search {display:inline}
    #description {display:inline;margin-right:1em}
    .widthlimiter {min-width:600px;max-width:1000px;width:90%;margin:0 auto}
    #menu {width:100%;background:#63A9D5;height:2em}
    
    /* NAVIGATION BAR - for an easy way to restyle this, visit ... http://ryanhellyer.net/dropdowns/ */
    #suckerfish {background:#63A9D5;font-size:18px;font-family:helvetica,sans-serif;font-weight:bold}
    #suckerfishnav, #suckerfishnav ul {font-weight:bold;float:left;list-style:none;line-height:2em;padding:0;border:0px solid #aaa;margin:0 0 0 0;width:100%}
    #suckerfishnav a {display:block;color:#202225;text-decoration:none;padding:0px 10px}
    #suckerfishnav li {float:left;padding:0}
    #suckerfishnav li ul {position:absolute;left:-999em;height:auto;width:150px;font-weight:normal;margin:0;line-height:1}
    #suckerfishnav li li {padding-right:1px;width:150px;border-left:1px solid #aaa;border-right:1px solid #aaa;border-bottom:1px solid #aaa}
    #suckerfishnav li li a {padding:4px 10px;width:150px}
    #suckerfishnav li ul li {font-weight:normal; font-family:helvetica,sans-serif}
    #suckerfishnav li ul li a {font-size:12px; color:#202225}
    #suckerfishnav li:hover ul li a {color:#202225}
    #suckerfishnav li ul ul {margin:-20px 0 0 150px}
    #suckerfishnav li ul li:hover {background:#63A9D5}
    #suckerfishnav li ul li:hover a {color:#202225}
    #suckerfishnav li ul li:hover li a {color:#202225}
    #suckerfishnav li ul li li:hover a {color:#202225}
    #suckerfishnav li ul li ul li:hover ul li a {color:#202225}
    #suckerfishnav li ul li ul li:hover ul li:hover a {color:#202225}
    #suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul {left:-999em}
    #suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul {left:auto;background:#fff}
    #suckerfishnav li:hover, #suckerfishnav li.sfhover {background:#fff}
    #suckerfishnav li:hover a, #suckerfishnav li.sfhover a {color:#202225}
    #suckerfish .current_page_item {background:#fff}
    
    /* MAIN CONTENT STYLING */
    #content {}
    h1,h2,h3,h4,h5 {color:#63A9D5}
    h1 a,h2 a,h3 a,h4 a,h5 a {color:#63A9D5;text-decoration:none}
    h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover {text-decoration:underline}
    h1 {margin:0;padding:0;font:normal bold 3em/80px sans-serif}
    h2 {font:normal bold 2em sans-serif;margin:0.5em 0}
    h3 {font:normal bold 1.6em sans-serif;margin:0.4em 0}
    h4 {font:normal bold 1.3em sans-serif;margin:0.3em 0}
    h5 {font:normal bold 1.2em sans-serif;margin:0.2em 0}
    
    p {font:normal 0.8em sans-serif;color:#202225}
    p a {color:#63A9D5;text-decoration:none}
    p a:hover {text-decoration:underline}
    
    ul li, ol li {font-family:sans-serif;color:#202225}
    
    /* FOOTER STYLING */
    #footer {background:#202225;width:100%;height:2em}
    #footer p {font-size:0.8em;line-height:2em;color:#fff}
    #footer a {color:#63A9D5;text-decoration:none}
    #footer a:hover {text-decoration:underline}
  6. pokepsw
    Member
    Posted 5 years ago #

    Any ideas?

  7. esmi
    Forum Moderator
    Posted 5 years ago #

    Move the suckerfish block down the the bottom.

  8. pokepsw
    Member
    Posted 5 years ago #

    Esmi, what do you mean move the block down? Move the actual CSS to the bottom of the CSS doc?

Topic Closed

This topic has been closed to new replies.

About this Topic