2.1 Recipes.Branded Nav
Source: dist/css/covid_boot.css, line 6914
2.1.1 Nav Dropdown Simple
The Header Nav of ACC.org
Example
<nav class="navbar navbar-primary navbar-expand-lg navbar-dark bg_acc font_1">
<button
class="br_white-2 is-active_toggle-function m-l_n2 m-y_3 navbar-toggler p-l_2 p-r_3 p-y_2 collapsed"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<i class="icon-toggle_bars-times fas a:c_acc-2 c_white"></i><span class="a:c_acc-2 c_white"> Menu</span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="display_none:lg nav-item">
<a class="nav-link" href="//www.acc.org/" title="Home of the American College of Cardiology"
><i class="fas fa-home"></i><span class="display_none:lg"> Home</span></a
>
</li>
<li class="display_none:lg nav-item">
<a
class="nav-link"
href="//www.acc.org/guidelines#doctype=Guidelines"
title="Access ACC guidelines and clinical policy documents as well as related resources"
>Guidelines</a
>
</li>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle is-active_toggle-function"
href="/clinical-topics"
id="clinicalTopicsDropdown"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
><i class="far faw icon-toggle_plus-minus display_none:lg m-l_n2 m-r_2"></i>Clinical Topics</a
>
<div
class="dropdown-menu br_none br_solid:lg m-x_0:lg m-x_n4 m-t_0 m-t_2:lg"
aria-labelledby="clinicalTopicsDropdown"
>
<div class="flex flex_column flex_row:md p-x_2:lg m-x_n1 m-x_0:lg">
<div class="flex_auto p-x_2 p-y_0 p-y_3:md">
<ul class="ul_none m_0">
<li>
<a
class="dropdown-item transition_4 wrap nowrap:lg"
href="/clinical-topics/acute-coronary-syndromes"
>Acute Coronary Syndromes</a
>
</li>
<li>
<a
class="dropdown-item transition_4 wrap nowrap:lg"
href="/clinical-topics/anticoagulation-management"
title="Anticoagulation Management"
>Anticoagulation Management</a
>
</li>
<li>
<a
class="dropdown-item transition_4 wrap nowrap:lg"
href="/clinical-topics/arrhythmias-and-clinical-ep"
>Arrhythmias and Clinical EP</a
>
</li>
<li>
<a
class="dropdown-item transition_4 wrap nowrap:lg"
href="/clinical-topics/acute-coronary-syndromes/atherosclerotic-disease-cad-pad"
>Atherosclerotic Disease (CAD/PAD)</a
>
</li>
<li>
<a
class="dropdown-item transition_4 wrap nowrap:lg"
href="/clinical-topics/cardiac-surgery"
>Cardiac Surgery</a
>
</li>
<li>
<a
class="dropdown-item transition_4 wrap nowrap:lg"
href="/clinical-topics/cardio-oncology"
>Cardio-Oncology</a
>
</li>
<li>
<a
class="dropdown-item transition_4 wrap nowrap:lg"
href="/clinical-topics/congenital-heart-disease-pediatric-cardiology"
>Congenital Heart Disease and Pediatric Cardiology</a
>
</li>
<li>
<a
class="dropdown-item transition_4 wrap nowrap:lg"
href="/clinical-topics/diabetes-and-cardiometabolic-disease"
>Diabetes and Cardiometabolic Disease</a
>
</li>
<li>
<a
class="dropdown-item transition_4 wrap nowrap:lg"
href="/clinical-topics/dyslipidemia"
title="Dyslipidemia"
>Dyslipidemia</a
>
</li>
<li>
<a
class="dropdown-item transition_4 wrap nowrap:lg"
href="/clinical-topics/geriatric-cardiology"
>Geriatric Cardiology</a
>
</li>
<li>
<a
class="dropdown-item transition_4 wrap nowrap:lg"
href="/clinical-topics/heart-failure-and-cardiomyopathies"
title="Heart Failure and Cardiomyopathies"
>Heart Failure and Cardiomyopathies</a
>
</li>
</ul>
</div>
<div
class="flex_auto p-x_2 p-y_0 p-y_3:md br-l_1 br_none br_shade-4 br_solid:lg br_solid:md"
>
<ul class="ul_none">
<li>
<a
class="dropdown-item transition_4 wrap nowrap:lg"
href="/clinical-topics/dyslipidemia/hypertriglyceridemia"
>Hypertriglyceridemia</a
>
</li>
<li>
<a
class="dropdown-item transition_4 wrap nowrap:lg"
href="/clinical-topics/invasive-cardiovascular-angiography-and-intervention"
title="Invasive Cardiovascular Angiography and Intervention"
>Invasive Cardiovascular Angiography and Intervention</a
>
</li>
<li>
<a
class="dropdown-item transition_4 wrap nowrap:lg"
href="/clinical-topics/noninvasive-imaging"
title="Noninvasive Imaging"
>Noninvasive Imaging</a
>
</li>
<li>
<a
class="dropdown-item transition_4 wrap nowrap:lg"
href="/clinical-topics/pericardial-disease"
title="Pericardial Disease"
>Pericardial Disease</a
>
</li>
<li>
<a
class="dropdown-item transition_4 wrap nowrap:lg"
href="/clinical-topics/prevention"
title="Prevention"
>Prevention</a
>
</li>
<li>
<a
class="dropdown-item transition_4 wrap nowrap:lg"
href="/clinical-topics/pulmonary-hypertension-and-venous-thromboembolism"
>Pulmonary Hypertension and Venous Thromboembolism</a
>
</li>
<li>
<a
class="dropdown-item transition_4 wrap nowrap:lg"
href="/clinical-topics/sports-and-exercise-cardiology"
>Sports and Exercise Cardiology</a
>
</li>
<li>
<a
class="dropdown-item transition_4 wrap nowrap:lg"
href="/clinical-topics/stable-ischemic-heart-disease"
title="Stable Ischemic Heart Disease"
>Stable Ischemic Heart Disease</a
>
</li>
<li>
<a
class="dropdown-item transition_4 wrap nowrap:lg"
href="/clinical-topics/valvular-heart-disease"
>Valvular Heart Disease</a
>
</li>
<li>
<a
class="dropdown-item transition_4 wrap nowrap:lg"
href="/clinical-topics/vascular-medicine"
>Vascular Medicine</a
>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>Code Sample
Source: dist/css/covid_boot.css, line 7140
2.1.1.1 Nav Dropdown with Sub Links
The Header Nav of ACC.org
Example
<nav class="navbar navbar-primary navbar-expand-lg navbar-dark bg_acc font_1">
<button
class="br_white-2 is-active_toggle-function m-l_n2 m-y_3 navbar-toggler p-l_2 p-r_3 p-y_2 collapsed"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<i class="icon-toggle_bars-times fas a:c_acc-2 c_white"></i><span class="a:c_acc-2 c_white"> Menu</span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle is-active_toggle-function"
href="#"
id="eduDropdown"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
><i
class="far faw icon-toggle_plus-minus display_none:lg m-l_n2 m-r_2"
></i>
Education and Meetings
</a>
<div
class="dropdown-menu br_none br_solid:lg m-x_0:lg m-x_n4 m-t_0 m-t_2:lg"
aria-labelledby="eduDropdown"
>
<div class="flex flex_column flex_row:md p-x_2:lg m-x_n1 m-x_0:lg">
<div class="flex_auto p-x_2 p-y_0 p-y_3:md">
<ul class="ul_none">
<li class="">
<span class="toggler"></span>
<a
class="dropdown-item transition_4 wrap nowrap:lg"
href="/education-and-meetings/education-catalog"
>Online Learning Catalog</a
>
<ul class="ul_none font_n1 lh_3">
<li class="text-indent_1">
<a
class="dropdown-item transition_4 wrap nowrap:lg"
href="/earncredit"
>Earn Credit</a
>
</li>
<li class="text-indent_1">
<a
class="dropdown-item transition_4 wrap nowrap:lg"
href="/education-and-meetings/products-and-resources/board-prep-offerings"
title="Board Prep Offerings"
>Board Prep Offerings</a
>
</li>
<li class="text-indent_1">
<a
class="dropdown-item transition_4 wrap nowrap:lg"
href="/education-and-meetings/education-catalog"
>View the Entire Catalog</a
>
</li>
</ul>
</li>
<li class="">
<span class="toggler"></span>
<a
class="dropdown-item transition_4 wrap nowrap:lg"
href="/education-and-meetings/education-catalog"
>Products</a
>
<ul class="ul_none font_n1 lh_3">
<li class="text-indent_1">
<a
class="dropdown-item transition_4 wrap nowrap:lg"
href="/education-and-meetings/products-and-resources/accsap"
>ACCSAP</a
>
</li>
<li class="text-indent_1">
<a
class="dropdown-item transition_4 wrap nowrap:lg"
href="/education-and-meetings/products-and-resources/accel-audio"
>ACCEL</a
>
</li>
<li class="text-indent_1">
<a
class="dropdown-item transition_4 wrap nowrap:lg"
href="/education-and-meetings/products-and-resources/cardiosource-plus"
>CardioSource Plus for Institutions and Practices</a
>
</li>
<li class="text-indent_1">
<a
class="dropdown-item transition_4 wrap nowrap:lg"
href="/education-and-meetings/products-and-resources/cathsap"
>CathSAP</a
>
</li>
<li class="text-indent_1">
<a
class="dropdown-item transition_4 wrap nowrap:lg"
href="/education-and-meetings/products-and-resources/ecg-drill-and-practice"
title="ECG Drill and Practice"
>ECG Drill and Practice</a
>
</li>
<li class="text-indent_1">
<a
class="dropdown-item transition_4 wrap nowrap:lg"
href="/education-and-meetings/products-and-resources/echosap"
>EchoSAP</a
>
</li>
<li class="text-indent_1">
<a
class="dropdown-item transition_4 wrap nowrap:lg"
href="/education-and-meetings/products-and-resources/epsap"
>EP SAP</a
>
</li>
<li class="text-indent_1">
<a
class="dropdown-item transition_4 wrap nowrap:lg"
href="/education-and-meetings/products-and-resources/heart-songs-5"
>Heart Songs</a
>
</li>
<li class="text-indent_1">
<a
class="dropdown-item transition_4 wrap nowrap:lg"
href="/education-and-meetings/products-and-resources/iscience"
>iScience</a
>
</li>
<li class="text-indent_1">
<a
class="dropdown-item transition_4 wrap nowrap:lg"
href="/education-and-meetings/products-and-resources/recent-advances-in-clinical-nuclear-cardiology-and-cardiac-ct-mod"
>Nuclear Cardiology and Cardiac CT Meeting on Demand</a
>
</li>
<li class="text-indent_1">
<a
class="dropdown-item transition_4 wrap nowrap:lg"
href="/education-and-meetings/products-and-resources/rightsteps-optimizing-medical-therapy-for-chronic-heart-failure"
>RightSTEPS Optimizing Medical Therapy for Chronic Heart
Failure</a
>
</li>
</ul>
</li>
</ul>
</div>
<div
class="flex_auto p-x_2 p-y_0 p-y_3:md br-l_1 br_none br_shade-4 br_solid:lg br_solid:md"
>
<ul class="ul_none m_0">
<li>
<a
class="dropdown-item transition_4 wrap nowrap:lg"
href="/education-and-meetings/products-and-resources"
>Resources</a
>
</li>
<li>
<a
class="dropdown-item transition_4 wrap nowrap:lg"
href="/education-and-meetings/products-and-resources/guideline-education"
>Guideline Education</a
>
</li>
<li>
<a
class="dropdown-item transition_4 wrap nowrap:lg"
href="/education-and-meetings/maintenance-of-certification-information-hub"
>Understanding MOC</a
>
</li>
<li>
<a
class="dropdown-item transition_4 wrap nowrap:lg"
href="/education-and-meetings/image-and-slide-gallery"
>Image and Slide Gallery</a
>
</li>
<li class="">
<span class="toggler"></span>
<a
class="dropdown-item transition_4 wrap nowrap:lg"
href="/education-and-meetings/meetings"
>Meetings</a
>
<ul class="ul_none font_n1 lh_3">
<li class="text-indent_1">
<a
class="dropdown-item transition_4 wrap nowrap:lg"
href="http://accscientificsession.acc.org"
class="new-window-icon"
target="_blank"
>Annual Scientific Session and Related Events</a
>
</li>
<li class="text-indent_1">
<a
class="dropdown-item transition_4 wrap nowrap:lg"
href="http://www.acc.org/education-and-meetings/meetings?w_nav=MN#type=Chapter Meetings"
>Chapter Meetings</a
>
</li>
<li class="text-indent_1">
<a
class="dropdown-item transition_4 wrap nowrap:lg"
href="http://www.acc.org/education-and-meetings/meetings?w_nav=MN#type=Live Meetings"
class="lvl2"
>Live Meetings</a
>
</li>
<li class="text-indent_1">
<a
class="dropdown-item transition_4 wrap nowrap:lg"
href="/education-and-meetings/meetings#type=Webinars - Live"
class="lvl2"
>Webinars - Live</a
>
</li>
<li class="text-indent_1">
<a
class="dropdown-item transition_4 wrap nowrap:lg"
href="/education-and-meetings/meetings?view=archive&#type=Webinars - OnDemand"
>Webinars - OnDemand</a
>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>Code Sample
Source: dist/css/covid_boot.css, line 7399
2.1.1.2 Nav Dropdown with Alternate Content in Links
It is easy to add images in replace of text links in the navs.
Example
<nav class="navbar navbar-primary navbar-expand-lg navbar-dark bg_acc font_1">
<button
class="br_white-2 is-active_toggle-function m-l_n2 m-y_3 navbar-toggler p-l_2 p-r_3 p-y_2 collapsed"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<i class="icon-toggle_bars-times fas a:c_acc-2 c_white"></i><span class="a:c_acc-2 c_white"> Menu</span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle is-active_toggle-function"
href="#"
id="toolDropdown"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
><i class="far faw icon-toggle_plus-minus display_none:lg m-l_n2 m-r_2"></i>Tools & Practice Support
</a>
<div class="dropdown-menu m-x_0:lg m-x_n4 m-t_0 m-t_2:lg" aria-labelledby="toolDropdown">
<div class="flex flex_column flex_row:md p-x_2:lg m-x_n1 m-x_0:lg">
<div class="flex_auto p-x_2 p-y_0 p-y_3:md order_2 order_1:md">
<ul class="ul_none">
<li class="relative m-x_2:md m-x_4">
<a
href="http://cvquality.acc.org/?_ga=2.33577825.159963902.1562853382-843642371.1562007133"
target="_blank"
class="expanded-click-area transition_1 h:opacity opacity_8"
><img
src="https://www.acc.org/~/media/Non-Clinical/Images/External%20Site%20Logos/ACC_QII_logo.png"
alt="QII"
/></a>
</li>
<li class="relative m-x_2:md m-x_4">
<a href="http://cvquality.acc.org/NCDR-Home.aspx?_ga=2.91395290.159963902.1562853382-843642371.1562007133" target="_blank" class="expanded-click-area transition_1 h:opacity opacity_8"><img src="https://www.acc.org/~/media/Non-Clinical/Images/External Site Logos/ACC_NCDR_logo.png" alt="NCDR"></a>
</li>
</ul>
</div>
<div
class="flex_auto p-x_2 p-y_0 p-y_3:md br-l_1 br_none br_shade-4 br_solid:lg br_solid:md order_1 order_2:md"
>
<ul class="ul_none">
<li>
<a class="dropdown-item transition_4 wrap nowrap:lg" href="/tools-and-practice-support/advocacy-at-the-acc">Advocacy at the ACC</a>
<ul class="ul_none font_n1 lh_3">
<li class="text-indent_1">
<a class="dropdown-item transition_4 wrap nowrap:lg" href="/tools-and-practice-support/advocacy-at-the-acc/advocacy-action"
>Advocacy Action</a
>
</li>
<li class="text-indent_1">
<a class="dropdown-item transition_4 wrap nowrap:lg"
href="/tools-and-practice-support/advocacy-at-the-acc/health-policy-issue-center/alternative-payment-model-framework"
>Alternative Payment Model Framework</a
>
</li>
<li class="text-indent_1">
<a class="dropdown-item transition_4 wrap nowrap:lg"
href="/tools-and-practice-support/advocacy-at-the-acc/acc-legislative-conference"
>Legislative Conference</a
>
</li>
<li class="text-indent_1">
<a class="dropdown-item transition_4 wrap nowrap:lg" href="http://www.acc.org/macra/index.html" target="_blank"
>MACRA/QPP Hub</a
>
</li>
<li class="text-indent_1">
<a class="dropdown-item transition_4 wrap nowrap:lg"
href="/tools-and-practice-support/advocacy-at-the-acc/acc-political-action-committee"
>ACC Political Action Committee</a
>
</li>
</ul>
</li>
<li>
<a class="dropdown-item transition_4 wrap nowrap:lg" href="http://www.healthecareers.com/acc" class="new-window-icon" target="_blank"
>Cardiology Careers</a
>
</li>
<li>
<a class="dropdown-item transition_4 wrap nowrap:lg" href="/tools-and-practice-support/clinical-toolkits">Clinical Toolkits</a>
</li>
<li>
<a class="dropdown-item transition_4 wrap nowrap:lg" href="/tools-and-practice-support/expert-consensus-decision-pathways"
>Expert Consensus Decision Pathways</a
>
</li>
<li>
<a class="dropdown-item transition_4 wrap nowrap:lg" href="/tools-and-practice-support/infographics">Infographics</a>
</li>
<li>
<a class="dropdown-item transition_4 wrap nowrap:lg" href="/tools-and-practice-support/mobile-resources">Mobile Apps</a>
</li>
<li>
<a class="dropdown-item transition_4 wrap nowrap:lg" href="/tools-and-practice-support/quality-programs">Quality Programs</a>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>Code Sample
Source: dist/css/covid_boot.css, line 6843
2.1.2 Responsive Top Nav with Single Layer Nav
The Header Nav with no dropdown navs but with elements that show up only in the mobile viewport
Example
<nav class="navbar navbar-primary navbar-expand-lg navbar-dark bg_acc font_1">
<button
class="br_white-2 is-active_toggle-function m-l_n2 m-y_3 navbar-toggler p-l_2 p-r_3 p-y_2 collapsed"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<i class="icon-toggle_bars-times fas a:c_acc-2 c_white"></i><span class="a:c_acc-2 c_white"> Menu</span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="display_none:lg nav-item">
<a class="nav-link" href="//www.acc.org/" title="Home of the American College of Cardiology"
><i class="fas fa-home"></i><span class="display_none:lg"> Home</span></a
>
</li>
<li class="display_none:lg nav-item">
<a
class="nav-link" href="//www.acc.org/guidelines#doctype=Guidelines" title="Access ACC guidelines and clinical policy documents as well as related resources" >Guidelines</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="/clinical-topics" >Clinical Topics</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Latest In Cardiology</a>
</li>
<li class="display_none:lg nav-item">
<a
class="nav-link"
href="//www.acc.org/membership"
title="Access exclusive member features and groups or learn about ACC membership"
>Membership</a
>
</li>
<li class="display_none:lg nav-item">
<a class="nav-link" href="//www.acc.org/about-acc" title="Learn about the ACC organization"
>About ACC</a
>
</li>
<li class="display_none:lg nav-item">
<a class="nav-link" href="http://www.onlinejacc.org/" target="_blank" title="JACC.org">JACC <i class="c_white fa-external-link-square fal h:c_white m-l_3 p-r_3 p-t_2" style="text-indent: 0;"></i></a>
</li>
<li class="display_none:lg nav-item">
<a
class="nav-link"
href="http://accscientificsession.acc.org"
target="_blank"
title="ACC Annual Scientific Session Website"
>ACC.19 <i class="c_white fa-external-link-square fal h:c_white m-l_3 p-r_3 p-t_2" style="text-indent: 0;"></i></a
>
</li>
</ul>
</div>
</nav>Code Sample
Source: dist/css/covid_boot.css, line 6717
2.1.3 CardioSmart 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
<div class="flex relative">
<nav class="flex_auto navbar navbar-primary navbar-expand-lg navbar-dark bg_acc">
<button
class="br_white-2 is-active_toggle-function m-l_n2 m-y_3 navbar-toggler p-l_2 p-r_3 p-y_2 collapsed"
type="button"
data-toggle="collapse"
data-target="#navbarLoginContent"
aria-controls="navbarLoginContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<i class="icon-toggle_bars-times fas a:c_acc-2 c_white"></i
><span class="a:c_acc-2 c_white"> Menu</span>
</button>
<div class="collapse navbar-collapse" id="navbarLoginContent">
<ul class="navbar-nav font_1"><li class="nav-item"><a class="nav-link" href="#">Latest In Cardiology</a></li></ul>
</div>
</nav>
<nav class="absolute bg_primary flex_shrink font_0 font_1:lg navbar navbar-dark navbar-expand p-y_2 r_0 br-t_1 br_solid br_primary">
<ul class="navbar-nav m-t_1">
<li class="nav-item dropdown">
<a
class="nav-link is-active_toggle-function"
id="myACCDropdown"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
><i class="far icon-toggle_chevron-up-down"></i> My ACC</a
>
<div
class="dropdown-menu dropdown-menu-right br_none br_solid:lg m-x_0:lg m-x_n4 m-t_0 m-t_2:lg font_0"
aria-labelledby="navbarDropdown"
>
<div class="flex flex_column flex_row:md p-x_2:lg m-x_n1 m-x_0:lg">
<div class="flex_auto p-x_2 p-y_0 ">
<ul class="ul_none m_0">
<li>
<a class="dropdown-item transition_4 nowrap" href="/my-acc/my-profile"
>My Profile</a
>
</li>
<li>
<a class="dropdown-item transition_4 nowrap" href="/my-acc/my-training-program"
>My Training Programs</a
>
</li>
<li>
<a class="dropdown-item transition_4 nowrap" href="/my-acc/my-membership"
>My Membership</a
>
</li>
<li>
<a class="dropdown-item transition_4 nowrap" href="/my-acc/my-library"
>My Library</a
>
</li>
<li>
<a
class="dropdown-item transition_4 nowrap"
href="http://edu.acc.org/diweb/dashboard"
>My Learning Dashboard</a
>
</li>
<li>
<a class="dropdown-item transition_4 nowrap" href="http://edu.acc.org/diweb/grades"
>My Transcript</a
>
</li>
<li>
<a class="dropdown-item transition_4 nowrap" href="/my-acc/ncdr-physician-dashboard"
>NCDR Physician Dashboard</a
>
</li>
<li>
<a
class="dropdown-item transition_4 nowrap"
href="/my-acc/my-communication-preferences"
>My Communication Preferences</a
>
</li>
<li>
<a class="dropdown-item transition_4 nowrap" href="https://memberhub.acc.org/"
>ACC Member Hub</a
>
</li>
<li>
<a class="dropdown-item transition_4 nowrap" href="/my-acc/my-purchase-history"
>My Purchases</a
>
</li>
<li>
<a class="dropdown-item transition_4 nowrap" href="/my-acc/personalization"
>Personalize ACC.org</a
>
</li>
<div class="dropdown-divider m-y_3"></div>
<li class="">
<a class="dropdown-item transition_4 nowrap" href="/RemoteLogOff"> Logout</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="nav-item">
<a class=" nav-link" href="#"><i class="far fa-shopping-cart"></i></a>
</li>
<li class="nav-item">
<a class=" nav-link" href="#"><i class="fas fa-sign-out-alt"></i></a>
</li>
</ul>
</nav>
</div>