JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<div  id="nav" class="navigation" data-spy="affix" data-offset-top="250">
        <div class="row">
            <div class="pull-left">
                <img src="img/logo.png" height="50px" width="160px">
            </div>
            <div class="menu pull-right">
                <a href="#"><i class="glyphicon glyphicon-user"></i> User</a>
                <ul id="dropdown">
                    <li><a href="#"><i class="glyphicon glyphicon-cog"></i> Settings</a></li>
                    <li><a href="#"><i class="glyphicon glyphicon-log-out"></i> Logout</a></li>
                </ul>
            </div>
        </div>
        <hr>
   </div>
            
            
            <div style="height: 2000px;"></div>

CSS

.navigation {
	background: #fff;
	position: relative;
    width: 100%;
}
.navigation .row {
	margin: 0;
}
.navigation img {
	margin: 10px 0 10px 10px;
}
#nav.affix {
    position: fixed;
    top: 0;
	/*left: 10px;*/
    z-index: 1030;
    /*width: 100%;*/
    /*padding-bottom: 10px;*/
    /*-webkit-transition: all 0.5s ease-in;*/
}
.menu {
	margin-top: 20px;
	font-size: 16px;
}
.menu > a {
	text-decoration: none;
	z-index: 1000;
	margin-right: 50px;
	color: #428BCA;
	line-height: 30px;
}

.menu ul li {
	width: 140px;
	line-height: 30px;
}
.menu ul li a {
	text-decoration: none;
	clear: both;
	white-space: nowrap;
	margin: 0;
	display: block;
	width: 100%;
	text-align: left;
	padding-left: 20px;
	padding-right: 20px;
}
hr {
	margin: 0px;
}
.menu > ul {
	list-style: none;
	position: absolute;
	margin: 0;
	z-index: 1000;
	margin-top: 10px;
	padding: 0;
	right: 50px;
	visibility: hidden;
	opacity: 0;
	transition: visibility 0.5s ease-in, opacity 0.5s ease-in;
	-webkit-transition: visibility 0.5s ease-in, opacity 0.5s ease-in;
	-moz-transition: visibility 0.5s ease-in, opacity 0.5s ease-in;
	-ms-transition: visibility 0.5s ease-in, opacity 0.5s ease-in;
	-o-transition: visibility 0.5s ease-in, opacity 0.5s ease-in;
}
.menu:hover a + ul {
	visibility: visible;
	opacity: 1;
	transition: visibility 0.5s ease-in, opacity 0.5s ease-in;
	-webkit-transition: visibility 0.5s ease-in, opacity 0.5s ease-in;
	-moz-transition: visibility 0.5s ease-in, opacity 0.5s ease-in;
	-ms-transition: visibility 0.5s ease-in, opacity 0.5s ease-in;
	-o-transition: visibility 0.5s ease-in, opacity 0.5s ease-in;
}
ul > li > a:hover {
	background: #e0e0e0;
	color: #C90000;
}
#dropdown {
	background: #fff;
	border: solid 1px #e0e0e0;
	box-shadow: 2px 2px 1px #888888;
}

JavaScript

$(document).ready(function() {
	$('#navr').affix();
});