I am new to using Bootstrap and I am trying to center the navbar both horizontally and vertically. I want it to look like this https://i.sstatic.net/gqwg9.png, but I am having trouble figuring it out.
This is my HTML code:
<html>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="nav">
<ul class="nav navbar-nav">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#pages">Pages</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#mega-menu">Mega menu</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
and here is the CSS I have used:
nav {
color: #fff;
height: 112px;
text-transform: uppercase;
font-size: 15px;
font-weight: bold;
}