Navbar issue in Bootstrap 3.0

Navbar issue in Bootstrap 3.0

I want to create a collapsable, floating navbar to the right hand side of
the Jumbotron in my page. I am using Bootstrap 3.0.
My navbar collapses but the site name disappears when the navbar
collapses. Also the navbar is pinned to the top of my screen rather than
on the right hand side. What am I doing wrong? Thanks for the help.
<section>
<div class="navbar">
<nav class="navbar navbar-inverse" role="navigation">
<a class="navbar-brand" href="index.html">DD Portfolio</a>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</section>
<div class="jumbotron">
<div class="container">
<h1>Who Am I?</h1>
<p>I am a student and content writer</p>
<p><a href="#" class="btn btn-primary btn-large">Learn
More</a></p>
</div>
</div>
</div>