Blazor Navigation Menu - add picture and a Text Line

43 views Asked by At

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

enter image description here

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.

0

There are 0 answers