# Multiple Active Nav Links (styling)

**URL:** <https://community.wpbeaverbuilder.com/t/multiple-active-nav-links-styling/15499>\
**Category:** BB Theme\
**Tags:** css\
**Created:** [January 21, 2022, 8:57pm UTC](https://community.wpbeaverbuilder.com/t/multiple-active-nav-links-styling/15499 "2022-01-21T20:57:30Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Hilary](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/hilary/32/3514_2.png) [@Hilary](https://community.wpbeaverbuilder.com/u/Hilary)\
**Post date:** [January 21, 2022, 8:57pm UTC](https://community.wpbeaverbuilder.com/t/multiple-active-nav-links-styling/15499/1 "2022-01-21T20:57:30Z")

</div>

Looking for assistance styling my bottom nav so that it doesn’t show multiple active links when on the homepage.

The two “active” links showing in dark grey in the attached image are both anchors on the homepage, so when a visitor is on the homepage, the links both show as active.

I want them to show in white (the regular link colour set in Nav Style) unless they are specifically clicked on.

 ![nav links](https://community.wpbeaverbuilder.com/uploads/default/original/2X/f/fe2d32e166118b312256c7f628307b2fc4880009.png)

---

<div class="post-metadata">

**Author:** ![zizion](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/zizion/32/2914_2.png) [@zizion](https://community.wpbeaverbuilder.com/u/zizion)\
**Post date:** [January 25, 2022, 10:00pm UTC](https://community.wpbeaverbuilder.com/t/multiple-active-nav-links-styling/15499/2 "2022-01-25T22:00:56Z")

</div>

If these texts are made with BB, you might already know how to change the color of text.  
If not, use “inspect” menu on Chrome, and find the applied CSS selector, and apply your new color at (Appearance\>Customize\>Additional CSS) such as,

.selector\_name a {  
color: #FFFFFF !important;  
}

---

<div class="post-metadata">

**Author:** ![avanti](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/avanti/32/930_2.png) [@avanti](https://community.wpbeaverbuilder.com/u/avanti)\
**Post date:** [January 28, 2022, 11:22pm UTC](https://community.wpbeaverbuilder.com/t/multiple-active-nav-links-styling/15499/3 "2022-01-28T23:22:51Z")

</div>

It will be complicated because both links point at the same page and therefore receive a `current-menu-item` class when one visit this page.  
Which is why they get the same style (through this class).  
At most simple, create separate pages for Services and About Us.