0

I'm using the Understrap theme for Wordpress and looking to modify the default menu on mobile when the user clicks the hamburger menu.

Essentially I am trying to get the menu to fully overlay the screen. Hoping someone can help. I thought there might be a bootstrap4 class to achieve this.

 <?php
/**
 * The header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="content">
 *
 * @package understrap
 */

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(); ?>>

<div class="site" id="page">
    <!-- Main Header Above Nav -->
    <section class="main-header container-fluid">
        <header class="container">
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                <!-- 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 -->                
            </div>
            <div class="col-lg-3 col-md-3 hidden-sm-down">

            </div>
            <div class="col-lg-3 col-md-3 hidden-sm-down">

            </div>
        </header>
    </section>
    <!-- ******************* 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-expand-md 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 -->

    </div><!-- #wrapper-navbar end -->
Improve this question
2
  • I think your problem is with css, not wordpress
    – Vishwa
    Commented May 10, 2019 at 8:42
  • That doesn't really help. Obviously it's not a wordpress issue primarily it's essentially a css / js combo issue. But given that boostrap integration with WP uses nav walker overrides im trying to wrap my head around getting this to work. So was looking for some "useful" guidance and not stating the obvious.
    – Nick
    Commented May 10, 2019 at 10:03

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.