Customised Hamburger

Ross Garden

January 06, 2024 13:11

Hello,

I'd like the lines thinner and have square ends on my hamburger.

I have used Embed to get the line style I want:

I have then used the Custom CSS the get the size I want:

.brz-icon-svg { /* replace with your actual class names */
width: 40px !important;
height: 40px !important;
float: right !important;
}

But it only works on the back end - not the front.

If this is not possible. Can I make a custom, animated Hamburger? The reacts to the open or closed stat of the drawer?

Comments

6 comments

Ariel H.

January 08, 2024 10:36

Hi Ross,

Thank you for reaching out to us.

Could you please try the following and see if this works for you?

<style>
.myicon{
  display: flex;
   justify-content: flex-end;
}
</style>

<div class = "myicon">

<?xml version="1.0" encoding="utf-8"?>
<svg width="40px" height="40px" viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
  <g id="color"/>
  <g id="hair"/>
  <g id="skin"/>
  <g id="skin-shadow"/>
  <g id="line">
    <line x1="16" x2="56" y1="26" y2="26" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="miter" stroke-miterlimit="10" stroke-width="1"/>
    <line x1="16" x2="56" y1="36" y2="36" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="miter" stroke-miterlimit="10" stroke-width="1"/>
    <line x1="16" x2="56" y1="46" y2="46" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="miter" stroke-miterlimit="10" stroke-width="1"/>
  </g>
</svg>
  
</div>

I have tested the script on this page - https://cherry18853432.brizy.site/

Please try this and let me know how it goes.

Best regards,
Ariel H.

Ross Garden

January 08, 2024 14:28
Hi, doesn't seem to give me any functionality. I managed to gee this far (see below) but I can't place the element in the header. Any ideas to fix this?

Essentially I want a narrower line weight with a square and cap.

👍

<div class="brz-menu__container brz-css-bnPv5 brz-css-tbOFU" data-mmenu-id="#kb1FNaC6Kimp" data-mmenu-closingicon="%7B%22desktop%22%3A%22on%22%2C%22tablet%22%3A%22on%22%2C%22mobile%22%3A%22on%22%7D">

<nav class="brz-menu brz-menu__preview brz-css-s76rP brz-css-mTCNm">

</nav>

<div class="brz-mm-menu__icon">

<svg>

width="40px" height="40px" viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg"

<g id="line">

<line x1="16" x2="46" y1="26" y2="26" fill="none" stroke="#000000" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" stroke-width="2"/>

<line x1="16" x2="46" y1="36" y2="36" fill="none" stroke="#000000" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" stroke-width="2"/>

<line x1="16" x2="46" y1="46" y2="46" fill="none" stroke="#000000" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" stroke-width="2"/>

</g>

</svg>

</div>

</div>
0

Ariel H.

January 08, 2024 16:16

Hi Ross,

I figured out why the lines look good in the preview but appear thicker in the browser. It's because the browser applies antialiasing. To fix this, you can add the attribute shape-rendering="crispEdges" to the SVG element. You can find more information about it here - https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering

Here's an example that should create a narrower line with a square cap:

<style>
.myicon{
  display: flex;
   justify-content: flex-end;
}
</style>

<div class = "myicon">

<svg width="52px" height="46px" viewBox="0 0 80 108" xmlns="http://www.w3.org/2000/svg">
   <g id="line" shape-rendering="crispEdges">
    <rect x="10" y="24" width="52" height="46" rx="2" ry="2" fill="none" stroke="#000000" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" stroke-width="1"/>
    <line x1="16" x2="56" y1="34" y2="34" fill="none" stroke="#000000" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" stroke-width="0.5"/>
    <line x1="16" x2="56" y1="46" y2="46" fill="none" stroke="#000000" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" stroke-width="0.5"/>
    <line x1="16" x2="56" y1="58" y2="58" fill="none" stroke="#000000" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" stroke-width="0.5"/>
  </g>
</svg>

</div>

To place this in the header, you will need to create a separate column as a container for the embedded SVG code.

If this doesn't answer your question, please provide a screenshot demonstrating the issue so we can further assist you.

Best regards,
Ariel H.

Ross Garden

January 10, 2024 13:02
This doesn't activate the drawer. Also there's a border around the Div.

Help is greatly appreciated 👍
0
Ariel H.

January 10, 2024 14:39
Hi Ross,

Thank you for the update.

Unfortunately, it's not possible to change the behavior of the hamburger icon using CSS alone. It may require custom scripting to achieve the desired behavior.

However, there is an alternative solution that involves using popups. You can create a similar behavior by placing the embedded SVG inside a column and linking the column to a popup. You can position the popup block to the right and add the menu element and link your menu items. Additionally, you can include an image element to add your logo or any other elements needed for the side menu.

This is demonstrated on this screencast: https://youtu.be/N8W-X-_Xd5k

I hope this helps.

Best regards,
Ariel H.
0
Ross Garden

January 10, 2024 18:12
Hey thanks! Looks easier than trying to customise what's there 👍
0

Please sign in to leave a comment.

Comments

Didn't find what you were looking for?