title: Hamburger Menu on desktop website (with small size icon) for full width and height dropdown on toggle click (Bootstrap 4)
body: <p>I am having difficulty to make my hamburger menu to display a full width and height on toggle button click. I am trying to create a hamburger with small icons positioned left of the screen which when clicked displays a full width and height (transparent) and position the navitems horizontally. </p>
  
  <p>The image of the Hamburger Menu. I only want the icon (the one with white border) displayed without container. </p>
  
  <p><a href="https://i.stack.imgur.com/uEIHe.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uEIHe.jpg" alt="enter image description here"></a> </p>
  
  <p>When this icon is clicked, it displays </p>
  
  <p><a href="https://i.stack.imgur.com/xGtVy.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xGtVy.jpg" alt="enter image description here"></a></p>
  
  <p>I don't want to display something like this, I want a full width and height with navitems displayed horizontally, also with respective icons. As follow; </p>
  
  <p><a href="https://i.stack.imgur.com/fFjdW.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fFjdW.jpg" alt="enter image description here"></a></p>
  
  <p>Header.php </p>
  
  <pre><code>if ( ! defined( 'ABSPATH' ) ) {
      exit; // Exit if accessed directly.
  }
  
  $container = get_theme_mod( 'understrap_container_type' );
  ?&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html &lt;?php language_attributes(); ?&gt;&gt;
  &lt;head&gt;
      &lt;meta charset="&lt;?php bloginfo( 'charset' ); ?&gt;"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
      &lt;link rel="profile" href="http://gmpg.org/xfn/11"&gt;
  
      &lt;?php wp_head(); ?&gt;
  &lt;/head&gt;
  
  &lt;body &lt;?php body_class(); ?&gt;&gt;
  &lt;?php do_action( 'wp_body_open' ); ?&gt;
  &lt;div class="site" id="page"&gt;
  
      &lt;!-- ******************* The Navbar Area ******************* --&gt;
      &lt;div id="wrapper-navbar" itemscope itemtype="http://schema.org/WebSite"&gt;
  
          &lt;a class="skip-link sr-only sr-only-focusable" href="#content"&gt;&lt;?php esc_html_e( 'Skip to content', 'understrap' ); ?&gt;&lt;/a&gt;
  
          &lt;nav class="navbar  navbar-dark bg-primary"&gt;
  
          &lt;?php if ( 'container' == $container ) : ?&gt;
              &lt;div class="container"&gt;
          &lt;?php endif; ?&gt;
  
                  &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="&lt;?php esc_attr_e( 'Toggle navigation', 'understrap' ); ?&gt;"&gt;
                      &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
                  &lt;/button&gt;
  
                  &lt;!-- The WordPress Menu goes here --&gt;
                  &lt;?php wp_nav_menu(
                      array(
                          'theme_location'  =&gt; 'primary',
                          'container_class' =&gt; 'collapse navbar-collapse',
                          'container_id'    =&gt; 'navbarNavDropdown',
                          'menu_class'      =&gt; 'navbar-nav ml-auto',
                          'fallback_cb'     =&gt; '',
                          'menu_id'         =&gt; 'main-menu',
                          'depth'           =&gt; 2,
                          'walker'          =&gt; new Understrap_WP_Bootstrap_Navwalker(),
                      )
                  ); ?&gt;
              &lt;?php if ( 'container' == $container ) : ?&gt;
              &lt;/div&gt;&lt;!-- .container --&gt;
              &lt;?php endif; ?&gt;
  
          &lt;/nav&gt;&lt;!-- .site-navigation --&gt;
          &lt;nav&gt;
              &lt;!-- Your site title as branding in the menu --&gt;
              &lt;?php if ( ! has_custom_logo() ) { ?&gt;
  
                  &lt;?php if ( is_front_page() &amp;&amp; is_home() ) : ?&gt;
  
                      &lt;h1 class="navbar-brand mb-0"&gt;&lt;a rel="home" href="&lt;?php echo esc_url( home_url( '/' ) ); ?&gt;" title="&lt;?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?&gt;" itemprop="url"&gt;&lt;?php bloginfo( 'name' ); ?&gt;&lt;/a&gt;&lt;/h1&gt;
  
                  &lt;?php else : ?&gt;
  
                      &lt;a class="navbar-brand" rel="home" href="&lt;?php echo esc_url( home_url( '/' ) ); ?&gt;" title="&lt;?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?&gt;" itemprop="url"&gt;&lt;?php bloginfo( 'name' ); ?&gt;&lt;/a&gt;
  
                  &lt;?php endif; ?&gt;
  
  
                  &lt;?php } else {
                  the_custom_logo();
                  } ?&gt;&lt;!-- end custom logo --&gt;
  
          &lt;/nav&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I just want to know which of the classes or ids that need to be tweaked. As I have tried everything possible, it is worsening the situation for me. </p>