Hey there, I've been experimenting with creating a responsive menu using Bootstrap, but I'm struggling with the implementation.
My vision is to have a logo on the left side and a menu on the right side.
Below is the concept for my menu design. Take a look,
https://i.sstatic.net/9xb2T.png
Do you think it's achievable to create a menu similar to the image above using Bootstrap?
I've tried out the following code snippet:
<div class="menu">
<div class="container">
<div class="row">
<div class="col-sm-3 vcenter">
<p><img src="<?php echo base_url("assets/images/logo.png"); ?>" alt="Logo" /></p>
</div>
<div class="col-sm-9 vcenter">
<nav role="navigation" class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>