brizy menu - current-menu-item

Markus Hoffmann

• February 28, 2020 15:03

Hi there,

I ask myself, if I missed something or if it's not possible so far to style the link of the active page in brizy menu.
When I check the source code there is no current-menu-item class.

Does anyone know a solution?

Thanks for your time!

 

0

• 

  Alex

  • March 02, 2020 09:58

  Hi Markus,

  In Brizy you can style the color for menu items on hover but unfortunately, for the active menu item, we don't have an option yet. Also with Custom CSS I can't help you because there is no active link class.

  We already have this on our internal desk and in the future, you will be able to do this.

  0
• 

  David Keiser

  • April 08, 2020 12:45

  Hi Markus,

  If you use Wordpress than add to your functions.php the code below and then you can style the .brz-current-menu-item .

  add_action( 'wp_head', function () { ?>
  <script>
  var link = window.location.href;
  jQuery(document).ready(function($) {
  $(".brz-menu__item a").each(function(){
  var href = $(this).attr("href");
  if (href == link) {
  $(this).addClass('brz-current-menu-item');
  }
  });
  });
  </script>
  <?php } );

  1
• 

  Markus Hoffmann

  • April 08, 2020 20:37

  Hi David,

  you're a genius !!! Thanks a lot - it works perfectly !!

   

  kind regards and all the best

  Markus

  0
• 

  Alex

  • April 09, 2020 13:03

  Hi David,

  Thanks for getting involved. This helps the community a lot ;).

  0
• 

  David Keiser

  • April 14, 2020 12:41
  • Edited

  Hi Markus,

  Hi Alex, 

  is it also possible to add the "current-menu-item" after the "brz-menu__item-dropdown" ? So in this case the "Über uns" nav-item have also the "current-menu-item"?

  

  0
• 

  David Keiser

  • April 14, 2020 19:20

  Got it, but it´s dirty: 

   

  add_action( 'wp_head', function () { ?>
  <script>
  var link = window.location.href;
  jQuery(document).ready(function($) {
  $(".brz-menu__item a").each(function(){
  var href = $(this).attr("href");
  if (href == link) {
  $(this).parent().parent().parent().addClass('brz-current-menu-item');
  }
  });
  });
  </script>
  <?php } );

  0
• 

  Aftab Hussain

  • August 12, 2020 13:50

  Is anyone able to provide a dummies guide on how to do this step by step?

   

  Not much of a developer but helping out a kids football club. Cant seem to highlight the active page within the menu.

  If its easier I can provide admin login details if any good samaritan wants to help.

  0
• 

  Alex

  • August 12, 2020 15:45

  Hi,

  There is no need for that. In one of the latest updates, we added an option for this. You can set the color for the active link directly in the Brizy editor: https://jmp.sh/58sksmj

   

  0
• 

  Luisa Jansen

  • January 05, 2021 20:04

  In my project I am not able to change the active. In fact, I change it, but it doesn't appear on the published site. In the color options of the menu there are also no options to change the bg or border.

  0
• 

  Alex

  • January 06, 2021 17:07

  Hi,

  do you have this issue in Brizy WordPress or Brizy Cloud? Do you have the PRO features or are you with a Free plan?

  0
• 

  Frank Menhorn

  • May 14, 2021 11:52

  Hi,

  the active menu item color functions works ok as long as you have a menu which links to multiple pages. My problem is the active item on a one pager with anchor links and fixed or sticky menu. It would be nice if the active link item shows up when clicking or scrolling down the one pager and it reached the id tag.

  This does not work for me. Did I miss something or is it not possible in brizy?

  0
• 

  Alex

  • May 15, 2021 16:37

  Hi,

  this is not possible in Brizy. At least for now but I could add this to our list of feature requests.

  0
• 

  vantrinh duong

  • May 27, 2021 13:28

  Alex. I see you guys use the bootstrap library. Let's use Scrollspy bootstrap. I think you can easily do it.

  0
• 

  Alex

  • May 27, 2021 19:08

  okay, deal )))

  I will share your message with the team and discuss this topic with devs.

  0

Please sign in to leave a comment.