Menu Block

Create the menu

1. Create a menu
   Dashboard > Appearance > Menu

On the Webpage

2. Add Column Block: Sidebar Right (Thirds or Quarters would be best depending on the structure of your content)
3. Add Generic Container block.
   • Add Border: Top
   • Change Space Settings: Padding (inside Spacing) > Bottom: xxsmall and Left: xmedium
   • Add CSS class to Additional CSS Classes under Advanced: wsu-custom-side-nav
     Page > Block > Advanced >Additional CSS Classes
   • Select Position Element under Additional Advanced Settings
4. Add the Heading block to the generic Container block (optional, but encouraged).
   Adjust font size, if needed:
   Block > Display Options > Font Size
5. Add to Menu block into the Generic Container block.
   • Add CSS class to Additional CSS Classes: wsu-menu–style-sidebar
     Block > Advanced >Menu CSS Class(es)
6. Add the new CSS code to the website (see below)
   Appearance > Edit CSS

/*----- Menu Block ----- */
.wsu-custom-side-nav {
	border-top: 8px solid #ca1237;
  border-left: 1px solid #e6e6e6 !important;
	padding-top: 2.25rem;
}

.wsu-custom-side-nav::before {
	    content: "";
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: -30px;
    width: 30px;
    height: auto;
    background: linear-gradient(to right,rgba(0,0,0,0) 0,rgba(0,0,0,.05) 100%);
}

/* END Menu Block */