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.

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.