I am trying to modify the Blazor Web App Side Navigation Menu - to add a Picture and a single text line
I have modified the NavMenu.razor file as indicated below
<div class="top-row ps-5 navbar navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="">
<img src="/MyLogo.jpg" width="150px" alt=""/>
<br />
<h4>@Minimal Unit</h4>
</a>
</div>
</div>
The height of the logo is approximately 80px.
What happens is that the top-row remains too small to fit the image and text
I have tried a number of things to get the navbar-brand area to be larger including
In NavMenu.razor.css
Added the css line
height:200px
to .navbar-brand and to .top-row in NavMenu.razor.css
I also tried adding/replacing to the same location - also to no effect.
min-height: 200px;
Finally, I tried making the changes within the NavMenu.razor file itself
<div class="top-row ps-5 navbar navbar-dark" height="300px">
<div class="container-fluid">
<a class="navbar-brand" href="" height="300px">
<!--<img src="/EnviroSenseLogo.jpg" width="150px" alt=""/>-->
<img src="/Logo.jpg" width="150px" alt="" />
<br />
<h4>@EWBlazorWebApp.deviceData.DeviceName</h4>
</a>
</div>
</div>
Also to no effect. Any ideas where I am going wrong.
