From 94a69a4836ee6f8c6bd0bb1233a8223a5651933a Mon Sep 17 00:00:00 2001
From: Mondi Geetha <mondi.geetha@gmail.com>
Date: Fri, 30 Jun 2017 01:28:29 +0530
Subject: [PATCH] Fixed navbar dropdown that works for mobile device

---
 .../datacenterlight/includes/_navbar.html     | 109 +++++++++---------
 1 file changed, 53 insertions(+), 56 deletions(-)

diff --git a/datacenterlight/templates/datacenterlight/includes/_navbar.html b/datacenterlight/templates/datacenterlight/includes/_navbar.html
index 239159f0..a62dc3a7 100644
--- a/datacenterlight/templates/datacenterlight/includes/_navbar.html
+++ b/datacenterlight/templates/datacenterlight/includes/_navbar.html
@@ -1,67 +1,64 @@
 {% load staticfiles i18n%}
 {% get_current_language as LANGUAGE_CODE %}
 {% load custom_tags %}
-<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
-        <div class="topnav">
+<nav class="navbar navbar-default navbar-fixed-top topnav">
+<div class="topnav">
             <!-- Brand and toggle get grouped for better mobile display -->
-            <div class="navbar-header">
-                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
-                    <span class="sr-only">Toggle navigation</span>
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
-                </button>
-                {% if request.resolver_match.url_name == "index" or request.resolver_match.url_name == "whydatacenterlight" %}
+  <div class="navbar-header">
+    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+      <span class="sr-only">Toggle navigation</span>
+      <span class="icon-bar"></span>
+      <span class="icon-bar"></span>
+      <span class="icon-bar"></span>
+    </button>
+    {% if request.resolver_match.url_name == "index" or request.resolver_match.url_name == "whydatacenterlight" %}
                   <a href="{% url 'datacenterlight:index' %}" id="logoBlack" class="navbar-brand topnav url" data-url="#home"><img src="{% static 'datacenterlight/img/logo_black.svg' %}"></a>
                   <a href="{% url 'datacenterlight:index' %}" id="logoWhite" class="navbar-brand topnav url" data-url="#home"><img src="{% static 'datacenterlight/img/logo_white.svg' %}"></a>
                 {% else %}
                    <a href="{% url 'datacenterlight:index' %}" id="logoBlack" class="navbar-brand topnav url"><img src="{% static 'datacenterlight/img/logo_black.svg' %}"></a>
                     <a href="{% url 'datacenterlight:index' %}" id="logoWhite" class="navbar-brand topnav url"><img src="{% static 'datacenterlight/img/logo_white.svg' %}"></a>
                 {% endif %}
-            </div>
-            <!-- Collect the nav links, forms, and other content for toggling -->
-            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
-                <ul class="nav navbar-nav navbar-right">
-                	{% if request.resolver_match.url_name == "index" or request.resolver_match.url_name == "whydatacenterlight" %}
-                    <li class="dropdown">
-                        <a class="url dropdown-toggle" href="{% url 'datacenterlight:index' %}#how" data-url="#how" data-toggle="dropdown">{% trans "Highlights" %}  <b class="caret"></b></a>
-							<ul class="dropdown-menu">
-								<li><a class="url" href="{% url 'datacenterlight:index' %}#your" data-url="#your"  >{% trans "Scale out" %}</a></li>
-								<li><a class="url" href="{% url 'datacenterlight:index' %}#our" data-url="#our">{% trans "Reliable and light" %}</a></li>
-								<li> <a class="url" href="{% url 'datacenterlight:index' %}#price" data-url="#price" >{% trans "Order VM" %}</a></li>
-							 </ul>
-                    </li>
-                    
-                    <li>
-                        <a class="url" href="{% url 'datacenterlight:index' %}/whydatacenterlight" >{% trans "Why Data Center Light?" %}</a>
-                    </li>
-                    <li>
-                        <a class="url" href="{% url 'datacenterlight:index' %}#contact" data-url="#contact"  >{% trans "Contact" %}</a>
-                     </li>
-					       {% endif %}
-                    <li class="nav-language">
-                      <div class="select-language">
-                          {% if LANGUAGE_CODE == 'en-us'%} 
-                          <span>English</span>
-                          {% else %}
-                          <span>Deutsch</span>
-                          {% endif %}
-                          <i class="fa fa-globe" aria-hidden="true"></i>
-                      </div>
-                      <div class="drop-language">
-                          {% if LANGUAGE_CODE == 'en-us'%} 
-                              <a class="url" href="{% change_lang 'de' %}">Deutsch</a>
-                          {% else %}
-                              <a class="url" href="{% change_lang 'en-us' %}" >English</a>
-                          {% endif %}
-                      </div>
+    
+  </div>
+  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><!-- Start Navbar collapse-->
+    <ul class="nav navbar-nav navbar-right">
+		{% if request.resolver_match.url_name == "index" or request.resolver_match.url_name == "whydatacenterlight" %}
+           
+           <li class="dropdown">
+                <a class="dropdown-toggle move multiselect" href="#"  data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{% trans "Highlights" %}<span class="caret"></span></a>
+					<ul class="dropdown-menu">
+						<li><a class="url" href="{% url 'datacenterlight:index' %}#your" data-url="#your"  >{% trans "Scale out" %}</a></li>
+						<li><a class="url" href="{% url 'datacenterlight:index' %}#our" data-url="#our">{% trans "Reliable and light" %}</a></li>
+						<li> <a class="url" href="{% url 'datacenterlight:index' %}#price" data-url="#price" >{% trans "Order VM" %}</a></li>
+					</ul>  
+           </li>
+			<li>
+				<a class="url" href="{% url 'datacenterlight:index' %}/whydatacenterlight" >{% trans "Why Data Center Light?" %}</a>
+			</li>
+			<li>
+				<a class="url" href="{% url 'datacenterlight:index' %}#contact" data-url="#contact"  >{% trans "Contact" %}</a>
+			</li>
+			{% endif %}
+			<li class="nav-language">
+				<div class="select-language">
+				{% if LANGUAGE_CODE == 'en-us'%} 
+				<span>English</span>
+				{% else %}
+				<span>Deutsch</span>
+				{% endif %}
+				<i class="fa fa-globe" aria-hidden="true"></i>
+				</div>
+				<div class="drop-language">
+				{% if LANGUAGE_CODE == 'en-us'%} 
+				<a class="url" href="{% change_lang 'de' %}">Deutsch</a>
+				{% else %}
+				<a class="url" href="{% change_lang 'en-us' %}" >English</a>
+				{% endif %}
+				</div>
 
-                    </li>
-                </ul>
-
-
-            </div>
-            <!-- /.navbar-collapse -->
-        </div>
-        <!-- /.container -->
-    </nav>
+			</li>
+        </ul>
+  </div><!-- /.navbar-collapse -->
+  </div>
+  </div>
+</nav>