Fixed navbar dropdown that works for mobile device

This commit is contained in:
Mondi Geetha 2017-06-30 01:28:29 +05:30
parent 8754850ac9
commit 94a69a4836

View file

@ -1,8 +1,8 @@
{% load staticfiles i18n%} {% load staticfiles i18n%}
{% get_current_language as LANGUAGE_CODE %} {% get_current_language as LANGUAGE_CODE %}
{% load custom_tags %} {% load custom_tags %}
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation"> <nav class="navbar navbar-default navbar-fixed-top topnav">
<div class="topnav"> <div class="topnav">
<!-- Brand and toggle get grouped for better mobile display --> <!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
@ -18,20 +18,20 @@
<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="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> <a href="{% url 'datacenterlight:index' %}" id="logoWhite" class="navbar-brand topnav url"><img src="{% static 'datacenterlight/img/logo_white.svg' %}"></a>
{% endif %} {% endif %}
</div> </div>
<!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><!-- Start Navbar collapse-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right">
{% if request.resolver_match.url_name == "index" or request.resolver_match.url_name == "whydatacenterlight" %} {% if request.resolver_match.url_name == "index" or request.resolver_match.url_name == "whydatacenterlight" %}
<li class="dropdown"> <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> <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"> <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' %}#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' %}#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> <li> <a class="url" href="{% url 'datacenterlight:index' %}#price" data-url="#price" >{% trans "Order VM" %}</a></li>
</ul> </ul>
</li> </li>
<li> <li>
<a class="url" href="{% url 'datacenterlight:index' %}/whydatacenterlight" >{% trans "Why Data Center Light?" %}</a> <a class="url" href="{% url 'datacenterlight:index' %}/whydatacenterlight" >{% trans "Why Data Center Light?" %}</a>
</li> </li>
@ -58,10 +58,7 @@
</li> </li>
</ul> </ul>
</div><!-- /.navbar-collapse -->
</div> </div>
<!-- /.navbar-collapse -->
</div> </div>
<!-- /.container --> </nav>
</nav>