How to highlight the selected navigation link?

  • tanveer_2030

    (@tanveer_2030)


    14 years, 4 months ago

    Hi,

    I am working on wordpress template and I need to ask one questions.

    My template navigation display pages names created from Admin section of WordPress. The pages names are like :

    Home
    About US
    FAQ
    Contact US
    Privacy Policy

    Now I need to ask that if user clicks on “ABOUT US” link then I want that my template will change the link color or appearance of “ABOUT US”. So that user will know that currently he is in “About US” page.

    Kindly tell me the procedure for that.

    Thanks
    Tanveer

Viewing 3 replies - 1 through 3 (of 3 total)
  • Avrohomd

    (@avrohomd)

    14 years, 4 months ago

    Probably you should list your website when asking a question.

    For my theme, if I enter the theme editor from the dashboard, and then select stylesheet from the right panel. I have the following:

    a {
	color:#FFFFFF;
     }
a:link {
color:#D0D0D0;
text-decoration:none;
     }
a:visited {
color:#D0D0D0;
text-decoration:none;
     }
a:link:focus{
color:#FFFFFF;
     }
a:link:hover,
a:visited:hover {
color:#FF0000;
    }
a:link:active,
a:visited:active {
     }

    If you have something like this, you could add:
    color:#D0D0D0;
    before the last } of the ‘active’ section.

    and choose a desired color.

    [signature moderated Please read the Forum Rules]

    Stian Andreassen

    (@stiand)

    14 years, 4 months ago

    If you’re using wp_list_pages() to list your navigation links, it adds the class .current_page_item and .current_page_parent to the selected Page. Simply add the style you want as active in you stylesheet.

    If you’re listing them manually (i.e. hardcoded), you can add a class yourself. If your links look like this:

    <a href="/about-us/">About us</a>

    modify them like this:

    <a href="/about-us/"<?php if(is_page('about-us')) echo ' class="active"; ?>>About us</a>

    and add the .active class to your stylesheet.

    jbiddulph

    (@jbiddulph)

    13 years, 6 months ago

    I just tried this and I can’t get it to work?!
    I can see it says current_page_item

    here is my CSS:

    #content ul li a .current_page_item { color:#727272!important; }

    here is my blog

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to highlight the selected navigation link?’ is closed to new replies.