<nav class="navbar navbar-expand-lg navbar-light">

                        <?php
                        $custom_logo_id = get_theme_mod('custom_logo');
                        $image = wp_get_attachment_image_src($custom_logo_id, 'full');
                        ?>

                        <a class="navbar-brand" href="<?php echo esc_url(home_url('/')); ?>">
                            <img src="<?= $image[0]; ?>" class="img-fluid" alt="">
                        </a>
                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>

                        <!-- The WordPress Primary Menu -->
                        <?php wp_nav_menu(
                            array(
                                'theme_location'    => 'primary',
                                'menu_class'        => 'navbar-nav ml-auto w-100 justify-content-end',
                                'container_class'  => 'collapse navbar-collapse',
                                'container_id'    => 'navbarNav',
                            )
                        ); ?>

                    </nav>
/*css*/

.navbar{
    padding: 20px 0;
    z-index: 200;
}
.navbar-nav > li{
    padding-left:15px;
    padding-right:15px;
}
.navbar a{
    text-decoration: none;
    color: #fff;
    font-size: 16px;
}
.menu-item .active{
    color: #74b9ff;
}

.navbar span.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
    color: white;
}

.navbar .navbar-collapse {
    text-align: center;
}