Mobile Navigation Toggle: The HTML

header.php

<?php if(!is_mobile()) { ?>
  
    <nav id="navigation" class="site-navigation" role="navigation">
      <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
    </nav><!-- #site-navigation -->
    
<?php } else { ?>
  
    <!-- Start mobile nav menu -->
    <nav class="mobile-dropdown">
    	<a href="#" data-dropdown="#dropdown-1" class="mobile-nav"><span class="mobile-tab pictogram">&#9776;</span></a>
    </nav><!-- .mobile-dropdown -->
  
    <section id="dropdown-1" class="dropdown">
    	<ul class="dropdown-menu">
    		<li class="menu-item mobile"><a href="#">News</a></li>
    		<li class="menu-item mobile"><a href="#">Snippets</a></li>
        		<li class="menu-item sub-menu-item mobile"><a href="#">CSS</a></li>
      			<li class="menu-item sub-menu-item mobile"><a href="#">HTML</a></li>
	    		<li class="menu-item sub-menu-item mobile"><a href="#">jQuery</a></li>
	    		<li class="menu-item sub-menu-item mobile"><a href="#">PHP</a></li>
	    		<li class="menu-item sub-menu-item mobile"><a href="#">WordPress</a></li>
    		<li class="menu-item mobile"><a href="#">Inspiration</a></li>
        	<li class="menu-item mobile"><a href="#">Tools</a></li>
    		<li class="menu-item mobile"><a href="#">Tutorials</a></li>
    	</ul>
    </section><!-- .dropdown-menu -->
    
<?php } ?>