Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

PHP Build a Basic PHP Website (2018) Building a Media Library in PHP Adding Active States to the Navigation

Kevin Lothrop
Kevin Lothrop
2,276 Points

Need Help The underline doesn't turn off.

The active state turns on under the links, but returning to the full category page all the links remain on.

Ahsan Parwez
Ahsan Parwez
3,139 Points

I think you are talking about the link underline is showing? To remove this simply add the below CSS. The CSS will remove underlines and highlight the visited and non-visited links.

<style type="text/css">
a:link    {
  /* Applies to all unvisited links */
  text-decoration:  none;
  font-weight:      bold;
  background-color: #ddd;
  color:            blue;
a:visited {
  /* Applies to all visited links */
  text-decoration:  none;
  font-weight:      bold;
  background-color: #ddd;
  color:            #f0f;
a:hover   {
  /* Applies to links under the pointer */
  text-decoration:  underline;
  font-weight:      bold;
  background-color: blue;
  color:            #fff;
a:active  {
  /* Applies to activated links */
  text-decoration:  underline;
  font-weight:      bold;
  background-color: black;
  color: white;

Hi Kevin,

You may want to post a screen shot of your header.php <ul>... section and the variable assignment section of your: catalog.php, suggest.php, and index.php

The issue may be in one of those places.

1 Answer

Dennis Amiel Domingo
Dennis Amiel Domingo
14,107 Points

Put $section = null; in your catalog.php file, just under $pageTitle = "Full Catalog";.

It should look like this:


$pageTitle = "Full Catalog";
$section = null;

    if($_GET["cat"] == "books"){
        $pageTitle = "Books";
        $section = "books";
    } elseif ($_GET["cat"] == "movies"){
        $pageTitle = "Movies";
        $section = "movies";
    } elseif ($_GET["cat"] == "music"){
        $pageTitle = "Music";
        $section = "music";

include("inc/header.php"); ?>

<div class="section page">
    <h1><?php echo $pageTitle; ?></h1>

<?php include("inc/footer.php"); ?>

Since you already have text-decoration set to "none" in your CSS file for your navigation links, it will only change to "underline" when the "on" class is applied to them. And the "on" class is dependent of the $section variable which points to "books, music, etc" when clicked. If there aren't any links clicked, the "on" class is not applied, hence the $section variable is null, defaulting to the initial CSS assignment of text-decoration: none; as shown below:

.header .nav li a {
    color: white;
    text-decoration: none;
    display: block;
    line-height: 95px;
    padding: 10px 0 0;
    margin: 28 0 0 35px;
    width: 100px;
    text-align: left;
    background: url('../img/nav5-sprite.png') no-repeat 0px 105px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 1px;

P.S. I changed the margin and the background url because I was doing the Extra Credit part that time.