<div id="{{ aSurveyInfo.id.navbar }}" class="{{ aSurveyInfo.class.navbarcollapse }}" {{ aSurveyInfo.attr.navbarcollapse }} >
        <ul class="{{ aSurveyInfo.class.navbarlink }} navbar-right" {{ aSurveyInfo.attr.navbarlink }}>
 
           {{ include('./subviews/navigation/question_index_buttons.twig') }}
 
        </ul>
   </div>

<div class="row ">
        <!-- Extra button container -->
        <div class="col-xs-6 clearall-saveall-wrapper">
            {% if aSurveyInfo.aNavigator.load.show == "Y" or aSurveyInfo.aNavigator.save.show == "Y" %}
                {{ include('./subviews/navigation/save_buttons.twig') }}
            {% endif %}
            {% if aSurveyInfo.bShowClearAll == true %}
                {{ include('./subviews/navigation/clearall_buttons.twig') }}
            {% endif %}
        </div>
         <!-- Index container -->
        {% if (aSurveyInfo.aQuestionIndex.bShow == true) %}
            {{ include('./subviews/navigation/question_index_buttons.twig') }}
        {% endif %}
    </div>

{{ include('./subviews/navigation/question_index_menu.twig') }}

  {% if aSurveyInfo.format == 'G' %}
    <!-- Question index, group, {{ aSurveyInfo.aQuestionIndex.type }} -->
 
    <ul class="{{ aSurveyInfo.class.indexmenusgul }}" {{ aSurveyInfo.attr.indexmenusgul }}>
      {# TODO: move back this logic to SurveyRuntime, and provide a ready to use indexItem.statusClass #}
      {% for step, indexItem in aSurveyInfo.aQuestionIndex.items %}
        {% set statusClass = ''  %}
 
        {% if attribute(indexItem.stepStatus, 'index-item-unanswered') is defined and attribute(indexItem.stepStatus, 'index-item-unanswered') == true  %}
          {% set statusClass = statusClass ~ ' bg-warning'  %}
        {% endif %}
 
        {% if attribute(indexItem.stepStatus, 'index-item-error') is defined and attribute(indexItem.stepStatus, 'index-item-error') == true   %}
          {% set statusClass = statusClass ~ ' bg-danger'  %}
        {% endif %}
 
        {% if attribute(indexItem.stepStatus, 'index-item-current') is defined and attribute(indexItem.stepStatus, 'index-item-current') == true %}
          {% set statusClass = statusClass ~  ' disabled'  %}
        {% endif %}
 
 
        <li class="{{ indexItem.coreClass }} {{ statusClass }}"  {{ aSurveyInfo.attr.indexmenusgli }}>
          <a href='{{ indexItem.url }}' data-limesurvey-submit='{{ indexItem.submit }}' class='aminate btn btn-lg btn-primary'>
            {{ indexItem.text }}
          </a>
        </li>
      {% endfor %}
    </ul>
  {% endif %}

                <div class="custom-index-wrapper">
                    {{ include('./subviews/navigation/question_index_menu.twig') }}
                </div>

.custom-index-wrapper {
  margin: 20px 0;
}
 
.custom-index-wrapper ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
 
.custom-index-wrapper li {
  display: inline-block;
  margin: 0 5px;
}
 
.custom-index-wrapper li.index-item-current {
  opacity:0.65;
  filter:alpha(opacity=65);
}
 
.custom-index-wrapper li a {
  min-width: 80px;
}
 
.custom-index-wrapper li.index-item-current a {
  cursor: default;
}

.custom-index-wrapper li {
  display: inline-block;
  margin: 0 5px;
  padding: 5px;
}