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 ––>

Lay Theme Forum

Off canvas Menu

Before you post:

When you post:

Online Users