Bootstrap 3, how to create a navbar with a brand image and two rows of links?
<p>I can't understand how to code this nav with bootstrap:</p>

<p><img src="https://i.stack.imgur.com/YuSee.png" alt="navbar"></p>

<p>As you can see it composed of a brand image on the left, some space and then the two rows that should fit the brand length and should also fit the window width.<br>
I did this but it doesn't work fine. When i resize the window sometimes nav goes off of the window. </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;

&lt;nav class="navbar navbar-default"&gt;
  &lt;div class="container-fluid" id="nav"&gt;
    &lt;div class="row"&gt;
      &lt;div class="navbar-header"&gt; &lt;a href="#"&gt;&lt;img src="~/Images/logo.png" class="logo" width="308" height="130" alt="" style="float:left; margin-left:20px;margin-right:100px;"&gt;&lt;/a&gt; &lt;/div&gt;
      &lt;ul class="nav navbar-nav"&gt;
        &lt;li class="active"&gt;Link&lt;/li&gt;
        &lt;li&gt;Link&lt;/li&gt;
        &lt;li&gt;Link&lt;/li&gt;
        &lt;li&gt;Link&lt;/li&gt;
      &lt;/ul&gt;
      &lt;ul class="nav navbar-nav"&gt;
        &lt;li&gt;Link&lt;/li&gt;
        &lt;li&gt;Link&lt;/li&gt;
        &lt;li&gt;Link&lt;/li&gt;
        &lt;li&gt;Link&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/nav&gt;</code></pre>
</div>
</div>
</p>