rexjiang92
10/8/2019 - 11:15 PM

Jericho Side bar Menu on Force Platform - CSS

/* using Website navigation Menus block in sidebar */
.aw-content__sidebar #block-websitenavigation .large-horizontal.menu > .menu-item:not(.menu-item--active-trail) {
  display: none;
}

.aw-content__sidebar #block-websitenavigation .large-horizontal.menu > .menu-item.menu-item--active-trail .is-dropdown-submenu {
  display: block;
  position: relative;
  opacity: 1!important;
  border: none;
  background: transparent;
  padding: 10px 15px;
}

.aw-content__sidebar #block-websitenavigation .large-horizontal.menu > .menu-item.menu-item--active-trail > a {
  background: #6b8431;
  background-color: #273e70;
  background-image: repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 60px), repeating-linear-gradient(60deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 60px), linear-gradient(60deg, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1)), linear-gradient(120deg, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1));
  background-size: 70px 120px;
  color: #ffffff;
  padding: 20px;
  font-size: 2rem;
}

.aw-content__sidebar #block-websitenavigation .large-horizontal.menu > .menu-item.menu-item--active-trail > a:after {
  display: none;
}

.aw-content__sidebar #block-websitenavigation .large-horizontal.menu > .menu-item.menu-item--active-trail {
  border: 1px solid #273e70;
}

.aw-content__sidebar #block-websitenavigation .large-horizontal.menu .is-active > a {
  background: transparent;
}

.aw-content__sidebar #block-websitenavigation .large-horizontal.menu {
  display: block;
  flex: none;  
}

/* mobile sidebar menu hack */
.aw-content__sidebar #block-websitenavigation .large-horizontal.menu > .menu-item.menu-item--active-trail > .submenu.is-drilldown-submenu {
  position: static;
  z-index: 1;
  flex: none;
  display: block;
  opacity: 1;
  visibility: visible;
  background: transparent;
  padding: 10px 15px;
}

.aw-content__sidebar #block-websitenavigation .large-horizontal.menu > .menu-item.menu-item--active-trail > .submenu.is-drilldown-submenu .js-drilldown-back {
  display: none;
}

.aw-content__sidebar #block-websitenavigation .large-horizontal.menu > .menu-item.menu-item--active-trail > .submenu.is-drilldown-submenu li a {
  background: transparent;
  color: black!important;
}


.aw-content__sidebar #block-websitenavigation #animated-menu > .is-drilldown {
  max-width: 100%!important;
}