CODEWITHSUNDEEP
javascripttwitter-bootstrap
David Mason
David Mason

Reputation: 157

Bootstrap Navbar Collapse Dropdown Menu

I am working on a Bootstrap Website with a dropdown box in the Navbar. When the Navbar is in collapse mode. The dropdown menu is not responding Does anyone know why this would happen

The website can be found at http://horizonarb.co.uk/index.html

The code is as follows;

Many thanks!

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Horizon Arboriculture</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Google Fonts -->
    <script src="js/googleFonts.js" type="text/javascript"></script>

    <link href='https://fonts.googleapis.com/css?family=Lobster+Two' rel='stylesheet' type='text/css'>

     <!-- Custom CSS -->
    <link href="css/custom.css" rel="stylesheet"></link>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="css/fontawesome/font-awesome.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

     <div class="navbar navbar-default navbar-static-top" style="margin-bottom: 0px;">

        <div class="container">

            <div class="navbar-header">

                <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <small>MENU</small>
                </button>

             <a href=""><img src="img/front/HorizonArb_Tree_Transparent.png" class="noResize"></a>

            </div> <!-- class="navbar-header" -->

            <div class="collapse navbar-collapse">

                <ul class="nav nav-pills navbar-right">

                    <li class="active"><a href="index.html">Home</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                          <li><a href="#">Crown Thinning</a></li>
                          <li><a href="#">Crown Lifting</a></li>
                          <li><a href="#">Crown Reduction</a></li>
                        </ul>
                    </li>
                    <li><a href="contact.php">Contact</a></li>

                </ul>

            </div> <!-- class="collapse navbar-collapse" -->

        </div> <!-- class="container" -->

      </div> <!--  class="navbar navbar-default" -->    



      <div class="container" id="topContainer">

        <div class="row">

            <div class="col-md-6 col-sm-6 col-sm-offset-3 col-md-offset-3 center marginTopThirty">

                <img src="img/front/HorizonArb_Transparent.png" width="70%">


            </div>







    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Upvotes: 3

Views: 3566

Answers (1)

Blazemonger
Blazemonger

Reputation: 92893

The dropdown is opening and closing, but it's hidden from view by the container. The following CSS should fix that:

.navbar-static-top .navbar-collapse.in {
    overflow-y: visible; /* Bootstrap default is "auto" */
}

Upvotes: 3

Related Questions