How to have a menu slide down on mobile and slide to the right on desktop?

Question

I am building a custom menu for a website and am trying to have the menu slide out on desktop and slide down on mobile. However, when I am testing it on my phone it is causing the menu to come down from the top right and should be coming down vertically. I am very stuck and lost and would love any help I can get on this. Here is a link to my code: https://codepen.io/caleb-case/pen/yLLmVZa

window.onclick = function(event){if(event.target == document.getElementById('outerNav')){closeNav();}};

function openNav() {
document.getElementById("jrc-sidenav").style.display = "block";

if (window.matchMedia("only screen and (max-width: 550px)").matches) {
 document.getElementById("jrc-sidenav").classList.add("slide-in-blurred-top");
 document.getElementById("jrc-sidenav").classList.remove("slide-out-blurred-top");
 document.getElementById("jrc-sidenav").classList.remove("jrc-slide-in-blurred-right");
 
} else {
 document.getElementById("jrc-sidenav").classList.add("jrc-slide-in-blurred-right");
 document.getElementById("jrc-sidenav").classList.remove("jrc-slide-out-blurred-right");
 document.getElementById("jrc-sidenav").classList.remove("slide-out-blurred-top");

}
  
document.getElementById("outerNav").style.position = "fixed";
document.getElementById("outerNav").style.width = "100%";
document.getElementById("et-main-area").style.backgroundColor = "rgba(0,0,0,0.4)";
document.getElementById("hamburger").style.display = "none";
}
  
function closeNav() {

if (window.matchMedia("only screen and (max-width: 550px)").matches) {
  document.getElementById("jrc-sidenav").classList.add("slide-out-blurred-top");
  document.getElementById("jrc-sidenav").classList.remove("slide-in-blurred-top");
  document.getElementById("jrc-sidenav").classList.remove("jrc-slide-out-blurred-right");

 } else {
  document.getElementById("jrc-sidenav").classList.add("jrc-slide-out-blurred-right");
  document.getElementById("jrc-sidenav").classList.remove("jrc-slide-in-blurred-right");
  document.getElementById("jrc-sidenav").classList.remove("slide-out-blurred-top");
 }

document.getElementById("et-main-area").style.backgroundColor = "#fff";
document.getElementById("outerNav").style.width = "0%";
setTimeout(function(){
        document.getElementById("hamburger").style.display = "block";
},250);

}

/*Menu Styles */
body {
transition: background-color .5s;
font-family: 'Gotham-Book',Helvetica,Arial,Lucida,sans-serif;
}
#jrc-sidenav {
  display: none;
}
@media only screen and (min-width: 576px) {
  #jrc-sidenav {
    width: 250px;
  }
}
.outerNav {
  display: block;
  position: fixed;
  right: 0px;
  top: 0px;
  width: 0%;
  height: 100%;
  overflow: hidden;
  background-color: transparent;
  transition: 0.5s;
}
.sidenav {
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 100;
  top: 0px;
  right: 0px;
  background-color: #fff;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 45px;
  transform: translate3d(100%,0,0);

}

.sidenav a {
  padding: 8px 8px 8px 16px;
  text-decoration: none;
  font-size: 16px;
  color: #474747;
  display: block;
  transition: 0.3s;
  text-align: left;
  font-weight: 800;
  cursor: pointer;
}

.sidenav a:hover {
  color: #949494;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 5px;
  font-size: 30px;
  margin-left: 50px;
}

#hamburger {
  font-size: 25px;
  cursor: pointer;
  color:#00a3e0;
  position: relative;;
  top: 0px;
  right: 25px;
  transition: 0.3s; 
  z-index: 101;
  position: fixed;
}
#hamburger:hover {
  color: #00a3e0b0;
}
.divider {
  width: 215px; 
  border-top: 2px solid #474747; 
  margin-top: 15px; 
  margin-bottom: 15px;
  transition: 0.3s;
}
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

.icon {
 color: #00a3e0; 
 margin-right: 5px;
}
.side-links {
 padding: 8px 8px 8px 20px;
}

@media only screen and (max-width: 600px) {
#hamburger {
 font-size: 30px;
}
}


@media only screen and (max-width: 450px) {

.divider {
 width: 90%;
 transition: 0.7s !important;
}
.sidenav {
  padding-top: 65px;
  box-shadow: none !important;
 transition: 0.7s !important;
  overflow-y: auto !important;
 
}

.sidenav a {
 padding: 20px 20px 20px 21px;
 font-size: 20px;
 transition: 0.7s !important;
}
}


/*Animation Menu Styles */
@keyframes jrc-slide-in-blurred-right {
0% {
 -webkit-transform: translateX(1000px);
    -o-transform: translateX(1000px);
    transform: translateX(1000px);
    -webkit-transform-origin: 0 50%;
    -o-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-filter: blur(40px);
    filter: blur(40px);
    opacity: 0;
}
100% {
 -webkit-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    -webkit-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-filter: blur(0);
    filter: blur(0);
    opacity: 1; 
}
}
@keyframes jrc-slide-out-blurred-right {
0% {
 -webkit-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    -webkit-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-filter: blur(0);
    filter: blur(0);
    opacity: 1;
}
100% {
 -webkit-transform: translateX(1000px);
    -o-transform: translateX(1000px);
    transform: translateX(1000px);
    -webkit-transform-origin: 0 50%;
    -o-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-filter: blur(40px);
    filter: blur(40px);
    opacity: 0;
}
}

.jrc-slide-in-blurred-right {
 -webkit-animation: jrc-slide-in-blurred-right .5s cubic-bezier(.23,1,.32,1) both;
    -o-animation: jrc-slide-in-blurred-right .5s cubic-bezier(.23,1,.32,1) both;
    animation: jrc-slide-in-blurred-right .5s cubic-bezier(.23,1,.32,1) both;
}
.jrc-slide-out-blurred-right {
 -webkit-animation: jrc-slide-out-blurred-right .45s cubic-bezier(.755,.05,.855,.06) both;
    -o-animation: jrc-slide-out-blurred-right .45s cubic-bezier(.755,.05,.855,.06) both;
    animation: jrc-slide-out-blurred-right .45s cubic-bezier(.755,.05,.855,.06) both;
}
 @keyframes slide-in-blurred-top {
0% {
 -webkit-transform: translateY(-1000px);
    -o-transform: translateY(-1000px);
    transform: translateY(-1000px);
    -webkit-transform-origin: 50% 0;
    -o-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-filter: blur(40px);
    filter: blur(40px);
    opacity: 0; 
}
100% {
 -webkit-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    -webkit-transform-origin: 50% 0;
    -o-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-filter: blur(0);
    filter: blur(0);
    opacity: 1; 
}
}
@keyframes slide-out-blurred-top {
0% {
    -webkit-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    -webkit-transform-origin: 50% 0;
    -o-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-filter: blur(0);
    filter: blur(0);
    opacity: 1; 
}
100% {
 -webkit-transform: translateY(-1000px);
    -o-transform: translateY(-1000px);
    transform: translateY(-1000px);
    -webkit-transform-origin: 50% 0;
    -o-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-filter: blur(40px);
    filter: blur(40px);
    opacity: 0;
} 
}

.slide-in-blurred-top {
 -webkit-animation: slide-in-blurred-top .5s cubic-bezier(.23,1,.32,1) both;
    -o-animation: slide-in-blurred-top .5s cubic-bezier(.23,1,.32,1) both;
    animation: slide-in-blurred-top .5s cubic-bezier(.23,1,.32,1) both;
}
.slide-out-blurred-top {
 -webkit-animation: slide-out-blurred-top .45s cubic-bezier(.755,.05,.855,.06) both;
    -o-animation: slide-out-blurred-top .45s cubic-bezier(.755,.05,.855,.06) both;
    animation: slide-out-blurred-top .45s cubic-bezier(.755,.05,.855,.06) both;
}

<body id="et-main-area">
<div id="outerNav" class="outerNav">

<div id="jrc-sidenav" class="sidenav">
  
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  
  <a href="#"><i class="fas fa-play icon"></i>Sermons</a>
  <a href="/#"><i class="fas fa-church icon"></i> About</a>
  <a href="#"><i class="fas fa-map-marker-alt icon"></i> Locations</a>
  <a href="#"><i class="fas fa-heart icon"></i> Give</a>
  <a href="#"><i class="fas fa-heart icon"></i> Events</a>
  
  <hr class="divider">
  <a href="#" class="side-links">Get Involved</a>
  <a href="#" class="side-links">Grow Track</a>
  <a href="#" class="side-links">Life Groups</a>
  <a href="#" class="side-links">Kids & Youth</a>
  <a href="#" class="side-links">Ministries</a>
  <a href="#" class="side-links">Jobs</a>
  <a href="#" class="side-links">Blog</a>
  <a href="#" class="side-links">Contact Us</a>
</div>
</div>
<span id ="hamburger" onclick="openNav()">☰</span>
</body>

What do you mean by `the menu to come down from the top right`? I tried it on my mobile and it seems to be coming down from the top part of the window. Is that not the intended behaviour? Do you want the dropdown to come down from the hamburger icon? — Richard, Dec 21 '19 at 13:24
Hey Richard! Yes, the intended behavior is for the menu to slide out from the right on desktop and tablet, but on mobile to slide down directly vertical from the top. When I test it on my laptop on a smaller screen size it is coming down from the top, however, when I inspect it from my actual mobile device the menu is coming down from the top right of the screen when it should be only from the top. I do not know how to fix this issue and maybe you can help me out. — ccase3, Dec 21 '19 at 18:58
I assume that your laptop screen is less than `550px` which causes your code to slide the menu down from the top instead of from the right. As for the `the menu is coming down from the top right of the screen`, I can't seem to replicate it, even on my mobile device. It is coming down from the top here. For the laptop problem, is there a reason why it **has** to come down from the top? There are ways to detect devices literally (not using screen sizes) using user agents, but are not recommended. — Richard, Dec 23 '19 at 05:20
For the user agent ones, see: https://stackoverflow.com/a/3540295/9060223 and https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent. However, again, it is not recommended to use that, so sticking to screen sizes is good. But again, I still don't see the importance of making the menu come down on laptops with such small screen sizes. Is there a compelling reason why it **has** to behave that way? — Richard, Dec 23 '19 at 05:22
Hey Richard! Sorry for getting back to you so late. What I am trying to create is very similar to elevationchurch.org menu. Where is slides out from the right on desktop, but on mobile the menu slides down from the top. It doesn't necessarily have to behave this way, but I was more confused as to why on my end it was coming from the top right. — ccase3, Dec 31 '19 at 16:18
As mentioned, I can't replicate the `coming from the top right` part on my mobile phone. In my phone, it is currently just sliding down from the top. Not sure what you meant by `top right`. — Richard, Jan 01 '20 at 10:45
Well, thank you for looking into it Richard. I appreciate the time you took to try and help me out. On my end it is now working correctly, so the browser may have been cached and displaying the wrong code. — ccase3, Jan 02 '20 at 18:24

How to have a menu slide down on mobile and slide to the right on desktop?

0 Answers0