Responsive NavBar

Radzen.Blazor Components
1

Dear Support,

I am having trouble making my navbar responsive. I want the image to disappear when the screen size is reduced, along with the profile menu.

Attached are the images and the code of how I have implemented it.

<RadzenHeader>
	<RadzenRow AlignItems="AlignItems.Center" Style="width: 100%; background-color: #00a2e8; height: 4rem;">
		<RadzenColumn Size="3" >
			<RadzenImage Path="/logo.png" AlternateText="Logo" Click="@Navegate" Style="cursor: pointer; height: 4rem; width: 20.469rem;" />
		</RadzenColumn>

		<RadzenColumn Size="8">
			<RadzenMenu>
				<RadzenMenuItem Text="Produtos" Icon="precision_manufacturing" Path="products" Style="font-size:16px;"></RadzenMenuItem>
				@if (isAdmin)
				{
					<RadzenMenuItem Text="Usuários" Icon="people" Path="users"></RadzenMenuItem>
				}
				<RadzenMenuItem Text="RelatĂłrios" Icon="inventory">
					<RadzenMenuItem Text="Produtos" Icon="box" Path="relatorio-produtos"></RadzenMenuItem>
				</RadzenMenuItem>
			</RadzenMenu>
		</RadzenColumn>

		<RadzenColumn Size="1" Style="display:flex; justify-content: end; background-color: #00a2e8">
			<RadzenProfileMenu Click="@HandlerProfileMenuItem">
				<Template>
					<RadzenGravatar Email="user@example.com" />
				</Template>
				<ChildContent>
					<RadzenProfileMenuItem Text="Redefinir Senha" Value="ChangePassword" Icon="key"></RadzenProfileMenuItem>
					<RadzenProfileMenuItem Text="Sair" Icon="logout" Value="Logout" />
				</ChildContent>
			</RadzenProfileMenu>
		</RadzenColumn>
	</RadzenRow>
</RadzenHeader>

image

Notice that the following image the menu disappers when reduced!
image

2

Hi @Vinicius,

To hide something on certain screen size you need to use the Display utilities. For example to show something only on certain screen sizes you should do this:

<RadzenProfileMenu class="rz-display-none rz-display-md-block">

This hide the menu (via rz-display-none) unless the screen size matches the md breakpoint which is >= 1024px.

1 Like
3

It works! Thanks! I have another question: Is it possible to change the text color using this strategy? Specifically, can I change the text color in a RadzenMenu or RadzenMenuItem? Currently, the text is white, making it difficult to see the menu. Please check the attached image for reference!

<RadzenColumn Size="8">
	<RadzenMenu >
		<RadzenMenuItem Text="Produtos" Icon="precision_manufacturing" Path="products" Style="font-size:16px;" ></RadzenMenuItem>
			<RadzenMenuItem Text="Usuários" Icon="people" Path="users"></RadzenMenuItem>
		
		<RadzenMenuItem Text="RelatĂłrios" Icon="inventory">
			<RadzenMenuItem Text="Produtos" Icon="box" Path="relatorio-produtos"></RadzenMenuItem>
		</RadzenMenuItem>
	</RadzenMenu>
</RadzenColumn>

image
image489Ă—177 3.43 KB

4

Hi @Vinicius,

Please inspect with devtools to find what is causing the no-background menu. Changing the text color would not make a huge difference until the background is transparent.

1 Like