(S)CSS

The supermenu plugin is written with SCSS. The default SCSS stylings can be overridden to customize your menu.

Add a custom Theme

To add a custom Theme you can use the Class `supermenu-custom` and add this the Code snippet your SCSS or CSS code.

SCSS Version

.supermenu-custom{
    background-color: #f3f3f3;
    .sm-list{
        .sm-list-item{
            &.sm-title{
                color: rgba(#000, 0.2);
                border-color: rgba(#fff, 0.8);
            }
            &.sm-item-active,
            &.active {
                background-color: rgba(#000, 0.75);  
            }
            .sm-list-item-anchor{
                color: rgba(#000, 0.2);
                border-color: rgba(#fff, 0.8);
                &:hover{
                    background-color: rgba(#000, 0.75);
                }
            }
            &.sm-has-submenu{
                .sm-submenu-toggler{
                    &:after{
                        border-color: rgba(#fff, 0.8);
                    }
                }
                .sm-submenu{
                    background-color: rgba(#000, 0.2);
                    .sm-list-item{
                        border-color: rgba(#000, 0.2);
                    }
                }
            }
        }
    }
    .sm-footer{
        background-color: #f3f3f3;
        border-color: rgba(#000, 0.2);
    }
}

                                    

CSS Version

.supermenu-custom {
    background-color: #f3f3f3;
  }
  .supermenu-custom .sm-list .sm-list-item.sm-title {
    color: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.8);
  }
  .supermenu-custom .sm-list .sm-list-item.sm-item-active, .supermenu-custom .sm-list .sm-list-item.active {
    background-color: rgba(0, 0, 0, 0.75);
  }
  .supermenu-custom .sm-list .sm-list-item .sm-list-item-anchor {
    color: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.8);
  }
  .supermenu-custom .sm-list .sm-list-item .sm-list-item-anchor:hover {
    background-color: rgba(0, 0, 0, 0.75);
  }
  .supermenu-custom .sm-list .sm-list-item.sm-has-submenu .sm-submenu-toggler:after {
    border-color: rgba(255, 255, 255, 0.8);
  }
  .supermenu-custom .sm-list .sm-list-item.sm-has-submenu .sm-submenu {
    background-color: rgba(0, 0, 0, 0.2);
  }
  .supermenu-custom .sm-list .sm-list-item.sm-has-submenu .sm-submenu .sm-list-item {
    border-color: rgba(0, 0, 0, 0.2);
  }
  .supermenu-custom .sm-footer {
    background-color: #f3f3f3;
    border-color: rgba(0, 0, 0, 0.2);
  }