How to make a Wordpress Mobile/Responsive Menu work
Question
I have recently started to make my own WordPress theme for my own site. However, I'm not using a framework like bootstrap. Starting from the smallest viewport, I am creating the responsive menu. I want to create a slide-in menu. I am not that familiar with Javascript so I only got my menu to open, but I cannot close it when I click outside the menu or on the button. Also, I have noticed my menu items(the links) are not in the order I put them in the Wordpress backend under the Menus tab.
I would really like someone to help me fix my menu and make it close or any help with a better idea or code structure to make the menu function. Also please an answer on the order of the menu not working if possible. Thank you.
Here is a link to the code I adjusted to work on WordPress https://www.w3schools.com/howto/howto_js_sidenav.asp
My header.php code to show the menu
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>EGlobe</title>
<?php wp_head(); ?>
</head>
<body>
<div class="menu-button-holder"><span class="hamburger" style="font-size:30px;cursor:pointer" >☰</span></div>
<?php
wp_nav_menu(
array(
'theme_location' => 'Header Menu',
'menu_class' => 'header-menu',
'menu_id' => 'header-menu'
)
);
functions.php where I register the menus
//registering the menu support for the site
function register_my_menus() {
register_nav_menus(
array(
'header-menu' => __( 'Header Menu' ),
'footer-menu' => __( 'Footer Menu' )
)
);
}
add_action( 'init', 'register_my_menus' );
CSS for the styling like in the link
.header-menu .page_item{
list-style-type: none;
}
.hamburger{
display:none;
}
@media screen and (max-width:320px){
.menu-button-holder{
position: fixed;
width:90%;
}
.hamburger{
display:block;
float: right;
z-index: 1;
top:0;
margin-bottom: 20px;
}
.header-menu{
height: 100%;
width:0;
background-color: black;
position: fixed;
z-index: 1;
top: 0;
left: 0;
padding-top: 60px;
transition: 0.5s;
overflow-x: hidden;
}
.header-menu a{
padding: 8px 32px 8px 32px;
text-decoration: none;
font-size:20px;
color: #fff;
display: block;
}
.header-menu a:hover{
color: #868686;
}
}
And the javascript I used to open the menu. But the close function does not work
document.addEventListener("click", openNav);
function openNav() {
document.getElementById("header-menu").style.width = "250px";
}
if(document.getElementById("header-menu").style.width = "250px"){
document.addEventListener("click", closeNav);
function closeNav(){
document.getElementById("header-menu").style.width = "0px";
}
}
2 answers
solution1
0 2017-03-08 07:45:37
Change this one line
if(document.getElementById("header-menu").style.width = "250px")
to this
if(document.getElementById("header-menu").style.width == "250px")
solution2
0 2017-03-08 12:08:18
You can use like this one
document.getElementById("hamburger").onclick = function(){ if(document.getElementById("header-menu").style.width == "250px"){ document.getElementById("header-menu").style.width = "0px"; } else { document.getElementById("header-menu").style.width = "250px"; } };
.header-menu .page_item{ list-style-type: none; } .hamburger{ display:none; } .menu-button-holder{ position: fixed; width:90%; } .hamburger{ display:block; float: right; z-index: 1; top:0; margin-bottom: 20px; } #header-menu{ height: 100%; width:0; background-color: black; position: fixed; z-index: 1; top: 0; left: 0; padding-top: 60px; transition: 0.5s; overflow-x: hidden; background: red; } .header-menu a{ padding: 8px 32px 8px 32px; text-decoration: none; font-size:20px; color: #fff; display: block; } .header-menu a:hover{ color: #868686; }
<div class="menu-button-holder"> <span class="hamburger" id="hamburger" style="font-size:30px;cursor:pointer" >☰</span> </div> <div id="header-menu">Menu content</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.