Hello,
I am in the middle of learning bootstrap and still trying to find a way to create a responsive boostrap nav for this website: Website
This is my code so far:
navigation.php
<body>
<div class="container" >
<div class="row" style="margin-top:10px;">
<div class="span6" style="border:1px solid #bbb;border-radius:10px;padding:10px 20px 10px 20px;margin:0 0 10px 0;">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Portfolio
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Web Portfolio</a></li>
<li><a href="#">Marketing Portfolio</a></li>
</ul>
</li>
<li class="divider-vertical"></li>
<li><a href="#">Services</a></li>
<li class="divider-vertical"></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery.js"></script>
<!-- Bootstrap javascript -->
<script src="js/bootstrap.min.js"></script>
</body>
All I have is a grey navigation. This is my custom.css
custom.css
.navbar-inner{height: 80px; background-color: brown;}
.divider-vertical{height: 80px;}
Only the nav bar height works! the rest doesn't.
Any clue how to create responsive bootrap nav just like the website link - the only difference is the website link is not responsive yet.
