Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

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

5.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.

<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>
Copy Code