Larger hamburger menu

[calibinder]

Larger hamburger menu, is it possible?

Thanks

[Jerry]

@calibinder

is it possible?

Yes, it is with a piece of Javascript as targeting the .navbar-toggler-icon class will not work as Blocs hides the original Bootstrap icon and places its icon on top of it. Just unset the background of the .navbar-toggler-icon class and you will see 2 navbar icons.

To solve this I’m targeting the SVG directly which has the .navbar-toggler-icon class applied.

<script>
document.addEventListener('DOMContentLoaded', (event) => {
  const togglerIcons = document.querySelectorAll('.navbar-toggler-icon');
  togglerIcons.forEach(function(icon) {
    const svg = icon.querySelector('svg');
    if (svg) {
      svg.setAttribute('width', '100px');
      svg.setAttribute('height', '100px');
    }
  });
});
</script>

[KBConcepts]

Check out Easy Burger - Custom Bric for Blocs

Easy Burger Updates to Version 1.2

[PeteSharp]

Besides using Easy Burger

You can make two classes in the class manager and do it with simple CSS. No need for javascript.

1st. Class

.navbar-toggler-icon

Set the width and height of the size you want the toggle to be. Make them the same number.

2nd. Class

.navbar-toggler-icon svg

Set width to 100% and height to Auto

[Jerry]

Adding 2 classes manually or simply copy/paste one script. Easy choice for a lazy Friday.

[PeteSharp]

With the class manager, you can see it on the design canvas, and use breakpoints to manage the size.

[calibinder]

Hey thank you all, I really appreciate your help.

I have Easy Burger and use it all the time, but in this case I needed the stock bootstrap icon with the side menu fly out and different color hamburger for the home page and the other pages, was able to put it in a wrapper and target it on the home page and Blocs built the break points. I will be able to use both methods, Thank you gents.

Have a great weekend.

Thank you all again.