Re class active

HTML-CSS
1

please see

https://forallthetime.com/BI-800/index.html

on the sidebar nav, i want the link to have a solid white background and black text when that page is being viewed… then to another page and that link has a solid white background and black text when being viewed etc

i thought .active in my CSS would do that, cannot makeit work that way :frowning:

i hope i am clear!

thanks!

2

Welcome to the forum @Pavel_NA

Having a .active class should work. Make sure that:

  • In each of your html files for each page you’ve added the active class to the active nav element.
  • You have *ONE global CSS file that applies to all HTML files

It should look something like this

HTML FILE / PAGE 1

<nav>
  <ul>
    <li class="active">Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</nav>

HTML FILE / PAGE 2

<nav>
  <ul>
    <li>Home</li>
    <li class="active">About</li>
    <li>Contact</li>
  </ul>
</nav>

GLOBAL CSS
Each HTML doc should have a link tag that links to your one CSS file.

.active {
  color: black;
  background: white;
}
3

BINGO!

it works!

another hic-up though :frowning:

see Home

click on the home link

then go back to the hamburger

then hit the drop down

Home is there as active (yay!!) but the color text black is not there

however, its there on the hover of Home

this maybe simple, but i cannot make it work

how can i get black text on the active link when NOT hovered?

i thank you!

5

still having trouble :frowning:

i appologize

i got this far

<div id="mySidenav" class="sidenav">
    <a id="closeBtn" href="#" class="close">&times;</a>
    <ul>
      <li class="active"><a href="index.html">Home</a></li>
      <li><a href="location.html">Location</a></li>
      <li><a href="info.html">Area Information</a></li>
      <li><a href="community.html">Community Information</a></li>
      <li><a href="rentals.html">Rentals</a></li>
      <li><a href="contact.html">Contact Us</a></li>
      <li><a href="amenities.html">Amenities</a></li>
    </ul>
  </div>

  <a href="#" id="openBtn">
    <span class="burger-icon">
      <span></span>
      <span></span>
      <span></span>
    </span>
  </a>

again, i want the link to have a solid white background and black text when that page is being viewed… then to another page and that link has a solid white background and black text when being viewed etc

right now i get no color black for the text on the active page

https://forallthetime.com/BI-800/index.html#

only get black text on the hover

6

Right now you are targeting and styling the container the link is inside, but the selector that is setting the color for the sidebar links has higher specificity.

You can be more specific in the selector.

.sidenav .active a {
  color: black;
}

Also, you need to be mindful about what styles get inherited and which do not. Sometimes it is better to style the element directly and not its parent container. For example in your case, the parent has the background color and the element has the color so styling it like that makes more sense and is easier to reason about (instead of having to look for inherited styles).

1 Like
7

thank you for the explantion! thank you for taking the time to teach me… with the code and the lesson :slight_smile:

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.