1. Home
  2. Forum
  3. Blazor
  4. Is there any way to turn the hamburger icon into an X on Navbar?

Is there any way to turn the hamburger icon into an X on Navbar?

I just want to create a navbar and the hamburger icon dynamically change to an X with animation.  I can do it using javascript, Jquery.  I haven't seen how to do it using Blazor.  Here is an example: https://codepen.io/millardh777/pen/ExgbeeX .  I figured it might be possible using JSInterop but just can't figure out how to do the animation.  Thanks much!


7 Replies 1 reply marked as answer
AS Aravinthan Seetharaman Syncfusion Team December 28, 2020 10:57 AM UTC

Hi Millard Harris, 
 
 
Thanks for contacting Syncfusion support. 
 
We have checked your reported query, and we can change hamburger icon, on clicking it, by using OnOpen and Closed event as like below code snippet. 

 
<MenuEvents TValue="MenuItem" OnOpen="BeforeOpenMenu" Closed="CloseMenu"> </MenuEvents> 
 … 
 
private void BeforeOpenMenu(BeforeOpenCloseMenuEventArgs<MenuItem> args) 
    { 
        if (args.ParentItem == null) 
        { 
            content = "e745"; 
        } 
    } 
 
    private void CloseMenu(OpenCloseMenuEventArgs<MenuItem> args) 
    { 
        if (args.ParentItem == null) 
        { 
            content = "e7cd"; 
        } 
    } 
 
   
 
Could you please check the above details, and get back to us, if you need further assistance on this. 
 
 
Regards, 
Aravinthan S 


RF Richard Freiberg December 28, 2020 08:58 PM UTC

Thanks, that does change the icon and I can see how to change its color.  I really need some additional functionality though.  I need the icon to be on the right and a "brand" icon on the left.  I also need the color to be black with the items black also.  I suppose this could be done with styling, but I'm not sure which css elements to target.  This particular site is "mobile-only".  I appreciate your help in this.

AS Aravinthan Seetharaman Syncfusion Team December 29, 2020 03:19 PM UTC

Hi  Richard, 
  
  
We have checked your query, and we can achieve your requirement by using CSS as like below. 
 
     
    /* To change container background */ 
    .layout #container { 
        height: 405px; 
        background-color: white; 
        overflow: hidden; 
    } 
 
    /* To add custom icon on left */ 
    .e-image::before { 
        content: '\e776'; 
        position: absolute; 
        left: 10px; 
        top: 6px; 
    } 
 
    /* To position Menu Title */ 
    .e-menu-container .e-menu-header .e-menu-title { 
        position: absolute; 
        left: 110px; 
    } 
 
    /* To position Hamburgar Icon */ 
    .e-menu-container.e-hamburger .e-menu-header .e-menu-icon::before { 
        left: 230px; 
        position: absolute; 
        content: '\@content'; 
    } 
 
    /* To change caret Icon color*/ 
    .e-menu-container.e-hamburger .e-menu-item .e-caret::before { 
        color: white; 
    } 
 
    /* To change menu item text and background color */ 
    .e-menu-container.e-hamburger ul.e-menu .e-menu-item { 
        background-color: black; 
        color: white; 
    } 
 
 
Could you please check the above details, and get back to us, if you need assistance on this. 
  
  
Regards, 
Aravinthan S 


MH Millard Harris December 29, 2020 08:08 PM UTC

Aravinthan,

I appreciate your prompt reply. That is real close to what we are looking for. I tested it and tried it within our app. I did have a couple of minor issues that I couldn't resolve myself. I made it into more of a traditional dropdown by allowing it to overflow and changed the size, but when I did, when the dropdown pops, it overlays the "X" somewhat. Also for some reason, I cannot get the color of the menu items to be the color I need even though on your test app, it works fine. I guess something in our app is interfering with the color selection. One other thing is the size of the hamburger icon. Is there anyway it can be made a little bigger?
I would appreciate if you could advise on these issues. I am attaching your solution with the changes I made to the CSS.
Again, thanks a bunch!
Millard


Attachment: BlazorApp20_8463ad80.zip

AS Aravinthan Seetharaman Syncfusion Team December 30, 2020 05:32 PM UTC

Hi Millard Harris, 
 
 
We have checked you query, and we can increase the size of the icon by using font-size property as like below. 
  
.e-menu-container.e-hamburger .e-menu-header .e-menu-icon::before {    
font-size: 25px;  
} 
 
  
CSS to resolve overflow issue: 
   .e-menu-container.e-hamburger ul.e-menu { 
        height: 347px; 
        overflow-y:auto; 
    } 
 
 
Could you please check the above details, and get back to us, if you need assistance on this. 
 
 
Regards, 
Aravinthan S 


Marked as answer
MH Millard Harris December 30, 2020 09:51 PM UTC

Aravinthan,

I did check the styling you sent and applied it.  It is probably about as close as I'm going to get with it.  I appreciate all of your help in this.

Thanks,

Millard

AS Aravinthan Seetharaman Syncfusion Team December 31, 2020 03:22 PM UTC

Hi Millard Harris, 
 
Thanks for the update. 
 
We are happy to hear that your issue has been resolved. Please feel free to contact us, if you need any further assistance on this. 
 
Regards, 
Aravinthan S 


Loader.
Up arrow icon