Mouse hover effect on custom themes

[elgs]

The default theme has a nice mouse hover effect on the menu items, however, the custom theme example doesn't have such effect. How can I modify the custom css(less) so that the custom theme will also have such nice mouse hover effect? Thanks.

[fortunar]

Hello, to style the custom menu, please take a look at the file less/theme-default.less. In there you can see how to style the menu in a default-theme consistent way. For your particular case `.Side-menu-default {

@color-blue-darkest: #1A2226; @color-blue-dark: #222D32; @color-grey-light: #B8C7CE; @color-grey-dark: #4A636E; @color-blue-light: #C4EAF2;

.item {

&:hover {
  > .item-title {
    color: white;

    a {
      color: white;
    }
  }
}

&.item-level-1 {
  &:hover {
    >.item-title {
      background-color: lighten(@color-blue-darkest, 20%);
    }
  }

  &:hover, &.active {
    border-left: 4px solid @color-blue-light;
  }
}

} }` this is the section that handles hover state styling. You can apply general styling to all of the menu items using the class "item", but can also override level specific styling with classes like "item-level-1" (set the number to the level - deepness of items you want to style). Hope that solves your issue!

[elgs]

Thanks.