Menu component theme

Radzen Studio Angular
1

Hi,

I'm trying to implement a custom theme and am struggling with finding the setting for the hover colour for the root item of a menu. If I have a menu with a root labelled "Navigation" and 2 of 3 child items beneath, the hover text of the child items seems to pick up the "Hover Color" set for Menu under the Customize theme option but, the hover colour for the root "Navigation" item always seems to default to #479cc8 when using the default theme.

Any pointers would be appreciated.

2

Indeed this is a separate setting which isn't exposed in the Theme editor yet.

Just add this CSS to your styles.css file with the desired color:

.menu:not(.profile-menu) .navigation-item-wrapper:hover .navigation-item-link {
   color: green;
}
3

Hi - I've tried this and it works perfectly. Many thanks!

4

Hi!

It's not work in newest version or may be only on my code.
When I write this code in MainLayout.razor.css

.menu:not(.profile-menu) .navigation-item-wrapper:hover .navigation-item-link {
   color: green;
}

the color not changed

<RadzenLayout style="height: auto;">
    <RadzenHeader>
         <RadzenMenu Click="OnParentClicked">
            <RadzenMenuItem Text="General" Icon="home">
                <RadzenMenuItem Text="Buttons" Path="buttons" Icon="account_circle"></RadzenMenuItem>
                <RadzenMenuItem Text="Menu" Path="menu" Icon="line_weight"></RadzenMenuItem>
                <RadzenMenuItem Click="OnChildClicked" Text="ChildClick" Icon="attach_file"></RadzenMenuItem>
                <RadzenMenuItem Text="Dialog" Path="dialog" Icon="perm_media"></RadzenMenuItem>
                <RadzenMenuItem Text="Notification" Path="notification" Icon="announcement"></RadzenMenuItem>
            </RadzenMenuItem>
            <RadzenMenuItem Text="Inputs" Icon="payment">
                <RadzenMenuItem Text="CheckBox" Path="checkbox" Icon="check_circle"></RadzenMenuItem>
                <RadzenMenuItem Text="TextBox" Path="textbox" Icon="input"></RadzenMenuItem>
                <RadzenMenuItem Text="TextArea" Path="textarea" Icon="description"></RadzenMenuItem>
                <RadzenMenuItem Text="Password" Path="password" Icon="payment"></RadzenMenuItem>
                <RadzenMenuItem Text="Numeric" Path="numeric" Icon="aspect_ratio"></RadzenMenuItem>
                <RadzenMenuItem Text="DatePicker" Path="datepicker" Icon="date_range"></RadzenMenuItem>
            </RadzenMenuItem>
    </RadzenMenu>

How to change text color and background color of root items in ':hover'-event?
Thanks.

5

This thread is for Angular. I suggest starting a new thread in the proper forum category.

6

excuse me!!!!!!!!!!!!!!!!!!!!!