NavMenu is not visible after installing Blazorise

[cfeze]

Hi guys,

I created a empty project of Blazor WASM and then I tried install Blazorise but I'm getting this error. NavMenu is disappear

If I revert all changes, NaVMenu is back

https://github.com/cfeze/BlazoriseDemo

[stsrki]

It's because the default Blazor template comes with predefined custom styles located in site.css and that will override some of the Bootstrap classes. And it will affect how the nav menu will look. So it will also clash with some of the styles that come with Blazorise.

Just remove site.css and go fully Blazorise. You will remove it sooner or later.

[stsrki]

Yes, app.css. It's either site.css or app.css, depending on whether it's WebAssembly or a server-side project.

Also, remove <link href="css/app.css" rel="stylesheet" /> from index.html or _Host.cshtml.

[cfeze]

After that App doesn't has styles.

I think code below is not working as expected.

    <link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
    <link href="_content/Blazorise.Bootstrap/blazorise.bootstrap.css" rel="stylesheet" />

[stsrki]

Well, of course, it will not work by itself. You must add some layout and component :)

Look at the documentation https://blazorise.com/docs/ for each component description. And also look at the demo app for reference https://github.com/stsrki/Blazorise/tree/master/Demos/Blazorise.Demo

[cfeze]

Hi, sorry I didn't realize that I must add some layout and component.
I've looked at documentation and source code for this and I'm still stuck on my App, I have added a layout but I'm getting some issues below.

1. NavMenu and Header are not aligned.
   

2. An error always is displayed but in Console debugger is OK.
   

I couldn't resolve them for now. Could you please provide an example in order how to use Blazorise on default project for Blazor WASM?

You can have look at https://github.com/cfeze/BlazoriseDemo if you want.

Thanks!

[mic-dev-x]

Hi,
I'va also experieced this strange problem and I've solved it in this way:
in Shared/NavMenu.razor
get rid of the "@OnClick="ToggleNavMenu"

[stsrki]

1. This is working fine as far as I can see. The Home item has slight padding and is a little below the header. That is how it works.
2. Remove this https://github.com/cfeze/BlazoriseDemo/blob/master/BlazoriseDemo/wwwroot/index.html#L20, I personally always delete it.

[cfeze]

Great! Thanks.
Just one thing more. At point 1 How can I fix it? If you see https://github.com/cfeze/BlazoriseDemo/blob/master/BlazoriseDemo/Shared/MainLayout.razor#L20 I just use layout attributes. Do I have to change css files for that?

[stsrki]

I really don't know why it won't work for you. As you can see in the demos it's just Blazorise without any custom CSS. You can try changing CSS to adjust the height of the top Bar, or whatever you need. It's the right thing to do.

[stsrki]

Wait, I just realized you're talking about the NavMenu. The component that comes with a default Blazor project template. Yeah, that will not work because it uses some custom CSS that will clash with Blazorise styles. You will need to go fully Blazorise and use Bar with horizontal mode.