No notes defined.
<header class=" siteHeader">
<div class="siteHeader__container container">
<a href="/" class="siteHeader__brand">
<svg xmlns="http://www.w3.org/2000/svg" class="siteHeader__logo" width="36" height="44" viewBox="3 1 18 22" stroke-width="1" stroke="currentColor" fill="none">
<path d="M6 17.6l-2 -1.1v-2.5" />
<path d="M4 10v-2.5l2 -1.1" />
<path d="M10 4.1l2 -1.1l2 1.1" />
<path d="M18 6.4l2 1.1v2.5" />
<path d="M20 14v2.5l-2 1.12" />
<path d="M14 19.9l-2 1.1l-2 -1.1" />
<line x1="12" y1="12" x2="14" y2="10.9" />
<line x1="18" y1="8.6" x2="20" y2="7.5" />
<line x1="12" y1="12" x2="12" y2="14.5" />
<line x1="12" y1="18.5" x2="12" y2="21" />
<path d="M12 12l-2 -1.12" />
<line x1="6" y1="8.6" x2="4" y2="7.5" />
</svg>
<div class="siteHeader__siteName">Boilerplate</div>
</a>
<nav class=" primaryNav">
<bp-directional>
<ul class="primaryNav__list">
<li class="primaryNav__item">
<bp-dropdown label-class="primaryNav__link" href="" label="Maine" id="a11y-maine">
<bp-directional>
<div class="container linkGroups">
<div class="linkGroup">
<div class="linkGroup__heading">Seacoast</div>
<ul class="linkGroup__list -wide">
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Bar Harbor</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Camden</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Castine</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Damariscotta</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Kennebunkport</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Old Orchard Beach</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Portland</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Rockland</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Stonington</a></li>
</ul>
</div>
<div class="linkGroup">
<div class="linkGroup__heading">Parks</div>
<ul class="linkGroup__list">
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Acadia</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Baxter</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Camden Hills</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Popham Beach</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Quoddy Head</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Reid</a></li>
</ul>
</div>
<div class="linkGroup">
<div class="linkGroup__heading">Activities</div>
<ul class="linkGroup__list">
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Agricultural Attractions</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Arts & Culture</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Camping</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Fishing</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Guide Services</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Hiking & Climbing</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Hunting</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Lighthouses & Sightseeing</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Shopping</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Spas, Health & Wellness</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Wildlife Watching</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Winter Activities</a></li>
</ul>
</div>
</div>
</bp-directional>
</bp-dropdown>
</li>
<li class="primaryNav__item">
<bp-dropdown label-class="primaryNav__link" href="" label="New Hampshire" id="a11y-new-hampshire">
<bp-directional>
<div class="container linkGroups">
<div class="linkGroup">
<div class="linkGroup__heading">Towns</div>
<ul class="linkGroup__list">
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Manchester</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Portsmouth</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Sunapee</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Concord</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Conway</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Keene</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Laconia</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Berlin</a></li>
</ul>
</div>
<div class="linkGroup">
<div class="linkGroup__heading">Parks</div>
<ul class="linkGroup__list">
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Bear Brook</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Franconia Notch</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Hampton Beach</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Odiorne Point</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Pawtuckaway</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">White Mountains</a></li>
</ul>
</div>
<div class="linkGroup">
<div class="linkGroup__heading">Activities</div>
<ul class="linkGroup__list">
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Boating</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Camping</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Canoeing & Kayaking</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Christmas Tree Farms</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Covered Bridges</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Fishing</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Guide Services</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Hunting</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Shopping</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Skiing & Riding</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Waterfalls</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">White Water Rafting</a></li>
</ul>
</div>
</div>
</bp-directional>
</bp-dropdown>
</li>
<li class="primaryNav__item">
<bp-dropdown class="-rightEdge" label-class="primaryNav__link" href="" label="Massachusetts" id="a11y-massachusetts">
<bp-directional>
<div class="container linkGroups">
<div class="linkGroup">
<div class="linkGroup__heading">Cities</div>
<ul class="linkGroup__list">
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Boston</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Cambridge</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Lowell</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Plymouth</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Salem</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Springfield</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Worcester</a></li>
</ul>
</div>
<div class="linkGroup">
<div class="linkGroup__heading">Cape Cod & Islands</div>
<ul class="linkGroup__list">
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Chatham</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Falmouth</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Hyannis</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Martha's Vineyard</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Nantucket</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Oak Bluffs</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Orleans</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Provincetown</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Sandwich</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Truro</a></li>
</ul>
</div>
<div class="linkGroup">
<div class="linkGroup__heading">In the City</div>
<ul class="linkGroup__list">
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Camping</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Casinos</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Massachusetts Gardens</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Museums & Galleries</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Night Life</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Performing Arts</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Scenic Drive Tours</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Shopping</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Ski Areas</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">State Parks</a></li>
</ul>
</div>
</div>
</bp-directional>
</bp-dropdown>
</li>
</ul>
</bp-directional>
</nav>
<bp-mobile-navigation title="Example Menu" class="siteHeader__end">
<ul class="mobileNav__list">
<li class="mobileNav__item">
<a href="">Maine</a>
<ul>
<li><a href="#">Bar Harbor</a></li>
<li><a href="#">Camden</a></li>
<li><a href="#">Castine</a></li>
<li><a href="#">Damariscotta</a></li>
<li><a href="#">Kennebunkport</a></li>
<li><a href="#">Old Orchard Beach</a></li>
<li><a href="#">Portland</a></li>
<li><a href="#">Rockland</a></li>
<li><a href="#">Stonington</a></li>
<li><a href="#">Acadia</a></li>
<li><a href="#">Baxter</a></li>
<li><a href="#">Camden Hills</a></li>
<li><a href="#">Popham Beach</a></li>
<li><a href="#">Quoddy Head</a></li>
<li><a href="#">Reid</a></li>
<li><a href="#">Agricultural Attractions</a></li>
<li><a href="#">Arts & Culture</a></li>
<li><a href="#">Camping</a></li>
<li><a href="#">Fishing</a></li>
<li><a href="#">Guide Services</a></li>
<li><a href="#">Hiking & Climbing</a></li>
<li><a href="#">Hunting</a></li>
<li><a href="#">Lighthouses & Sightseeing</a></li>
<li><a href="#">Shopping</a></li>
<li><a href="#">Spas, Health & Wellness</a></li>
<li><a href="#">Wildlife Watching</a></li>
<li><a href="#">Winter Activities</a></li>
</ul>
</li>
<li class="mobileNav__item">
<a href="">New Hampshire</a>
<ul>
<li><a href="#">Manchester</a></li>
<li><a href="#">Portsmouth</a></li>
<li><a href="#">Sunapee</a></li>
<li><a href="#">Concord</a></li>
<li><a href="#">Conway</a></li>
<li><a href="#">Keene</a></li>
<li><a href="#">Laconia</a></li>
</ul>
</li>
<li class="mobileNav__item">
<a href="">Massachusetts</a>
<ul>
<li><a href="#">Boston</a></li>
<li><a href="#">Cambridge</a></li>
<li><a href="#">Lowell</a></li>
<li><a href="#">Plymouth</a></li>
<li><a href="#">Salem</a></li>
<li><a href="#">Springfield</a></li>
<li><a href="#">Worcester</a></li>
</ul>
</li>
</ul>
</bp-mobile-navigation>
</div>
</header>
.siteHeader {
box-shadow: $low-shadow;
&__container {
align-items: center;
display: flex;
padding-right: 0;
}
&__brand {
align-items: center;
color: $primary;
display: flex;
gap: $h-space;
margin-right: 2rem;
}
&__logo {
margin-right: .5rem;
}
&__siteName {
color: $plain-text;
font-weight: bold;
@include at-each(1.5rem, md 1.75rem, lg 2rem) using ($size) {
font-size: $size;
}
}
&__end {
margin-left: auto;
}
@include at(lg) {
&__brand {
padding: $v-space 0;
}
}
}