Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Khemraj Thapa
8,885 Pointsadding active class to the menu, help please...
Can anyone help me with this please as I am following the theme development on the wordpress. Everything is alright so far but the active class doesn't seems to work on the menu bar but when I hover over it, its seems to be working. Anyone?? Thanks
9 Answers
Zac Gordon
Treehouse Guest TeacherThat's actually correct and what we're looking for. The best way to approach this is to use WordPress's default CSS classes that it generates
We simplified our menu a lot for this project and didn't get into this in depth, but this is what you should work off of.
Sorry for the confusion!
PS - GREAT reskinning of the project site!
Gautam Thapar
5,265 PointsMake sure active comes after hover style otherwise it won't be effective.
Khemraj Thapa
8,885 Pointsdidnt knew about that, anyway i tried it but it didnt work out..
Zac Gordon
Treehouse Guest TeacherIn the source code, does the class show up in the right place? If so then it is likely a weird CSS hover behavior.
Khemraj Thapa
8,885 PointsHi Zac, I couldn't see the active class in the source code. I am following your tutorials and implementing it on my own website. The css which I have used for the menu nav are
#topnav ul a:active, #topnav ul a:hover{background:red; }
Its just the example, how I have used but, only the hover style seems to work but not the active one. I have googled it and found out the wordpress add .current-menu-item on the active menu items, may be thats the reason for active class not working? Is there any solution for it?? I hope I am not confusing you. Thanks
Zac Gordon
Treehouse Guest TeacherHey Khemraj Thapa no worries! We'll work this out :)
Let me know what stage you're working on so I can pull up the right project files to compare with yours.
Khemraj Thapa
8,885 PointsHi Zac Gordon I am at the last stage and now waiting for launching it. Everything is working fine except the active class. Do you have any advice for making this work? Thanks
Zac Gordon
Treehouse Guest TeacherAnd you're not noticing any difference in the source code between what is in the project files?
Khemraj Thapa
8,885 PointsHi Zac Gordon I have just managed to upload the website online, do u mind checking it and see if u can figure it out. The link for the website is http://iamkhem.com. Thanks
Zac Gordon
Treehouse Guest TeacherHmmm, can you post up your header.php file? I think we're gonna try doing a little markup modification.
Use a
Before your code and then after
To have it show up well in the forums :)
Zac Gordon
Treehouse Guest TeacherSorry "```" before and after
Khemraj Thapa
8,885 PointsHi Zac, as you said, I have posted my header.php..
<!DOCTYPE html>
<html>
<head>
<title>
<?php
wp_title( '-', true, 'right');
bloginfo('name');
?>
</title>
<meta name="viewport" content="width=device-width">
<?php wp_head(); ?>
</head>
<body>
<div class="header-container">
<header class="wrapper clearfix">
<header id="topnav">
<a href="/"><div class="icon-logo logo"></div></a>
<a href="#" id="navbtn"><span>menu</span></a>
<nav>
<ul>
<?php
$args = array(
'menu' => 'main-menu',
'echo' => false
);
echo strip_tags(wp_nav_menu( $args ), '<a>');
?>
</ul>
</nav>
</header>
</header>
</div>
"
Zac Gordon
Treehouse Guest TeacherTry this and see if it works
<?php
$args = array(
'menu' => 'main-menu'
);
?>
Khemraj Thapa
8,885 PointsHi Zac, that didnt workout either. When I checked in chrome inspector, it should that wordpress added some more of its classes to the menu, making it more complicated.
Gautam Thapar
5,265 PointsIt works!
Add the active class with a border and then click a link and hold on.
The short time between link clicked and released is the active state.
Khemraj Thapa
8,885 PointsKhemraj Thapa
8,885 Pointshmm i managed to do it using .current-menu-item on the css but still not satisfied by directly hard-coding it. I am sure there are more dynamic way to do it. Anyway thanks and really enjoying your video lessons. :D
Adrie Silva
Courses Plus Student 535 PointsAdrie Silva
Courses Plus Student 535 PointsHi, I added the class " .current-menu-item " and I still don't get any results. I would like to change the color of the navigation link based on if it's the current page or not. I.e. If I am at the Bio page the Bio link would be highlighted green.
My url/website