Logo and menu items on different lines in the yamm menu

Question

I am trying to use the bootstrapjs yaml menu. How to pretend that the logo and the imaginary element fall into two lines when resizing the browser window? I want the upper right corner of the hamburger to appear earlier, while I resize the window to narrow.

<header>
    <nav class="navbar yamm navbar-fixed-top headerBg headerText" id="heading">
        <style>@media (min-width: 767px) { .dropdown:hover .dropdown-menu { display: block; } }</style>
        <div class="container">
            <div class="navbar-header">
                <button type="button" data-toggle="collapse" data-target="#navbar-collapse-1" class="navbar-toggle">
                    <span class="icon-bar" style="height:3px;"></span>
                    <span class="icon-bar" style="height:3px"></span>
                    <span class="icon-bar" style="height:3px"></span>
                </button>
                <a href="#" class="navbar-brand">
                    <div style="background: transparent url('img/logo.png') no-repeat scroll center center;background-size: contain;width:100px;height:25px;"></div>
                </a>
            </div>
            <div id="navbar-collapse-1" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <?php for($i = 1; $i < 12; $i++):?>
                    <li class="dropdown">
                        <a href="#" class="headerText">Item <?php echo $i;?></a>
                    </li>
                    <?php endfor;?>
                </ul>
            </div>
        </div>
    </nav>
</header>

thanks

Answer 1

It seems you need a little CSS to manage this, it might look something like this.

@media only screen and (min-width: MORE_EARLIER_PIXELS) {
     .dropdown-menu, .navbar-collapse.in {
         display: block; 
    }

    .navbar-collapse{
       display:none; 
    }
}