Canvas Support

Add word Menu

3 replies · opened Mar 31, 2023

UuschiMar 31, 2023

How can I add the word MENU to be beside the Hamburger menu icon?

When I add the word MENU to this code the menu icons are tiny and the word Menu is small.
<div id="primary-menu-trigger">
<svg class="svg-trigger" viewBox="0 0 100 100"><path d="m 30,33 h 40 c 3.722839,0 7.5,3.126468 7.5,8.578427 0,5.451959 -2.727029,8.421573 -7.5,8.421573 h -20"></path><path d="m 30,50 h 40"></path><path d="m 70,67 h -40 c 0,0 -7.5,-0.802118 -7.5,-8.365747 0,-7.563629 7.5,-8.634253 7.5,-8.634253 h 20"></path></svg></div>

I tried adding it this way but the word MENU went to the left and the hamburger bars are on the right.
<div id="primary-menu-trigger">
<svg class="svg-trigger" viewBox="0 0 100 100"><path d="m 30,33 h 40 c 3.722839,0 7.5,3.126468 7.5,8.578427 0,5.451959 -2.727029,8.421573 -7.5,8.421573 h -20"></path><path d="m 30,50 h 40"></path><path d="m 70,67 h -40 c 0,0 -7.5,-0.802118 -7.5,-8.365747 0,-7.563629 7.5,-8.634253 7.5,-8.634253 h 20"></path></svg>
</div>
<div class="header-misc">
<div id="top-search" class="header-misc-icon d-block d-md-none text-white">MENU</div></div>

Thanks

SSemicolon WebSTAFFApr 1, 2023

Hello,

You can consider using this code:
[ch_pre] 

Menu

[/ch_pre]

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

UuschiApr 1, 2023

Is there a way to make the icons larger (see attached screenshot)? When I add the word Menu, the icons become tiny.

I tried these options :
<div id="primary-menu-trigger" class="text-white text-size-sm">
<svg viewBox="0 0 100 100"><path d="m 30,33 h 40 c 3.722839,0 7.5,3.126468 7.5,8.578427 0,5.451959 -2.727029,8.421573 -7.5,8.421573 h -20"></path><path d="m 30,50 h 40"></path><path d="m 70,67 h -40 c 0,0 -7.5,-0.802118 -7.5,-8.365747 0,-7.563629 7.5,-8.634253 7.5,-8.634253 h 20"></path></svg>
<span class="text-white text-size-sm">Menu</span></div>

<div id="primary-menu-trigger">
<svg class="svg-trigger text-white text-size-sm" viewBox="0 0 100 100"><path d="m 30,33 h 40 c 3.722839,0 7.5,3.126468 7.5,8.578427 0,5.451959 -2.727029,8.421573 -7.5,8.421573 h -20"></path><path d="m 30,50 h 40"></path><path d="m 70,67 h -40 c 0,0 -7.5,-0.802118 -7.5,-8.365747 0,-7.563629 7.5,-8.634253 7.5,-8.634253 h 20"></path></svg>
<span class="text-white text-size-sm">Menu</span></div>

I was able to make the MENU text larger but the icons are still tiny.
Thanks

SSemicolon WebSTAFFApr 1, 2023

Hello,

Please make sure that you use the codes that have been provided above. Notice the class="d-flex align-items-center w-auto" Classes added to the id="primary-menu-trigger" Element.

This will resolve the issue. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard