Update forecast_mhw.html

Create tab version of pills for mobile view of marine heatwave

forecast_mhw.html

@@ -138,14 +138,22 @@ <h3 class="sliderTitle"> Initialization : <span class="initTimeValueFcastMHW"></
 </div>
 
 <div class="row" id="dashNavForecastMHW">
-    <ul class="nav nav-pills nav-justified">
+    <ul class="nav nav-pills nav-justified hidden-xs" id="pills-mhw">
         <li class="nav-item active" id="mhwProbPill">
             <a class="nav-link" href="#mhwProb" data-toggle="tab" aria-expanded="true" >Probability Forecast</a>
         </li>
         <li class="nav-item" id="mhwDistPill">
             <a class="nav-link" href="#mhwDist" data-toggle="tab" aria-expanded="true">Forecast Spread</a>
         </li>
     </ul>
+    <ul class="nav nav-tabs nav-justified visible-xs" id="tabs-mhw">
+        <li class="nav-item active" id="mhwProbTab">
+            <a class="nav-link" href="#mhwProb" data-toggle="tab" aria-expanded="true" >Probability Forecast</a>
+        </li>
+        <li class="nav-item" id="mhwDistTab">
+            <a class="nav-link" href="#mhwDist" data-toggle="tab" aria-expanded="true">Forecast Spread</a>
+        </li>
+    </ul>
 </div>
 
 <div class="row" id="dashContentForecastMHW">
@@ -185,4 +193,4 @@ <h3 class="modal-title" id="Model_cbar_title">What are the available colormaps?<
         </div>
       </div>
     </div>
-</div>
+</div>