CODEWITHSUNDEEP
javascriptcsstwitter-bootstrap
Ray Cheng
Ray Cheng

Reputation: 12576

Collapsible navigation bar issues

I'm trying to create a navigation bar similar to Bootstrap. If you go to their site and re-size your browser. if you re-size it narrow enough, the top navigation bar will become a button. when you click on the button, it pushes everything down and displays the full navigation again.

That's what I'm trying to accomplish with this jsfiddle, but it has the following issues:

  1. initially, the button is not hidden, it should be hidden and only be visible when the screen gets too narrow.
  2. (fixed) the button doesn't display background like bootstrap does
  3. (fixed) re-size browser to make navigation disappear and click on the button. then click on sub menu, the sub menu items does not display well.

issue 1 screen prints:

nav bar should not be visible yet because browser width is larger than 940px nav bar should not be visible yet because browser width is larger than 940px

nav bar appears, it's fine because browser width is less than 940px nav bar appears, it's fine because browser width is less than 940px

full html code:

<html lang="en">
<head>
    <title></title>

    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet" />


    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {    
        });
    </script>
</head>
<body>
    <div class="conatiner-fluid">
        <div class="row-fluid">
            <div class="span10">

                <a class="btn btn-navbar" data-toggle="collapse"
                    data-target=".nav-collapse">
                    <span class="icon-bar"></span><span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>

                <div class="nav-collapse">
                    <ul class="nav nav-tabs">
                        <li><a href="#">Home</a></li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown"
                                href="#">Help<b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Keep</a></li>
                                <li><a href="#">Screaming</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>

            </div>
        </div>
        <div class="row-fluid">
            <div class="span10">
                other content
            </div>
        </div>
    </div>
</body>
</html>

Upvotes: 1

Views: 1076

Answers (1)

David Taiaroa
David Taiaroa

Reputation: 25483

Is this closer to what you are after?
http://jsfiddle.net/panchroma/R4BEY/

You have a span10 div in your example and I didn't know where you were heading with this so I added a span2 after it to complete the row.

The HTML is below. You had a typo on your opening container div, and you were missing the navbar and navbar-inner divs. I think that was it for the changes I made.

Good luck 

<div class="container-fluid"> 
<div class="row-fluid">
<div class="span10">

<div class="navbar">
<div class="navbar-inner">


<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
 </a>

 <div class="nav-collapse collapse ">
    <ul class="nav nav-tabs">
      <li><a href="#">Home</a></li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Help<b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
          <li><a href="#">Keep</a></li>
          <li><a href="#">Screaming</a></li>
        </ul>
      </li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div> <!-- end nav-collapse -->

 </div><!-- end nav bar inner -->  
 </div> <!-- end nav bar -->

</div><!--end span10 -->
<div class="span2">span 2</div>
</div><!-- end row -->


<div class="row-fluid">
<div class="span10">
  other content
</div>
<div class="span2">span 2</div>
</div>
</div>

Upvotes: 1

Related Questions