Hamburger Menu on desktop website (with small size icon) for full width and height dropdown on toggle click (Bootstrap 4)

144
September 06, 2019, at 5:50 PM

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.

The image of the Hamburger Menu. I only want the icon (the one with white border) displayed without container.

When this icon is clicked, it displays

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;

Header.php

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly.
}
$container = get_theme_mod( 'understrap_container_type' );
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php do_action( 'wp_body_open' ); ?>
<div class="site" id="page">
    <!-- ******************* The Navbar Area ******************* -->
    <div id="wrapper-navbar" itemscope itemtype="http://schema.org/WebSite">
        <a class="skip-link sr-only sr-only-focusable" href="#content"><?php esc_html_e( 'Skip to content', 'understrap' ); ?></a>
        <nav class="navbar  navbar-dark bg-primary">
        <?php if ( 'container' == $container ) : ?>
            <div class="container">
        <?php endif; ?>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="<?php esc_attr_e( 'Toggle navigation', 'understrap' ); ?>">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <!-- The WordPress Menu goes here -->
                <?php wp_nav_menu(
                    array(
                        'theme_location'  => 'primary',
                        'container_class' => 'collapse navbar-collapse',
                        'container_id'    => 'navbarNavDropdown',
                        'menu_class'      => 'navbar-nav ml-auto',
                        'fallback_cb'     => '',
                        'menu_id'         => 'main-menu',
                        'depth'           => 2,
                        'walker'          => new Understrap_WP_Bootstrap_Navwalker(),
                    )
                ); ?>
            <?php if ( 'container' == $container ) : ?>
            </div><!-- .container -->
            <?php endif; ?>
        </nav><!-- .site-navigation -->
        <nav>
            <!-- Your site title as branding in the menu -->
            <?php if ( ! has_custom_logo() ) { ?>
                <?php if ( is_front_page() && is_home() ) : ?>
                    <h1 class="navbar-brand mb-0"><a rel="home" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" itemprop="url"><?php bloginfo( 'name' ); ?></a></h1>
                <?php else : ?>
                    <a class="navbar-brand" rel="home" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" itemprop="url"><?php bloginfo( 'name' ); ?></a>
                <?php endif; ?>

                <?php } else {
                the_custom_logo();
                } ?><!-- end custom logo -->
        </nav>
    </div>

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.

Answer 1

'menu_class' => 'navbar-nav ml-auto',

Try to change this class to container to get full width

Rent Charter Buses Company
READ ALSO
Loading strings from external source in Javascript list

Loading strings from external source in Javascript list

I'm looking for the proper way to load strings into Javascript code

145
Get the SQL Server data table data into MySQL table in real time

Get the SQL Server data table data into MySQL table in real time

I want to get the SQL Server data table data and need to insert MySQL data table in every dayCan suggest best way to do this task?

119
need help! how to fix date and time format after upload data excel to mysql with codeigniter (use PHPExcel library) [on hold]

need help! how to fix date and time format after upload data excel to mysql with codeigniter (use PHPExcel library) [on hold]

i want to import data from excel to codeigniter, using PHPExcel Library but the problem is type data in excel "date" and "time" its different , after i upload,mysql read the data like 0000-00-00 or 1970-01-01, how to fix it ?

208