‹ Home
Exported

Holy Family & CCTN - Orlando, FL

Gary Smith, Web Department Director at DiocesanBlake Stapleton, Web Designer at DiocesanVeronica Alvarado, Project Manager at DiocesanKyle Brown, Web Development at DiocesanMary Goeldel, DiocesanKyle Sullivan, Web Development at DiocesanSam Pohlman, Web Developer at DiocesanDanae Chudy, Web Designer at DiocesanNathalie Shultz, Web ConsultantChristine White, Marketing/Communications Coordinator at Holy Family Catholic Church Orlando StaffJulie Kreinheder, Director of Operations at Holy Family Catholic Church Orlando StaffDan Roberts, Systems Admin/IT at Holy Family Catholic Church Orlando StaffCody Armock, Web Content Specialist at DiocesanFermin Toro, Director of Network Operations for CCTN at Holy Family Catholic Church Orlando StaffLynn Ramsey, Holy Family Catholic Church Orlando Staff +9 others
From the list: Build

✔ ShiftNav Open: Gray Out Content (Not Home)

Kyle S. added this on
Completed by Kyle S.
Assigned to
Kyle Sullivan, Web Development at Diocesan Kyle S.

Comments & Events

Kyle Sullivan, Web Development at Diocesan Kyle Sullivan, Web Development
Below is the code I used to accomplish this. The key is position: fixed.
body {
  div#page::after {
    position: fixed;
    content: "";
    background: $navbar;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    transition: 0.25s ease-in;
  }

  &.shiftnav-open {
    div#page::after {
      opacity: 0.55;
      z-index: 9999;
    }
  }
}
No one was notified
Kyle Sullivan, Web Development at Diocesan
Kyle Sullivan completed this to-do.
Kyle Sullivan, Web Development at Diocesan Kyle Sullivan, Web Development
It's entirely possible that this will lead to some complications across this site that can usually be resolved by applying z-index: 1 to a component's parent element.
No one was notified