Header
The new AHA header and footer is fully responsive with modern looks and feel with accessibility features. The layout is using Bootstrap 4.5 with flex box.
Main Header
HTML
<header class="aui-main-header aui-pri-header">
<a href="www.heart.org" class="aui-skip-content">Skip to main content</a>
<nav class="navbar navbar-expand-lg justify-content-between aui-header-content mx-auto aui-pri-header-t">
<a href="www.heart.org" class="aha-certification-logo" aria-label="Quality and Certification tool logo"></a>
<button class="navbar-toggler ml-2 px-0" type="button" data-toggle="collapse" data-target="#toggleNav" aria-controls="toggleNav" aria-expanded="false" aria-label="Toggle navigation">
<i class="aha-icon-hamburger"></i>
</button>
<div class="justify-content-lg-end collapse navbar-collapse aui-pri-nav" id="toggleNav">
<ul class="navbar-nav mx-lg-3 flex-lg-row flex-column">
<li class="d-flex nav-item dropdown px-lg-3 flex-column">
<button type="button" class="btn btn-text dropdown-toggle nav-link" id="navDropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">My Account</button>
<div class="dropdown-menu p-lg-0 aui-header-dropdown" aria-labelledby="navDropdown1" role="menu">
<ul>
<li class="active">
<a class="dropdown-item py-2" href="www.heart.org">Settings</a>
</li>
<li>
<a class="dropdown-item py-2" href="www.heart.org">Sign Out</a>
</li>
</ul>
</div>
</li>
<li class="d-flex nav-item px-lg-3">
<button type="button" class="btn btn-text nav-link">Volunteer</button>
</li>
</ul>
<a href="www.heart.org" target="_blank" class="btn btn-round btn-primary donate-btn" role="button">Donate</a>
</div>
</nav>
</header>Header with options
HTML
<header class="aui-main-header">
<a href="#" class="aui-skip-content"> Skip to main content</a>
<div class="aui-header-row">
<nav class="navbar navbar-expand-lg justify-content-between mx-auto aui-header-content aui-header-t">
<a href="#" class="aha-heart-logo" aria-label="American Heart Association logo"></a>
<div class="d-flex">
<div class="d-flex flex-sm-row-reverse flex-lg-row align-items-center">
<ul class="navbar-nav d-none d-lg-flex">
<li class="nav-item active px-3">
<a class="nav-link" href="#"><i class="aha-icon-plus-thick pr-2"></i>Heart Attack And Stroke Symptoms</a>
</li>
<li class="nav-item px-3">
<a class="nav-link" href="#"><i class="aha-icon-group pr-2"></i>Volunteer</a>
</li>
</ul>
<button type="button" class="btn btn-round btn-primary mx-4 d-none d-lg-flex align-items-center">
<i class="icon-heart pr-2"></i>
Donate Now
</button>
<a href="#" target="_blank" class="btn btn-round btn-primary donate-btn" role="button">Donate</a>
<i class="icon-search search-modal-item" data-toggle="modal" data-target="#searchModal"></i>
<div class="modal fade header-search-modal p-0" id="searchModal" tabindex="-1" aria-labelledby="searchModal" aria-hidden="true">
<div class="w-100 mw-100 modal-dialog m-0">
<div class="modal-content">
<div class="modal-header border-bottom-0">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mb-5">
<div class="form-inline flex-nowrap search-field mx-auto">
<label class="mr-3" htmlFor="inlineFormCustomSelect">Search</label>
<div class="input-group flex-grow-1">
<input class="form-control" type="text" placeholder="Ex: Heart Attack Symptoms" aria-label="Search" />
<div class="input-group-append">
<span class="input-group-text search-icon-bg" id="basic-text1"><i class="icon-search"
aria-hidden="true"></i></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="navbar-toggler ml-2 px-0" type="button" data-toggle="collapse" data-target="#toggleNavigator" aria-controls="toggleNavigator" aria-expanded="false" aria-label="Toggle navigation">
<i class="aha-icon-hamburger"></i>
</button>
</div>
</nav>
</div>
<div class="navbar-expand-lg aui-header-row">
<nav class="mx-auto navbar collapse navbar-collapse flex-column flex-lg-row aui-header-content aui-header-b" id="toggleNavigator">
<ul class="navbar-nav">
<li class="nav-item dropdown mr-lg-4">
<button class="btn btn-text nav-link dropdown-toggle" href="#" id="headerDropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Component Library
</button>
<div class="dropdown-menu aui-header-dropdown" aria-labelledby="headerDropdown1" role="menu">
<a class="dropdown-item py-2 active" href="#">Sub Navigation</a>
<a class="dropdown-item py-2" href="#">Sub Navigation</a>
<a class="dropdown-item py-2" href="#">Sub Navigation</a>
<a class="dropdown-item py-2" href="#">Sub Navigation</a>
</div>
</li>
<li class="nav-item dropdown mr-lg-4">
<button class="btn btn-text nav-link dropdown-toggle" href="#" id="headerDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Health Topics
</button>
<div class="dropdown-menu aui-header-dropdown" aria-labelledby="headerDropdown2" role="menu">
<a class="dropdown-item py-2 active" href="#">Sub Navigation</a>
<a class="dropdown-item py-2" href="#">Sub Navigation</a>
<a class="dropdown-item py-2" href="#">Sub Navigation</a>
<a class="dropdown-item py-2" href="#">Sub Navigation</a>
</div>
</li>
<li class="nav-item dropdown mr-lg-4">
<button class="btn btn-text nav-link dropdown-toggle" href="#" id="headerDropdown3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Professional
</button>
<div class="dropdown-menu aui-header-dropdown" aria-labelledby="headerDropdown3" role="menu">
<a class="dropdown-item py-2 active" href="#">Sub Navigation</a>
<a class="dropdown-item py-2" href="#">Sub Navigation</a>
<a class="dropdown-item py-2" href="#">Sub Navigation</a>
<a class="dropdown-item py-2" href="#">Sub Navigation</a>
</div>
</li>
<li class="nav-item dropdown mr-lg-4">
<button class="btn btn-text nav-link dropdown-toggle" href="#" id="headerDropdown4" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About Us
</button>
<div class="dropdown-menu aui-header-dropdown" aria-labelledby="headerDropdown4" role="menu">
<a class="dropdown-item py-2 active" href="#">Sub Navigation</a>
<a class="dropdown-item py-2" href="#">Sub Navigation</a>
<a class="dropdown-item py-2" href="#">Sub Navigation</a>
<a class="dropdown-item py-2" href="#">Sub Navigation</a>
</div>
</li>
<li class="nav-item dropdown mr-lg-4">
<button class="btn btn-text nav-link dropdown-toggle" href="#" id="headerDropdown5" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Get Involved
</button>
<div class="dropdown-menu aui-header-dropdown" aria-labelledby="headerDropdown5" role="menu">
<a class="dropdown-item py-2 active" href="#">Sub Navigation</a>
<a class="dropdown-item py-2" href="#">Sub Navigation</a>
<a class="dropdown-item py-2" href="#">Sub Navigation</a>
<a class="dropdown-item py-2" href="#">Sub Navigation</a>
</div>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<button class="btn btn-text nav-link dropdown-toggle" href="#" id="headerDropdown6" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Location
</button>
<div class="dropdown-menu aui-header-dropdown" aria-labelledby="headerDropdown6" role="menu">
<a class="dropdown-item py-2" href="#">Sub Navigation</a>
</div>
</li>
</ul>
</nav>
<ul class="m-0 flex-row-reverse header-m-nav d-flex d-lg-none">
<li><a href="#">Donate</a></li>
<li><a href="#">SHOP</a></li>
<li><a href="#">Volunteer</a></li>
<li><a href="#">Warning Signs</a></li>
</ul>
</div>
</header>