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:



        <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">
                                            <b class="caret"></b>
                                        <ul class="dropdown-menu">
                                          <li><a href="#">Web Portfolio</a></li>
                                          <li><a href="#">Marketing Portfolio</a></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>


      <script src="js/jquery.js"></script>
      <!-- Bootstrap javascript -->
      <script src="js/bootstrap.min.js"></script>

All I have is a grey navigation. This is my 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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.