Fixed top navigation bar

by vinoli

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.structure.css">
<div class="alert alert-hide alert-success mb-0 text-center" role="alert">
  I'm going to disapear in 5000ms
</div>

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-content">
                <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 logo" href="#">
                <img src="http://placehold.it/100x46/00000&text=TEST">
            </a>
        </div><!-- /.navbar-header -->
        <div class="collapse navbar-collapse" id="navbar-content">
            <ul class="nav navbar-nav navbar-right">
                <li class="hidden">
                    <a href="#"></a>
                </li>
                <li class="active">
                    <a href="#">Link</a>
                </li>
                <li>
                    <a href="#">Link</a>
                </li>
                <li>
                    <a href="#">Link</a>
                </li>
                <li>
                    <a href="#">Link</a>
                </li>
            </ul>
        </div><!-- ./collapse -->
    </div><!-- /.container-fluid -->
</nav>

<br> 1 
<br> 2 
<br> 3 
<br> 4 
<br> 5 
<br> 6 
<br> 7 
<br> 8 
<br> 9 
<br> 10

CSS

body {
    padding-top: 50px;
}

.logo {
    padding: 2px 15px;
}
/*
.alert-serverB {
  border-radius: 0;
  position:fixed;
  top:0;
  width:100%;
  padding:10px 0;
  text-align:center;
  display:none;
}

.margin-top-0 { margin-top: 0px !important; }
.margin-top-20 { margin-top: 20px !important; }
.margin-top-40 { margin-top: 40px !important; }
*/

.alert {
  margin-top: 10px;
  transition: margin .5s ease-in-out;
}

.alert-hide {
  margin-top: -100px;
}


.body-alert {
  margin-top: 0px;
  transition: margin .5s ease-in-out;
}

.body-alert-hide {
  margin-top: 0px;
}

JavaScript

showAlert = function() {
  $('body').addClass('alert-show');
}

hideAlert = function() {
  $('body').removeClass('alert-show');
}

// auto show
setTimeout(function() {
  showAlert();
}, 1000);

// auto hide
setTimeout(function() {
  hideAlert();
}, 5000);