• Hey! So I have a navigation bar and I want the active link to change colour when the user is browsing that page. So far I can only get the links to change colour when I hover over them and as I click them. What code do I need to include in my css to highlight the current page?

    Any help would greatly be appreciated, thanks. 🙂

    #access a:hover {
        color:#fff;
     }
    #access a:active {
        color:#fff;
     }
    <div id="access">
    			<a href="http://www.buttoncombo.com/">Home</a>
    			<a href="http://www.buttoncombo.com/?cat=5">360</a>
     			<a href="http://www.buttoncombo.com/?cat=18"> PS3</a>
     			<a href="http://www.buttoncombo.com/?cat=36"> Wii</a>
    			<a href="http://www.buttoncombo.com/?cat=87"> 3DS</a>
    			<a href="http://www.buttoncombo.com/?cat=69"> PSP</a>
    			<a href="http://www.buttoncombo.com/?cat=39"> PC</a>
    
    	</div>
Viewing 4 replies - 1 through 4 (of 4 total)
  • Check for the class name for the active page and set the css accordingly.

    @nintendostar: Use wp_list_pages, wp_page_menu or wp_nav_menu to create your nav links rather than hard coding them. Then you will have access to additional classes such as current-page.

    Thread Starter nintendostar

    (@nintendostar)

    Esmi – Please could you go a little more in-depth? I don’t have much experience coding around wordpress. What piece of code would I need to highlight the current page? Just the current-page class? Is there anywhere you can link me to so I can learn about these?

    I’m really thankful for you helping, so thanks for taking the time out I appreciate it.

    No – you need to replace your hard-coded menu with wp_list_pages, wp_page_menu or wp_nav_menu.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Highlighting an active page’ is closed to new replies.