Create a Side Bar Menu

In this recipe, we will modify the Side Menu plugin to look like a Side Bar Menu

Preview:

Plugin Settings:

CSS:

#overlay wdg-menu-kavftig > div
{
  padding: 20px 30px;
  height: 100%;;
}

#overlay wdg-menu-kavftig img {
  margin-bottom: 40px;
  margin-top: 40px;
}

#overlay  wdg-menu-kavftig  div.list.scrollbar  wdg-menu-kavftig-menu  ul  li {
  border-color: #fff;
}

#overlay.mobile  wdg-menu-kavftig  div.list.scrollbar  wdg-menu-kavftig-menu  ul  li {
  margin-left: 10px;
}

#overlay.mobile wdg-menu-kavftig .menu{
width: 50%;
}

#overlay  wdg-menu-kavftig  div.list.scrollbar  wdg-menu-kavftig-menu  ul  li {
  border-color: #fff;
}

#overlay.mobile wdg-menu-kavftig  button.toggle{
 margin: -20px -44px 0px 0px !important;
}

#overlay wdg-menu-kavftig ul li span{
  line-height:20px;
  padding: 2px 0 2px 0;
}

#overlay wdg-menu-kavftig div button.toggle .nav-icon span {
  display: none;
}

#overlay  wdg-menu-kavftig div button.toggle:after  {
 content: 'Side Menu';
  color: white;
  font-weight: bold;
  font-size: 20px;
  display: inline-block;
  transform: rotate(-90deg);
  white-space: nowrap;
  text-align: center;
  position: absolute;
}

#overlay  wdg-menu-kavftig div > button  {
  height: 100%;
  margin-top: -20px;
  background-color: #FA7312; /* change colour for the Side Menu */
}

.widget.menu .contact {
  margin-top: auto;
  padding-bottom: 40px;
  text-align: left;

}