How remove Blazor top-row clickable area before user profile name

CageE 0
Viewed 25

In blazor default template, after user login, the whole top-row is clickable an anchor element which leads to login/profile page as shown is the image below: enter image description here

I tried but I cannot figure out how we can limit this clickable zone to only the profile name text?

blazor css html
2 Answers

One possible solution is to add max-width: min-content; to the .top-row ::deep a, .top-row ::deep .btn-link selector in MainLayout.razor.css:

.top-row ::deep a, .top-row ::deep .btn-link {
    white-space: nowrap;
    margin-left: 1.5rem;
    text-decoration: none;
    max-width: min-content;
}
Dimitris Maragkos0

I think this is more an html question than Blazor. You may disable div href and put the "clickable" area into a button. You can edit this html on Shared/MainLayout

hesolar0
Related