Menu bar functionally and visually similar to the Menu bar created with Bootstrap, using Menu bar c.

Question

I am trying to achieve professional look of menu bar in Blazor using Menu bar control. I pass all your examples with menu bar but did not find some one where look, and behaviors are like at list bootstrap navbar. The most problem is in visual appearance. If I mix different css, than result is not enough good. For example I would like to mimic in blazor app apple.com basic navbar, or yours syncfusion navbar or at list bootstrap navbar for different displays.

Probably someone else already did it.

Regards Igor

Mohan Kumar Ramasamy · Accepted Answer

Hi Igor, We have checked your reported query. We can achieve your requirement using CSS style property. Please refer below code snippets. @using Syncfusion.Blazor.Navigations

For your reference we have prepared a sample based on this, please refer below sample link. Sample Link: https://www.syncfusion.com/downloads/support/forum/159772/ze/MenuBarCustomCss1621654324 Please let us know, if you need any further assistance. Regards, Mohan kumar R

Igor · Answer

Mohan that looks great. Thanks a lot.Only one more thing. In case HamburgerMode="true"Togler icon is to dark (see image), also there is text Menu (also very dark). Text "Menu" is probably equivalent for class="navbar-brand" .Where I can define text for navbar-brand (let say Igor enstead Menu text) and what css class is responsible for color (visibility) of  hamburger menu.If dark text Menu mean's navbar-brand how it could be visible all the time, not only when hamburger is visible.How you predict to change visibility of HamburgerMode. One way is to add java script and read media size (browser size), and change value false to true for different display resolutions.  Does exist more elegant solution? css class? What is your suggestion?Regards IgorAttachment: HamburgerMode_d697f12f.zip

Mohan Kumar Ramasamy · Answer

Hi Igor, Thanks for update. We have checked your reported query. We have resolved HamburgerMode styles issue. And we can bind resize event script side and change the HamburgerMode in Menu component. Please refer below code snippets. Index.razor @using Syncfusion.Blazor.Navigations @inject IJSRuntime JSRuntime;

@code { private bool hamburgerMode; private static Action action; private async Task Created() { action = ResizeHandler; var width = await JSRuntime.InvokeAsync("registerResizeCallback", null); ResizeHandler((double)width); } [JSInvokable] public static void OnBrowserResize(double width) => action.Invoke(width); private void ResizeHandler(double width) { if (width < 600) //Menu will be changed to hamburger mode, when the screen size is less than 600. { if (!hamburgerMode) { hamburgerMode = true; StateHasChanged(); } } else { if (hamburgerMode) { hamburgerMode = false; StateHasChanged(); } } } } _Host.cshtml For your reference, we have prepared a sample based on this. Please refer below link. Link: https://www.syncfusion.com/downloads/support/forum/159772/ze/MenuBarAsAppleNavBar-247123821 Please let us know, if you need any further assistance. Regards, Mohan kumar R

Igor · Answer

Mohan yes that's it about color of hamburger and appearance. Thank you.

You overlooked part of my previous question.

Where I can change text Menu in something else (see picture)? Can this text be assumed as brand tag in bootstrap? Can I replace it with brand picture? Can I change font?

regards Igor

Attachment: HamburgerMode2_2b20bd2d.zip

Mohan Kumar Ramasamy · Answer

Hi Igor, Sorry for the inconvenience caused. We can set the Menu text using Title property. Please refer below code snippets. Please let us know if you need any further assistance. Regards, Mohan kumar R

Igor · Answer

Hi Mohan, thank you for answer. That's it. Thank you. I will close this thread.Regards Igor

Igor · Answer

Mohan just one more question.How to change text color of added submenus. See pictures. Now it is white but for submenu where background is white text should be black.Here is my modified menu codediv class="control-section"> It should be in css. Can you help please.Regards IgorAttachment: menudropdownfontcolor_c2f6bbf0.zip

Mohan Kumar Ramasamy · Answer

Hi Igor, Thanks for update. We can achieve your requirement using CSS style. Please refer below code snippets. We can customize the highlight sub menu items using CSS styles. Please refer the below table. .e-menu-container.e-custom ul a.e-menu-text.e-menu-url, .e-menu-container.e-custom ul .e-menu-item .e-caret Customize root menu items .e-menu-container.e-custom.e-menu-popup ul a.e-menu-text.e-menu-url, .e-menu-container.e-menu-popup Customize sub menu items .e-menu-container.e-custom .e-menu-popup ul li.e-focused a.e-menu-text.e-menu-url, .e-menu-container.e-custom.e-menu-popup ul li.e-focused a.e-menu-text.e-menu-url Customize highlighted sub menu items .e-menu-container .e-ul .e-menu-item.e-selected, .e-menu-container .e-ul .e-menu-item.e-selected .e-caret Customize selected sub menu items For your reference, we have prepared a sample based on this. Please refer below link. Link: https://www.syncfusion.com/downloads/support/forum/159772/ze/BlazorApp-ServerSide-705493394 Please let us know, if you need any further assistance. Regards, Mohan kumar R

Igor · Answer

Thank you Mohan for answer, thanks also for list of responsible css for menu.Best regardsIgor

Mohan Kumar Ramasamy · Answer

Hi Igor,   
  
Thanks for the update.  
 
We are happy to hear that your requirement has been fulfilled. Please feel free to contact us if you need any further assistance on this. 
 
Regards, 
Mohan kumar R

Igor · Answer

Hi Mohan as I am working new questions rose.

I adjusted css and layout. All works well but few things left.

1. Is possible that Title is all time visible? Not only when hamburger icon is visible.

2. Is possible to have png or icon for Title?

3. When hamburger is visible and pressed menu down is transparent. How to make it non transparent?

4. How to change hamburger icon with x icon when hamburger is pressed and menu is visible?

5. When hamburger is pressed how to add white lines between menus for better distinction.

6. How, when hamburger is visible, change vertical size of menu-control to 48px. When hamburger is not visible vertical size should be 44px as now it is.

Regards Igor

Mohan Kumar Ramasamy · Answer

Hi Igor,

We have checked your reported query. We can achieve your requirement using CSS style property. Please refer below code snippets.

@using Syncfusion.Blazor.Navigations

<SfMenu TValue="MenuItem" CssClass="e-custom">

<MenuItems>

<MenuItem Text="Mac" Url="/Mac"></MenuItem>

<MenuItem Text="iPad" Url="/iPad"></MenuItem>

<MenuItem Text="iPhone" Url="/iPhone"></MenuItem>

<MenuItem Text="Watch" Url="/Watch"></MenuItem>

<MenuItem Text="TV" Url="TV"></MenuItem>

<MenuItem Text="Music" Url="/Music"></MenuItem>

<MenuItem Text="Support" Url="/Support"></MenuItem>

</MenuItems>

</SfMenu>

</div>

<style>

.e-menu-container.e-custom ul a.e-menu-text.e-menu-url {

font-size: 14px;

font-weight: 400;

letter-spacing: -.01em;

font-family: "SF Pro Text","Myriad Set Pro","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;

color: #f5f5f7;

padding: 0 10px;

height: 44px;

opacity: .8;

transition: opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);

}

.main, .e-menu-container ul {

background-color: rgba(0,0,0,0.8);

}

.e-menu-container.e-custom ul li.e-focused a.e-menu-text.e-menu-url {

color: #EFF;

outline: 0 solid #f2f4f6;

}

.main {

height:968px;

}

.menu-control {

background-color: rgba(0,0,0,0.8);

text-align: center;

line-height:0.5;

}

</style>

For your reference we have prepared a sample based on this, please refer below sample link.

Sample Link: https://www.syncfusion.com/downloads/support/forum/159772/ze/MenuBarCustomCss1621654324

Please let us know, if you need any further assistance.

Regards,

Mohan kumar R

Igor · Answer

Hi, I am back on menu we discussed before.The problem is that menu does not collapse after menu item was selected. As you can see in video page (body) was loaded correctly but menu stay visible, should be close after successful select. Here is relevant code:@using Syncfusion.Blazor.Navigations@inject IJSRuntime JSRuntime;

@code { private bool hamburgerMode; private static Action action; private string content = "e7cd"; private async Task Created() { action = ResizeHandler; var width = await JSRuntime.InvokeAsync("registerResizeCallback", null); ResizeHandler((double)width); } private void SelectHandler(MenuEventArgs e) { string id = e.Item.Id; } private void BeforeOpenMenu(BeforeOpenCloseMenuEventArgs args) { if (args.ParentItem == null) { content = "e745"; StateHasChanged(); } } private void CloseMenu(OpenCloseMenuEventArgs args) { if (args.ParentItem == null) { content = "e7cd"; StateHasChanged(); } } [JSInvokable] public static void OnBrowserResize(double width) => action.Invoke(width); private void ResizeHandler(double width) { if (width < 600) //Menu will be changed to hamburger mode, when the screen size is less than 600. { if (!hamburgerMode) { hamburgerMode = true; StateHasChanged(); } } else { if (hamburgerMode) { hamburgerMode = false; content = "e7cd"; StateHasChanged(); } } }}

Gayathri KarunaiAnandam · Answer

Hi Igor, We have checked your reported query. We can close the Menu if it is opened in hamburger mode by using the Close method. Please check the below code snippet. Index.razor @code { private void SelectHandler(MenuEventArgs e) { if(e.Item.Items == null) { MenuObj.Close(); } } } For your reference, we have prepared a sample based on this. Please refer below link. Sample: https://www.syncfusion.com/downloads/support/forum/159772/ze/Menu1339537286 Please get back to us, if you need further assistance. Regards, Gayathri K

Igor · Answer

Thank you very much,yes that's what I am looking for.Best regards Igor

Gayathri KarunaiAnandam · Answer

Hi Igor, 

Thanks for the update. 

We are happy to hear that your requirement has been fulfilled. Please feel free to contact us if you need any further assistance on this. 

Regards, 
Gayathri K

.e-menu-container.e-custom ul a.e-menu-text.e-menu-url, .e-menu-container.e-custom ul .e-menu-item .e-caret	Customize root menu items
.e-menu-container.e-custom.e-menu-popup ul a.e-menu-text.e-menu-url, .e-menu-container.e-menu-popup	Customize sub menu items
.e-menu-container.e-custom .e-menu-popup ul li.e-focused a.e-menu-text.e-menu-url, .e-menu-container.e-custom.e-menu-popup ul li.e-focused a.e-menu-text.e-menu-url	Customize highlighted sub menu items
.e-menu-container .e-ul .e-menu-item.e-selected, .e-menu-container .e-ul .e-menu-item.e-selected .e-caret	Customize selected sub menu items