Source: dist/css/acc_boot.css, line 17342
4.1.5 Login Nav
The ACC.org Nav has a shade nav that houses the login and profile nav with a shade color. To make sure it doesn't resize when the main nav expands the login nav needs to be placed absolutely.
Example
<nav class="font_1 absolute bg_primary br-t_1 br_primary br_solid br_none flex_shrink font_0 font_0:lg m-l_auto navbar navbar-dark navbar-expand p-y_2 r_0 t_0 b_0:lg relative:lg" >
<ul class="navbar-nav">
<li class="nav-item relative flex_shrink dropdown">
<a class="nav-link expanded-click-area [a:c_white] h:c_white nowrap"
role="button"
id="dropdownMyACC"
data-bs-toggle="dropdown"
aria-expanded="false"
>My ACC <i class="far icon-toggle_chevron-up-down"></i></a>
<div
class="dropdown-menu font_copy br-t_0 dropdown-menu-end br_none br_solid:lg m-t_0 m-t_2:lg font_0" aria-labelledby="dropdownMyACC"
>
<div class="flex flex_column flex_row:md p-x_2:lg m-x_n1 m-x_0:lg">
<div class="p-x_2 p-y_0 dropdown_column">
<ul class="ul_none lh_2 m_0">
<li>
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/my-acc/my-profile">My Profile</a>
</li>
<li>
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/my-acc/my-training-program">My Training Programs</a>
</li>
<li>
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/my-acc/my-membership">My Membership</a>
</li>
<li>
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/my-acc/my-library">My Library</a>
</li>
<li>
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="http://edu.acc.org/diweb/dashboard">My Learning Dashboard</a>
</li>
<li>
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="http://edu.acc.org/diweb/grades">My Transcript</a>
</li>
<li>
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/my-acc/ncdr-physician-dashboard">NCDR Physician Dashboard</a>
</li>
<li>
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/my-acc/my-communication-preferences">My Communication Preferences</a>
</li>
<li>
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="https://memberhub.acc.org/">ACC Member Hub</a>
</li>
<li>
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/my-acc/my-purchase-history">My Purchases</a>
</li>
<li>
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/my-acc/personalization">Personalize ACC.org</a>
</li>
<div class="dropdown-divider m-y_3"></div>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/RemoteLogOff"> Logout</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="nav-item">
<a class=" nav-link nowrap" href="#"><i class="far fa-shopping-cart"></i></a>
</li>
<!--<li class="nav-item">
<a class=" nav-link nowrap" href="#"><i class="fas fa-sign-out-alt"></i></a>
</li>-->
<!--<li class="nav-item">
<a href="@loginlink" class="nav-link nowrap"><i class="fas fa-sign-in-alt"></i> Log in to MyACC </a>
</li>-->
</ul>
</nav>