How do you add an active class for a menu?

Rank: #4569

Solved

How do you add an active class for a menu?

Question

I have been struggling to add an active class in my mobile navbar. How do you change an icon and color of the font when you are on the active page.

Here's the screenshot:

How do I make the appointments icon and text change when active?

Thank you very much!

on 2020-11-26

João Marques

Rank: #67

Solution

Hi Ian,

On the BottomBar block by default, there is an OnReady event that will add the class active to the zero-element-based you pass as an input:

You can change on this block the icons and texts you want for your menu bars:

Being that said, you can check the CSS selector to edit those, like in this example:

The CSS follows below, you can change the color and style it the way you want and add it to your Theme:

.bottom-bar .active .bottom-bar-item-icon,

.bottom-bar .active .bottom-bar-item-text {

color: red;

}

Hope it helps.

Regards,
João

on 2020-11-26

Training

Documentation

How do you add an active class for a menu?