wp-bootstrap-navwalker changing the screensize of when dropdown is activated

Question

I'm using bootstrap nav walker to build my navigation however, it does not show the drop down on landscape mobile devices ive looked at othe questions and took the advice of changing .navbar-expand-md to either navbar-expand{-xl|-lg|-md|-sm} and nothing is changing

<div class="navigation">
    <nav class="navbar navbar-expand-md navbar-light bg-light " role="navigation">
        <div class="container">
            <div class="col-md-3 col-sm-12" style="text-align: center">
                <a class="navbar-brand" href="<?php bloginfo('url')?>">
                    <?php// bloginfo('name')?>
                        <?php echo the_custom_logo(); ?>
                </a>
            </div>
            <div class="col-md-9 col-sm-12 center-align">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="<?php esc_attr_e( 'Toggle navigation', 'your-theme-slug' ); ?>"> <span class="navbar-toggler-icon glyphicon glyphicon-align-justify"></span> </button>
                <?php
            wp_nav_menu( array(
                'theme_location'    => 'main_menu',
                'depth'             => 2,
                'container'         => 'div',
                'container_class'   => 'collapse navbar-collapse',
                'container_id'      => 'bs-example-navbar-collapse-1',
                'menu_class'        => 'nav navbar-nav',
                'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
                'walker'            => new WP_Bootstrap_Navwalker(),
            ) );
            ?>
            </div>
        </div>
    </nav>
</div>

thats my navigation

here is a link to my site so you can see for yourself

http://live.homesmartenergy.co.uk/