Bootstrap+WordPress nav: Center both links and brand

I’m using Bootstrap on a WordPress template and I want to center the content of my navigation. I’m using the standard bootstrap nav.

I’ve succeeded in centering the links, but the brand absolutely refuses to move. I do want the brand to stay outside of the link list so it remains visible on mobile phones.

I know there’s plenty of questions about centering bootstrap navs already but none seem to deal with both the brand and the regular links. In time the text brand will be replaced by an image. Can anyone show me how to center both? Thanks in advance.

Kind regards,

Stef

Here’s the html/php

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
    <div class="container">
<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
<a class="navbar-brand" href="#top">Blue Iguana</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
    <?php
    wp_nav_menu( array(
        'theme_location' => 'top_menu',
        'depth' => 2,
        'container' => false,
        'menu_class' => 'nav navbar-nav',
        'fallback_cb' => 'wp_page_menu',
        //Process nav menu using our custom nav walker
        'walker' => new wp_bootstrap_navwalker())
    );
    ?>
</div><!-- /.navbar-collapse --> 

And here’s the CSS

@media (min-width: 768px) {
.navbar .navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: top;
}

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

.navbar-brand {}}