language options using bootstrap dropdown

datacenterlight/static/datacenterlight/css/landing-page.css

@@ -161,37 +161,59 @@ h6 {
 
 }
 .nav-language .drop-language{
-    position: absolute;
+    /*position: absolute;*/
     top: 45px;
-    left: -8px;
-    background: #fff;
+    left: auto !important;
+    /*     background: #fff; */
     width: 100px;
+    min-width: 100px;
     height: 40px;
     padding: 9px 10px;
     -webkit-box-shadow: -8px 13px 31px -8px rgba(77,77,77,1);
     -moz-box-shadow: -8px 13px 31px -8px rgba(77,77,77,1);
     box-shadow: -8px 13px 31px -8px rgba(77,77,77,1);
-    display: none;
+    /*display: none;*/
     z-index: 100;
     /* margin-left: 10px; */
     text-align: center;
     border-radius: 4px;
 }
+
+.nav-language .open .drop-language{
+	width: 100px;
+	min-width: 100px;
+}
+
 .nav-language .drop-language a{
    cursor: pointer;
+   padding: 5px 10px !important;
    font-family: 'Lato-Light', sans-serif;
 }
+
+/* Show the dropdown menu on hover */
+@media (min-width: 769px) {
+	.nav-language .dropdown:hover .dropdown-menu {
+		display: block;
+	}
+}
+@media (max-width: 767px){
+	.nav-language .open .dropdown-menu>li>a {
+    	line-height: 1.42857143;
+	}
+}
+
 .navbar-transparent .nav-language .drop-language{
     background: transparent;
     border: 1px solid #fff;
 }
 .navbar-transparent .nav-language .drop-language a{
     color: #fff;
+    padding: 5px 10px !important;
     font-family: 'Lato-Light', sans-serif;
 }
-.nav-language:hover .drop-language{
+/* .nav-language:hover .drop-language{
     display: block;
-}
+} */
 .intro-header {
     height: 100vh;
     text-align: center;
@@ -1025,7 +1047,7 @@ line-height: 40px;
         color: #777;
     }
     .nav-language:hover{
-        height: 80px;
+        /*height: 80px;*/
     }
     .navbar-transparent .nav-language .select-language {
         color: #777;

datacenterlight/templates/datacenterlight/includes/_navbar.html

@@ -18,7 +18,7 @@
                    <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>
   <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><!-- Start Navbar collapse-->
     <ul class="nav navbar-nav navbar-right">
@@ -30,7 +30,7 @@
 				<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>  
+			</ul>
            </li>
 			<li>
 				<a class="url" href="{% url 'datacenterlight:index' %}/whydatacenterlight" >{% trans "Why Data Center Light?" %}</a>
@@ -40,24 +40,25 @@
 			</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 onclick="return true" 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 class="dropdown">
+          <div class="dropdown-toggle select-language" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+    				{% if LANGUAGE_CODE == 'en-us'%}
+      				<span>English</span>
+    				{% else %}
+      				<span>Deutsch</span>
+    				{% endif %}
+    				<i class="fa fa-globe" aria-hidden="true"></i>
+  				</div>
+          <ul class="dropdown-menu drop-language dropdown-menu-right">
+  		      {% if LANGUAGE_CODE == 'en-us'%}
+              <li><a class="url" href="{% change_lang 'de' %}">Deutsch</a></li>
+  		      {% else %}
+      				<li><a class="url" href="{% change_lang 'en-us' %}" >English</a></li>
+            {% endif %}
+  				</ul>
+        </div>
 			</li>
-        </ul>
+    </ul>
   </div><!-- /.navbar-collapse -->
   </div>
   </div>