Off canvas Menu

[amcd125]

Hey I was wondering if it is possible to have an off-canvas menu simular to this https://www.polytechnic.works/

[mariusjopen]

Dear @amcd125
with some CUSTOM CSS this is possible.
Probably you could also use the mobile-menu for this.

Best!

Marius

[amcd125]

Thanks Manus. How would one be able to set up the mobile menu for desktop?

[mariusjopen]

Dear @amcd125
you would probably need to play around with the CUSTOM CSS or a bit with the Javascript.

Are you familiar with this?
There are good tutorials for free on Codeacademy.

Best!

Marius

[comedowntous]

Hi @amcd125 - I achieved this using the following code here:

w3 schools

You would have to add the code into the custom css + html sections of lay theme settings:

UNDER CUSTOM HTML:

<div id="myNav" class="overlay">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  <div class="overlay-content">
    <a href="/myfirstlink">link 1</a>
    <a href="/mysecondlink">link 2</a>
    <a href="/mythirdlink">link 3</a>
    <a href="/myfourthlink">link 4</a>
  </div>
</div>

<span class="layovermenu" style="font-size:30px;cursor:pointer" onclick="openNav()">MENU</span>

Under CUSTOM <HEAD> CONTENT :

/* Open */
function openNav() {
  document.getElementById("myNav").style.display = "block";
}

/* Close */
function closeNav() {
  document.getElementById("myNav").style.display = "none";
}

UNDER CUSTOM CSS:

/* overlay menu */
.overlay {
  height: 100%;
  width: 100%;
  display: none;
  position: fixed;
  z-index: 4;
  top: 0;
  left: 0;
  background-color: rgb(255,255,255);
  background-color: rgba(0,0,0);
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  font-family: Futura Pro Bold;
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #ffffff;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color: #ffffff;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

.layovermenu {
    font-family: Futura Pro Bold;
    position:fixed;
    width: 100%;
    text-align: center;
    z-index: 3;
}

@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }

I added the class 'layovermenu' in order to change the font and better position the menu link.

This works great on the desktop version but on mobile the overlay does not show - any tips? @mariusjopen

Thank you!

[comedowntous]

Make sure to add <script></script> in between your custom <head> content. The correct way to place this would be:

<! –– OVERLAY MENU ––>

<script>
function openNav() {
  document.getElementById("myNav").style.display = "block";
}

function closeNav() {
  document.getElementById("myNav").style.display = "none";
}
</script>
<! –– OVERLAY MENU ––>