Mobile Menu

I made a quick mobile menu yesterday. This site theme is about a day old. This is just a hobby so it’s going really well. Let’s talk about how I did the mobile menu. I registered another menu in the functions.php –

register_nav_menus(array('menu-1' => esc_html__( 'Primary', 'ganstapenguin2021' ),
			'menu-2' =>esc_html__('MobileMenu', 'ganstapenguin2021')
			));

So now I have two menus registered, a primary and a MobileMenu. Then if we look at the Header.php –

<nav id="site-navigation" class="main-navigation">
			<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'ganstapenguin2021' ); ?></button>
			<?php
		wp_nav_menu(
				array(
					'theme_location' => 'menu-1',
					'menu_id'        => 'primary-menu',
				)
			);
			?>

We can see the primary menu being called and put into the class ID “site-navigation”. That’s my desktop menu. Right above it, I put my mobile menu as so –

<div id ="mobileMenu"class ="topnav sticky"> <span class = "MenuText"> This is my Menu</span> 
		<?php wp_nav_menu(
				array(
					'theme_location' => 'menu-2',
					'menu_id'        => 'mobile-menu',
				)
			);
?> 

Cool, so now I have two menus. One that I have styled with flex box to go horizontally across the top and the mobile menu which is just set to be fixed at the very left top point. I then added CSS to make the mobile menu never display. I then made a random span that I can make fixed as well to the top right.

<span id ="hamburgerToggle" class = "hamburgerButton"> <i class="demo-icon icon-menu"></i> </span>

The icon also has a media query css to not display unless we are looking at mobile. Finally I added some JavaScript (I’ll move it to a separate file to keep things organized when I’m done).

document.getElementById('hamburgerToggle').addEventListener('click', toggleHamburger);
function toggleHamburger() {
  var p = document.getElementById('mobileMenu');
  if ( p.style.display ==='block'){
	  p.style.display ='none';
	  p.style.opacity = 0;
  }
	else { p.style.display = 'block';
		p.style.opacity = 1;
	   }}

This will make the mobile menu change from display:none; to display: block when the hamburger button is pressed. Making my mobile menu open and close. Everything seems to be working, all that is left is maybe add some transitions to make ‘feel’ better’ instant of an instant click. Also I might replace the hamburger menu when clicked to an X so it’s more understood that re clicking it takes the menu away.

I worked today, so probably won’t be today that that happens, better off writing content now that is seems to be working. I should probably make a homepage as well.