How to show an active state in the Menu Builder?

How To
1

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

2

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.

3

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

4

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.

5

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

6

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?

7

Stuck on this one at the moment, did you find any solution?

8

Unfortunately I did not find a solution …

9

Wordpress puts an .current-menu-item class on the li element of the current page automatically. I usually give the active styling for that class and it works perfectly.

10

Sounds good, since I am not very savvy with CSS I don’t get what to do exactly …

11

First go to: Bricks > settings > custom code> custom css there you can put your custom active code like the following:

.current-menu-item{
border:1px solid #ffffff;
font-weight: bold;
background-color:red;
}
This code will give your active menu item a 1px white border, with a red background and bold font weight. Change the code however you want it to look.