How to show an active state in the Menu Builder?

Hello,

I built my first Bricks Menu introduced in Bricks 1.8. I want to show an underline in an active state (when the page is open). I tried to apply this active state Text Link element (works for hover but not for active). I tried to add it to Nav (Nestable), and the Nav Item Block. Not a chance.

Can anyone show me how to apply a Active State to the menu?

Dirk

I was looking for the same, but didn’t find this option in Bricks. Active state will not work, because it is just a CSS property that activates after clicking on the element. For now, I am using custom function. You can try it also:

  1. Copy the function to your theme and sign it (Code signatures – Bricks Academy)
function bri_is_current_slug($slug = "") {
    $site_url = home_url();
    $current_url = home_url( add_query_arg( null, null ) );
    $current_slug = str_replace($site_url, '', $current_url);
    $current_slug = trim($current_slug, '/');
	return $current_slug == $slug ? 'true' : 'false';
}
  1. For each Nav link in nestable add an attribute - in the name you put something like is_active and to value {echo:bri_is_current_slug(‘slug’)}. Change the “slug” to the slug of the page
  2. Style active nav link in custom CSS like this
a[is_active="true"] {
 // styles
}

If there is built-in way how to do it, I would like to know, maybe someone else will help.

That is indeed very odd that such a basic and important feature is not supported. Thanks for explanation. Somehow it does not work. I guess I did something wrong, since I am not very savvy in coding:

  • I added the PHP function to the function.php in the child theme
  • I am not familiar with signing code but I went to Bricks ⟶ Custom Code ⟶ Code review (showed me nothing like an example CSS style ⟶ clicked Regenerate code signatures and got a success message
  • Went to the Nav Link (in my Case “About” in a Text link element), went to Style ⟶ Attribute and did this setup: CleanShot 2024-03-20 at 08.37.14
  • Went to Style ⟶ CSS and did this setup: CleanShot 2024-03-20 at 08.39.01

Nothing changed: CleanShot 2024-03-20 at 08.42.26

If I understand your question correctly, go to the Nav Menu settings, Content > Top Level > Active and there you can set the Background, Border and Typography for the menu item associated with the current page.

That was easy! Thanks a lot did not see that. Issue is fixed :slight_smile:

I did the same on a one pager. I think this is nor working if you use anchor links: CleanShot 2024-04-01 at 11.58.10, https://bricks.websites-fuer-zahnarztpraxen.de/

I want to indicate in which section the people are after clicking an anchor link.

Does someone has a workaround for that?