I am currently working on creating a navigation bar with logo following two different layouts. The first layout should be centered vertically and look like this on desktop: Desktop Layout
For mobile devices, the layout should resemble this design: Mobile Layout
To achieve this, I have written the following code snippets:
<div class="row">
<div class="col-md-3">
<a href="#" class="pull-left">
<img src="image/logo.png" height="300px" id="logo" class="img-responsive">
</a>
</div>
<div class="col-md-9">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#example-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Search</a></li>
<li><a href="#">Archives</a></li>
<li><a href="#">Education</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
</nav>
</div>
</div>
Although the code is functional, I am facing issues with centering the navbar vertically and positioning the logo correctly on mobile view. Any suggestions on how to achieve these layouts would be greatly appreciated! :)