Professional Documents
Culture Documents
demo: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_overlay2
local:http://localhost/nav/
// header file
<style>
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-y: 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 .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
<script>
function openNav() {
document.getElementById("myNav").style.height = "100%";
}
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}
</script>
// function file
wp_enqueue_script('jquery');
===================================================
header 2
demo: http://school-theme-demo.crazycafe.net/
local:http://localhost/nav/
// header file
// function file
css file
.slicknav_menu {
display: none;
}