13 replies [Last post]
Jim123
Jim123's picture
Offline
Regular
Last seen: 8 years 51 weeks ago
Timezone: GMT+7
Joined: 2010-01-27
Posts: 11
Points: 14

The current page in the menu doesn't remain highlighted after clicking on it. Links work and hovering changes the color of the link which I want. I am using Wordpress.

This is the code in the header.php

<div id="topmenu2">
		<ul>
        <!-- To show "current" on the home page -->
        <li<?php 
                if (is_home()) 
                {
                echo " id=\"current\"";
                }?>>
                <a href="<?php bloginfo('url') ?>">Home</a>
        </li>
			<li><a href="2010/01/test-2/">page2</a></li>		
			<li><a href="2010/01/test-2/">page3</a></li>
            <li><a href="2010/01/test-2/">page4</a></li>
            <li><a href="2010/01/test-2/">page5</a></li>
        </ul>
	</div>

This is the code in the style.css

#topmenu2{
	margin: 0px;
	padding: 0px;
	text-align:left;
	background:#FF0000;
	}
 
#topmenu2 ul {
	float: left;
	list-style: none;
	margin: 0px;
	padding: 0px;
	}
 
#topmenu2 li {
	float: left;
	list-style: none;
	border-top:dotted #C9C9CB 1px;
	margin: 0px;
	padding: 0px;
	}
 
#topmenu2 ul li a {
	font-weight:bold;
	font-size:14px;
	color:#0078C1;
	display: block;
	margin: 0px;
	padding: 6px 20px 9px 0px;
	outline:none;
	}
 
#topmenu2 li a:hover, #topmenu2 li a:active {
	color:#F5821F;
	}
 
#current
{
color: #F5821F;
}

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 13 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

The code is only going to

The code is only going to show you the current id on the home page... maybe...

You're going to need to add a <?php if(is_page('12')){echo ' id="current";} ?> on every single LI.
That, or let WordPress build your menu for you and it will give you a class to use for the current page called "current_page_item" i believe.

http://codex.wordpress.org/Template_Tags/wp_list_pages

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

tmharsh
Offline
Regular
Owosso, MI
Last seen: 9 years 33 weeks ago
Owosso, MI
Timezone: GMT-5
Joined: 2009-06-22
Posts: 27
Points: 26

This may be what you're

This may be what you're after... http://codex.wordpress.org/Dynamic_Menu_Highlighting

Jim123
Jim123's picture
Offline
Regular
Last seen: 8 years 51 weeks ago
Timezone: GMT+7
Joined: 2010-01-27
Posts: 11
Points: 14

Thanks tmharsh, for the

Thanks tmharsh, for the reply. Actually I used this exact page and left me with the above question... If I do what they say, the background shows up in the menu (which means this explanation works) but when I want to use it for a different font color instead of background it doesn't work. Must be a parent-child thing I guess but I don't know how to solve it.

@Deuce I am going to try it today.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 13 hours 10 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Actually it's to do with

Actually it's to do with specificity.
#topmenu2 li is more specific then #current
Change it to #topmenu2 #current and it should work for you.

Jim123
Jim123's picture
Offline
Regular
Last seen: 8 years 51 weeks ago
Timezone: GMT+7
Joined: 2010-01-27
Posts: 11
Points: 14

Thanks for the reply Tony,

Thanks for the reply Tony, but it still doesn't work...

#topmenu2 ul li a {
color:#0078C1;

overrides
#current {
color:#F5821F;

Jim123
Jim123's picture
Offline
Regular
Last seen: 8 years 51 weeks ago
Timezone: GMT+7
Joined: 2010-01-27
Posts: 11
Points: 14

@ Deuce, doesn't work

@ Deuce, doesn't work either...

Same reason as above

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 13 hours 10 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Try #topmenu2 #current ul li

Try

#topmenu2 #current ul li a{
color:#F5821F;
}

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 13 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

If all else fails, please

If all else fails, please show us a live page.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Jim123
Jim123's picture
Offline
Regular
Last seen: 8 years 51 weeks ago
Timezone: GMT+7
Joined: 2010-01-27
Posts: 11
Points: 14

Really annoying, spend

Really annoying, spend already a full day on it...
How can I override the

#topmenu2 ul li a {
color:#0078C1;

When I put this

#topmenu2 #current ul li a{
color:#F5821F;
}
I get this
1.gif

With

#current {
color:#F5821F;
I get this
2.gif

Jim123
Jim123's picture
Offline
Regular
Last seen: 8 years 51 weeks ago
Timezone: GMT+7
Joined: 2010-01-27
Posts: 11
Points: 14

Going to re-write the css

Takes to long to find the answer. Thanks for the input, guys!

I'll let you know how I went.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

but it couldn't be this

Puzzled but it couldn't be this !!

#topmenu2 #current ul li a{
color:#F5821F;
}

#current is an id placed on the LI element you are saying that the LI element must have a parent LI element. Simply do as has been shown by Tony or for evem more specificity do:

#topmenu2  ul li#current a {
color:#F5821F;
}

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Jim123
Jim123's picture
Offline
Regular
Last seen: 8 years 51 weeks ago
Timezone: GMT+7
Joined: 2010-01-27
Posts: 11
Points: 14

I am going to figure out

I am going to figure out first if it has anything to do with the structure of my website. The css is in the header.php and doesn't reload while using the menu. The content does. Maybe this effects the use of css...

Thanks for the help

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 13 hours 10 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Jim if you linked to a live

Jim if you linked to a live page as Deuce mentioned we would be able to see what is wrong.
Make sure it's not the visited color overriding current.