I NEED A CODE FOR A Fullscreen Overlay Nav

[Dan Lee]

OVERLAY

[Kyryl_Ning_Support]

Hi there!

Just one thing to clarify, do you wish to rework existing menu, or you are willing to add an additional menu that would be overlaying the whole content of the site, by clicking on the certain button that is located on the network? Also, should it work the same way on mobile and web?

Looking forward to hearing from you.

Best regards,

Ning Team.

[Dan Lee]

I would like to get it reworked hold new navigation bar. It needs to work the same way on mobile and web.

[⚡JFarrow⌁]

not sure why my reply below is being marked spam..

[⚡JFarrow⌁]

Here is one you can play around with..

If you need help making it work let me know...

[Dan Lee]

Hi JFarrow I would like to get this look with this transition with the icon at the bottom

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_overlay

[Dan Lee]

I put it on my site need help to make it work.

 

[⚡JFarrow⌁]

Which one?  If you are trying to use the one from the link you provided you would first add this to your Design Studio CSS:

.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}

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

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

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

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

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

 

and then add this to a below header module inside sites and pages:

<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<div class="overlay-content">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
</div>

 

and finally add this to your Custom Code Footer:

<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>

<script>
function openNav() {
document.getElementById("myNav").style.width = "100%";
}

function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>

 

 

i haven't tried it myself, but i imagine it will work...let me know if not..

[Dan Lee]

It is working great! Thanks for your help JFarrow.