What Is Wrong with My CSS? Active Links Not Changing Color

CSS Active link not working

I saw that there's an error here, as it should be :active and not .active, so replace:

.navigation a.active {
  background: #29abe2;
  color: #fff;
  border-radius: 5px;
}

With:

.navigation a:active {
  background: #29abe2;
  border-radius: 5px; 
  color: #fff;
}

Else, if you are talking about each page having an active state, then what CSS you have written is correct. In your HTML, you need to add this:

<div class="seven columns navigation" id="navigation">
  <a href="#" class="active">Page1</a>
  <a href="#">Page2</a>
  <a href="#">Page3</a>
  <a href="#">Page4</a>
  <a href="#">Page5</a>
</div>

Now, that particular link will be displayed in the active state. It has to be done for each page, if you are using HTML, or it can be done using programming if you are using something like PHP. So, the same thing in PHP would be:

<div class="seven columns navigation" id="navigation">
  <a href="#"<?php if ($page == 1) echo ' class="active"'; ?>>Page1</a>
  <a href="#"<?php if ($page == 2) echo ' class="active"'; ?>>Page2</a>
  <a href="#"<?php if ($page == 3) echo ' class="active"'; ?>>Page3</a>
  <a href="#"<?php if ($page == 4) echo ' class="active"'; ?>>Page4</a>
  <a href="#"<?php if ($page == 5) echo ' class="active"'; ?>>Page5</a>
</div>

TailwindCSS Active Link Text Color Not Changing

You might be confusing two things:

1. The active prefix in Tailwind CSS is applied, whenever an element is currently pressed. (e.g. while you press on a link or button) (https://tailwindcss.com/docs/hover-focus-and-other-states#active)
2. The currently "active" page, as in the current page path matches the nav item`s href

You cannot achieve 2 with 1, they are different things.

To achieve 2 in next.js, you would need to get the current path, compare it to the <Link> element's path and if they're equal, add conditional tailwind classes that show that you're currently on the respective page.

Here is a code example how you can achieve 2:

import Link from 'next/link';
import { useRouter } from 'next/router';

export const Header = () => {
  const router = useRouter();

  return (
    <header>
      <Link href="/">
        <a className={router.pathname == "/" ? "active" : ""}>
           Home
        </a>
      </Link>
    </header>
  )
}

Source: https://dev.to/yuridevat/how-to-add-styling-to-an-active-link-in-nextjs-593e

In your case, you could do something like this:

<Link href="/user/signup">
    <a className={`mr-4 my-auto hover:text-indigo-600 font-normal font-serif text-xl ${router.pathname == "/user/signup" ? "text-indigo-600" : "text-brand-darkblue"}`}>
        Home
    </a>
</Link>

Related Topics