Menu Block

Create the menu

  1. Create a menu
    Dashboard > Appearance > Menu

On the Webpage

  1. Add Column Block: Sidebar Right (Thirds or Quarters would be best depending on the structure of your content)
  2. 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
  3. Add the Heading block to the generic Container block (optional, but encouraged).
    Adjust font size, if needed:
    Block > Display Options > Font Size
  4. 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)
  5. 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 */