Active link needs to be all one colour, but does not change (nav bar)

[cssrookie97]

Hi,

I am designing a navigation bar and when the user clicks on a link, that link should change red so they know which page their on. However, only the a tag changes colour, with the li tags remaining white, creating “spaces” in between each link and therefore looking very untidy. How do I resolve this?

Thanks!

See the Pen Nav bar troubles by Anon Student (@cssrookie) on CodePen.

https://static.codepen.io/assets/embed/ei.js

[Beverleyh]

The “space” between the li elements is a margin defined here;

.grid-x > .cell {
  margin: 0 0.5rem;
}

Is that what you mean?

[cssrookie97]

@Beverleyh

Yes thank you! It works now! Do I just have to apply the 0.5rem to all of the other content manually now? Or is there a way of keeping that and making the navigation bar different?

Thanks a lot!!!

[Beverleyh]

You’re can increase the specificity to include nav and change the setting lower down the cascade;

.grid-x > .cell {
  margin: 0 0.5rem;
}
nav .grid-x > .cell {
  margin: 0;
}

Or in case you have other nav elements that would be affected, give the nav a class and increase specificity that way.

[Author]

Posts