Two-part Bootstrap navigation menu with logo in the center

[admin]

I am making a dynamic wordpress links in navigation bar using nav_walker. How can i implement center something like this in wordpress nav_walker:

+-----------------------------+-----------+------------------------------+
+---------------HOME--ABOUT---|-LOGO HERE-|---CONTACT--PROFILE-----------+
+-----------------------------+-----------+------------------------------+

How can i do that or something provide me jsfiddle to come up with that please.
Is it two nav_walker function for left and right navigation? how can i insert the navbar brand in center? can anyone give me structure. thanks.

my code:

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>

    <div class="navbar-brand navbar-center">

    </div>

    <?php wp_nav_menu(array(
        'menu'           => 'primary-1',
        'theme_location' => 'primary-1',
        'depth'          => 2,
        'container'      => 'div',
        'container_class'   => 'collapse navbar-collapse navbar-center',
        'container_id'      => 'bs-example-navbar-collapse-1',
        'menu_class'        => 'nav navbar-nav',
        'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
        'walker'            => new wp_bootstrap_navwalker()
        )); 
    ?>
</nav>