Header Nav basic design that is not hidden when in mobile viewport have an included icon that makes it easier to see and click on when in mobile viewport.
<!-- if button shouldn't show in the main area on mobile add in classes `display_none block:lg` to hide on mobile so they only show up in the mobile expand area. -->
<li class="nav-item flex_auto [ display_none block:lg ]">
<a class="a:bg_accent [ bg_secondary-2 c_secondary-3 disabled ] flex flex_column flex_row:lg font_medium gap-x_4 gap-y_3 h:bg_acc-n2 h:c_white justify_center nav-link text_center p-y_3:md " href="/convocation" target="_self">
<span class="block lh_0 p-y_0 p-y_2:md text_center">
<!-- If Button Disabled Add This Icon -->
<i class="fas fa-lock p-r_3"></i>
Secondary: Disabled
</span>
</a>
</li>