This Documentation is Moved!

This is currently being depreciated. Please visited the new location for the styleguide at https://assets.acc.org/Arches/Latest/docs/

Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

Source: dist/css/acc_boot.css, line 6945

5.5 Mobile Nav

deprecated

Placed in applications used for navigation in mobile apps.

Deprecated: This pattern was never utilized.

Example 

<div class="texture-medium bg_shade-3 relative" style="max-width:412px;max-height:732px;width:100vw;height:100vh">
<div id="nav" class="bg_acc c_white shadow_3 font_2 flex sticky b_0 l_0 r_0 w_100">
    <a href="#/" class="text_center p_2 flex_auto center clear c_shade-5 c_white hover-text_primary-4 m-bottom_0 router-link-exact-active router-link-active"><i class="fas m_2 fa-sign-out-alt"></i></a>
    <a href="#/search" class="text_center p_2 flex_auto center clear c_shade-5 c_white hover-text_primary-4 m-bottom_0"><i class="fas m_2 fa-search"></i></a>
    <a href="#/shared" class="text_center p_2 flex_auto center clear c_shade-5 c_white hover-text_primary-4 m-bottom_0"><span class="fa-layers fa-fw"><i class="fas m_2 fa-share-alt-square"></i></span></a>
    <a href="#/history" class="text_center p_2 flex_auto center clear c_shade-5 c_white hover-text_primary-4 m-bottom_0"><span class="fa-layers fa-fw"><i class="fas m_2 fa-history"></i></span></a>
    <a href="#/about" class="text_center p_2 flex_auto center clear c_shade-5 c_white hover-text_primary-4 m-bottom_0"><i class="fas m_2 fa-info-square"></i></a>
</div>
</div>
Copy Code