CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
GXCPL.Official
GXCPL.Official

Reputation: 279

Dropdown Not Working - Bootstrap

This is my simple HTML code:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>.:Home Page:. The Indian Sentinel</title>
        <link rel="stylesheet" href="assets/css/bootstrap/bootstrap.css" type="text/css" />
        <link rel="stylesheet" href="assets/css/fontawesome/font-awesome.css" type="text/css" />
        <link rel="stylesheet" href="assets/css/genxcoders.css" type="text/css" />
    </head>

    <body>

        <!-- Top Bar -->
        <div class="top-bar">
            <div class="top-bar-content">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-6">
                            <script>
                                <!-- Current Date -->
                                var mydate=new Date()
                                var year=mydate.getYear()
                                if (year < 1000)
                                    year+=1900
                                var day=mydate.getDay()
                                var month=mydate.getMonth()
                                var daym=mydate.getDate()
                                if (daym<10)
                                    daym="0"+daym
                                var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
                                var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
                            document.write(dayarray[day]+", "+montharray[month]+" "+daym+", "+year)
                                <!-- Current Date -->
                            </script>
                        </div>
                        <div class="col-md-6">
                            <ul class="login">
                                <a class="login-anchor" href="#"><li><i class="fa fa-user"></i> Sign In</li></a>
                                <a class="login-anchor" href="#"><li><i class="fa fa-edit"></i> Register</li></a>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Top Bar -->

        <div class="ptop-20"></div>

        <!-- Header -->
        <div class="header">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-4">
                        <img src="assets/images/logo/header-logo.png" class="header-logo" />
                    </div>
                    <div class="col-md-8">
                        <img src="assets/images/advt/header850x120.png" class="header-advt" />
                    </div>
                </div>
            </div>
        </div>
        <!-- Header -->

        <div class="ptop-30"></div>

        <!-- Navbar -->
        <nav class="navbar navbar-default navbar-static-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand hidden-md hidden-lg" href="#">Project name</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#about">About</a></li>
                        <li><a href="#contact">Contact</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li class="dropdown-header">Nav header</li>
                                <li><a href="#">Separated link</a></li>
                                <li><a href="#">One more separated link</a></li>
                            </ul>
                        </li>
                    </ul>
                </div><!--/.nav-collapse -->
            </div>
        </nav>
        <!-- Navbar -->

        <!-- Script -->
        <script src="assets/js/jquery213.min.js" type="text/javacript"></script>
        <script src="assets/js/bootstrap/bootstrap.js" type="text/javascript"></script>
        <script>
            <!-- Navbar Scroll to Top and Fix -->

            <!-- Navbar Scroll to Top and Fix -->
        </script>
        <!-- Script -->

    </body>
</html>

This is the CSS for the user-defined classes:

/*@import url('https://fonts.googleapis.com/css?family=Raleway');*/
@charset "utf-8";

body {
    margin: 0px;
    padding: 0px;
    font-family: 'Raleway', sans-serif;
    line-height: 16px;
    color: #212121;
    height: 1500px;
}

/* Spacing */
.ptop-5 {
    padding-top: 5px;
}
.ptop-10 {
    padding-top: 10px;
}
.ptop-20 {
    padding-top: 20px;
}
.ptop-30 {
    padding-top: 30px;
}
.ptop-40 {
    padding-top: 40px;
}
.ptop-50 {
    padding-top: 50px;
}
/* Spacing */

/* Containers */
.top-bar {
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: #3498db;
}
.header {
    width: 100%;
    min-height: 1%;
    overflow: hidden;
}
/* Containers */

/* Top-Bar */
.top-bar > .top-bar-content {
    width: 90%;
    height: auto;
    margin: 0px auto;
    line-height: inherit;
    color: #ffffff;
}

/* Login */
ul.login {
    list-style: none;
    text-align: right;
    margin-left: -40px;
}
ul.login > a.login-anchor > li {
    text-decoration: none;
    display: inline-block;
    color: #ffffff;
    margin: 0px 10px;
    transition: all 0.3s ease;
}
ul.login > a.login-anchor:hover > li {
    color: rgba(33, 33, 33, 0.5);
    transition: all 0.3s ease;
}
/* Login */
/* Top-Bar */

/* Header */
img.header-logo {
    width: 400px;
    margin: 0px auto;
    display: block; 
}
.header-advt {
    width: 98%;
}
/* Header */

/* Navbar */
.navbar-static-top {
    border-top-width: 1px;
    border-bottom-width: 1px;
}
/* Navbar */

/* Media Queries */
@media (min-width: 320px) and (max-width: 360px) {
    .top-bar {
        text-align: center !important;
        height: auto;
    }
    ul.login {
        text-align: center;
    }
    img.header-logo {
        width: 90%;
        margin-bottom: 20px;
    }
    img.header-advt {
        width: 95%;
        height: 60px;
        margin: 0px auto 20px;
        display: block;
    }
}
@media (min-width: 480px) and (max-width: 640px) {
    .top-bar {
        text-align: center !important;
        height: auto;
    }
    ul.login {
        text-align: center;
    }
    img.header-logo {
        width: 90%;
        margin-bottom: 20px;
    }
    img.header-advt {
        width: 90%;
        height: 60px;
        margin: 0px auto 20px;
        display: block;
    }
}
/* Media Queries */

The Bootstrap, Fontawesome and jQuery files are untouched. I have taken the code of the Navbar from the www.getbootstrap.com template.

The code form the bootstrap website has all the pre-requisite codes required for the basic functioning.

Now the problem is that the dropdown menu is not working. When i click it, it does not open up. Also, I want to be able to scroll the website, and once the navbar reaches the top it should stick there.

How do i achieve the following: 1. The dropdown functionality of the Navbar. 2. The sticking of the Navbar on top of the browser on scrolling.

Any help would be appreciated.

P.S.: I have done it a 1000+ times but am unable to get my head into where i am going wrong. Am all stuck on the code, I guess its too much work pressure that is blocking my thoughts.

Upvotes: 0

Views: 4801

Answers (3)

J. Doe
J. Doe

Reputation: 101

In my case it was a mismatch between bootstrap versions. In my header file I had the following:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Notice the different bootstrap versions, one version is 3.3.6 and the other is 3.3.7. All it took was changing 3.3.6 to 3.3.7 and my dropdowns started working again.

Upvotes: 2

Joel Harkes
Joel Harkes

Reputation: 11661

You must have overwritten your bootstrap css somewhere.

because when i click on the button i see the class open appear on dropdown.

I added the following css to fix the dropdown menu:

.dropdown > .dropdown-menu {
  display: none; //hides .dropdown-menu directly inside .dropdown
}
.dropdown.open > .dropdown-menu {
  display: block; //shows .dropdown-menu directly inside .dropdown if it has class .open
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a>
    </li>
    <li><a href="#">Another action</a>
    </li>
    <li><a href="#">Something else here</a>
    </li>
    <li role="separator" class="divider"></li>
    <li class="dropdown-header">Nav header</li>
    <li><a href="#">Separated link</a>
    </li>
    <li><a href="#">One more separated link</a>
    </li>
  </ul>
</li>

Upvotes: 4

SahnaS
SahnaS

Reputation: 89

You would try to load jquery before boostrap.js

try this : 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

And see if it works

Upvotes: 3

Related Questions