<div class="header">
<div class="header__navigation">
<div class="header__eyebrow-navigation">
<ul class="eyebrow-menu">
<li class="eyebrow-menu__item">
<a href="#" class="
eyebrow-menu__item-link
">
Contact Us
</a>
</li>
<span class="eyebrow-menu__separator"><svg width="2" height="12" viewBox="0 0 2 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="Vector 5" d="M1 0V12" stroke="#4559A9" />
</svg>
</span>
<li class="eyebrow-menu__item">
<a href="#" class="
eyebrow-menu__item-link
eyebrow-menu__item-link--is-active
">
Apply
</a>
</li>
<span class="eyebrow-menu__separator"><svg width="2" height="12" viewBox="0 0 2 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="Vector 5" d="M1 0V12" stroke="#4559A9" />
</svg>
</span>
<li class="eyebrow-menu__item">
<a href="#" class="
eyebrow-menu__item-link
">
Make a Gift
</a>
</li>
</ul>
</div>
<div class="header__main-navigation">
<div class="site-logo-link site-logo-link--header site-logo-link--">
<div class="site-logo-link__logo-container">
<a href="https://ufl.edu/" class="site-logo-link__logo-university" aria-label="University of Florida">
<span class="site-logo-link__text">
University of Florida homepage
</span>
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80" fill="none">
<g id="Monogram">
<rect width="79.4059" height="80" fill="#F5592F" />
<g id="Union">
<path d="M38.8529 44.1464V27.963H41.1105V22H29.7943V27.963H31.9962V42.1356C31.9962 48.0709 31.2994 50.9276 27.0209 50.9276C22.7425 50.9276 22.0457 48.0709 22.0457 42.1356V27.963H24.2337V22H12.9035V27.963H15.1472V44.1464C15.1472 47.6826 15.1472 50.5809 16.8196 53.188C18.687 56.1418 22.0875 58 27.0209 58C35.7451 58 38.8529 53.4792 38.8529 44.1464Z" fill="white" />
<path d="M51.1307 51.5932V42.4823H59.5761V36.4638H51.1307V27.963H60.3984V31.2635H66.5025V22H42.0443V27.963H44.3298V51.5932H42.0443V57.5978H53.3466V51.5932H51.1307Z" fill="white" />
</g>
</g>
</svg>
</a>
<a href="/" class="site-logo-link__logo-college" aria-label="College of the Arts">
<span class="site-logo-link__text">
Homepage
</span>
<svg width="300" height="16" viewBox="0 0 300 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.1148 12.7695L13.8448 14.0922C12.2283 15.3386 10.0382 16 7.35263 16C2.71161 16 0 13.1256 0 8.01272C0 2.8744 2.71161 0 7.61336 0C9.54278 0 11.759 0.483306 13.193 1.32273L12.5933 2.64547C11.1854 2.00954 9.30812 1.62798 7.66551 1.62798C3.83275 1.62798 1.82512 3.86645 1.82512 8.03815C1.82512 12.0572 3.8849 14.372 7.43085 14.372C9.75136 14.372 11.5765 13.8378 13.1148 12.7695Z" fill="#162F93" />
<path d="M25.8917 0C30.5849 0 33.2965 2.8744 33.2965 8.03815C33.2965 13.1256 30.5849 16 25.8917 16C21.1725 16 18.4609 13.1256 18.4609 8.03815C18.4609 2.8744 21.1725 0 25.8917 0ZM25.8657 14.372C29.4638 14.372 31.4714 12.159 31.4714 8.03815C31.4714 3.86645 29.4638 1.62798 25.8657 1.62798C22.2936 1.62798 20.286 3.86645 20.286 8.03815C20.286 12.159 22.2936 14.372 25.8657 14.372Z" fill="#162F93" />
<path d="M49.1195 15.7711H39.2899V0.254371H41.0629V14.1176H49.1195V15.7711Z" fill="#162F93" />
<path d="M64.2194 15.7711H54.3898V0.254371H56.1628V14.1176H64.2194V15.7711Z" fill="#162F93" />
<path d="M80.1276 15.7711H69.4897V0.254371H79.8929V1.88235H71.2627V7.12242H78.8239V8.7504H71.2627V14.1431H80.1276V15.7711Z" fill="#162F93" />
<path d="M99.5686 7.91097V13.8378C97.3003 15.3386 95.0058 16 92.2682 16C87.8357 16 85.1241 13.1256 85.1241 8.03815C85.1241 3.00159 87.8879 0 92.6853 0C94.693 0 97.0135 0.432431 98.7864 1.24642L98.2389 2.6709C96.5963 2.00954 94.6408 1.62798 92.8157 1.62798C89.0351 1.62798 86.9492 3.94277 86.9492 8.01272C86.9492 12.1335 88.9569 14.372 92.3464 14.372C94.4583 14.372 96.2313 13.9905 97.8739 12.8967V9.51351H91.9553V7.91097H99.5686Z" fill="#162F93" />
<path d="M116.566 15.7711H105.928V0.254371H116.331V1.88235H107.701V7.12242H115.262V8.7504H107.701V14.1431H116.566V15.7711Z" fill="#162F93" />
<path d="M138.16 0C142.853 0 145.565 2.8744 145.565 8.03815C145.565 13.1256 142.853 16 138.16 16C133.441 16 130.729 13.1256 130.729 8.03815C130.729 2.8744 133.441 0 138.16 0ZM138.134 14.372C141.732 14.372 143.74 12.159 143.74 8.03815C143.74 3.86645 141.732 1.62798 138.134 1.62798C134.562 1.62798 132.554 3.86645 132.554 8.03815C132.554 12.159 134.562 14.372 138.134 14.372Z" fill="#162F93" />
<path d="M153.331 7.37679H160.658V9.00477H153.331V15.7711H151.558V0.254371H161.701V1.88235H153.331V7.37679Z" fill="#162F93" />
<path d="M186.299 1.88235H180.536V15.7711H178.737V1.88235H173.001V0.254371H186.299V1.88235Z" fill="#162F93" />
<path d="M204.115 15.7711H202.342V8.64865H192.826V15.7711H191.053V0.254371H192.826V7.02067H202.342V0.254371H204.115V15.7711Z" fill="#162F93" />
<path d="M222.163 15.7711H211.525V0.254371H221.928V1.88235H213.298V7.12242H220.859V8.7504H213.298V14.1431H222.163V15.7711Z" fill="#162F93" />
<path d="M239.143 11.6757L237.344 15.7711H235.414L242.271 0.254371H244.644L251.475 15.7711H249.572L247.747 11.6757H239.143ZM247.069 10.0731L244.096 3.33227C243.81 2.59459 243.575 1.9841 243.445 1.50079C243.314 1.9841 243.08 2.59459 242.793 3.33227L239.821 10.0731H247.069Z" fill="#162F93" />
<path d="M269.057 15.6184V15.7711H267.101L262.538 10.4801H258.445V15.7711H256.672V0.254371H262.304C266.475 0.254371 268.666 2.06041 268.666 5.39269C268.666 7.91097 266.971 9.74245 264.416 10.3021L269.057 15.6184ZM258.445 8.85215H262.512C265.12 8.85215 266.867 7.55485 266.867 5.39269C266.867 3.12878 265.302 1.90779 262.33 1.88235H258.445V8.85215Z" fill="#162F93" />
<path d="M284.995 1.88235H279.233V15.7711H277.434V1.88235H271.698V0.254371H284.995V1.88235Z" fill="#162F93" />
<path d="M299.479 1.24642L298.905 2.64547C297.132 1.88235 295.463 1.55167 293.716 1.55167C291.787 1.55167 290.64 2.64547 290.64 3.81558C290.64 5.6725 291.865 6.05405 295.098 7.09698C298.357 8.16534 300 9.15739 300 11.7266C300 14.7536 297.627 16 294.89 16C292.543 16 289.91 15.1606 288.059 13.8124L288.789 12.4897C290.718 13.7107 292.986 14.3975 294.811 14.3975C296.949 14.3975 298.175 13.5326 298.175 11.9555C298.175 10.1749 297.236 9.53895 293.664 8.44515C290.692 7.52941 288.815 6.81717 288.815 3.9682C288.815 1.62798 290.718 0 293.742 0C295.542 0 297.601 0.406994 299.479 1.24642Z" fill="#162F93" />
</svg>
</a>
</div>
</div>
<div class="header__main-nav-and-search-container">
<div role="navigation" aria-label="Main Navigation" class="main-navigation">
<ul class="main-navigation__list">
<li class="main-navigation__item">
<a class="
main-navigation__item-link
main-navigation__item-link--active
main-navigation__item-link--active-trail
" href="https://google.com">Programs & Schools
</a>
</li>
<li class="main-navigation__item">
<a class="
main-navigation__item-link
" href="http://google.com">Admissions & Aid
</a>
</li>
<li class="main-navigation__item">
<a aria-expanded="false" class="
js-mega-menu-toggle
main-navigation__item-link
" href="http://google.com">Research & Creative Work
<div class="main-navigation__item-link-icon-container">
<div class="main-navigation__item-link-icon">
<svg width="6" height="12" viewBox="0 0 6 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="_mark icon-right-chevron__shape" fill-rule="evenodd" clip-rule="evenodd" d="M0.400059 0.200059C0.841887 -0.131312 1.46869 -0.041769 1.80006 0.400059L6.00006 6.00006L1.80006 11.6001C1.46869 12.0419 0.841887 12.1314 0.400059 11.8001C-0.0417684 11.4687 -0.131312 10.8419 0.200059 10.4001L3.50006 6.00006L0.200059 1.60006C-0.131312 1.15823 -0.0417684 0.53143 0.400059 0.200059Z" fill="black" />
</svg>
</div>
</div>
</a>
<div class="main-navigation__children">
<div data-active="false" class="mega-menu js-mega-menu">
<div class="mega-menu__container">
<ul class="mega-menu__list">
<li class="mega-menu__item">
<a class="
mega-menu__item-link
" href="http://google.com">Interior Page 1
</a>
</li>
<li class="mega-menu__item">
<a class="
mega-menu__item-link
" href="http://google.com">Interior Page 2
</a>
</li>
<li class="mega-menu__item">
<a class="
mega-menu__item-link
mega-menu__item-link--active
" href="http://google.com">Interior Page 3
</a>
</li>
<li class="mega-menu__item">
<a class="
mega-menu__item-link
mega-menu__item-link--active-trail
" href="http://google.com">Interior Page 4
</a>
</li>
<li class="mega-menu__item">
<a class="
mega-menu__item-link
" href="http://google.com">Interior Page 5
</a>
</li>
<li class="mega-menu__item">
<a class="
mega-menu__item-link
" href="http://google.com">Interior Page 6
</a>
</li>
<li class="mega-menu__item">
<a class="
mega-menu__item-link
" href="http://google.com">Interior Page 7
</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="main-navigation__item">
<a class="
main-navigation__item-link
" href="http://google.com">About
</a>
</li>
</ul>
</div>
<button aria-label="Toggle search form" aria-expanded="false" class="search-toggle" data-search-toggle>
<span class="search-toggle__content-container search-toggle__content-container--collapsed">
<div class="color-circle-icon color-circle-icon--blue color-circle-icon--big">
<span class="color-circle-icon__icon">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="search-large-icon" width="24" height="25" fill="none" viewBox="0 0 24 25">
<path class="search-large-icon__shape" fill="#E84A27" d="m19.6 21.5-6.3-6.3a6.096 6.096 0 0 1-3.8 1.3c-1.817 0-3.354-.63-4.612-1.887C3.629 13.354 3 11.817 3 10c0-1.817.63-3.354 1.888-4.612C6.146 4.129 7.683 3.5 9.5 3.5c1.817 0 3.354.63 4.613 1.888C15.37 6.646 16 8.183 16 10a6.096 6.096 0 0 1-1.3 3.8l6.3 6.3-1.4 1.4Zm-10.1-7c1.25 0 2.313-.438 3.188-1.313C13.562 12.313 14 11.25 14 10c0-1.25-.438-2.313-1.313-3.188C11.813 5.938 10.75 5.5 9.5 5.5c-1.25 0-2.313.438-3.188 1.313S5 8.75 5 10c0 1.25.438 2.313 1.313 3.188.875.874 1.937 1.312 3.187 1.312Z" />
</svg> </span>
</div>
</span>
<span class="search-toggle__content-container search-toggle__content-container--expanded">
<div class="color-circle-icon color-circle-icon--blue color-circle-icon--small">
<span class="color-circle-icon__icon">
<svg class="x" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
<path class="x__shape" d="M1.6129 0.209705L1.70711 0.292893L6 4.585L10.2929 0.292893C10.6834 -0.0976311 11.3166 -0.0976311 11.7071 0.292893C12.0676 0.653377 12.0953 1.22061 11.7903 1.6129L11.7071 1.70711L7.415 6L11.7071 10.2929C12.0976 10.6834 12.0976 11.3166 11.7071 11.7071C11.3466 12.0676 10.7794 12.0953 10.3871 11.7903L10.2929 11.7071L6 7.415L1.70711 11.7071C1.31658 12.0976 0.683418 12.0976 0.292893 11.7071C-0.0675907 11.3466 -0.0953203 10.7794 0.209705 10.3871L0.292893 10.2929L4.585 6L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893C0.653377 -0.0675907 1.22061 -0.0953203 1.6129 0.209705Z" fill="#303030" />
</svg>
</span>
</div>
</span>
</button>
</div>
<button aria-label="Toggle main navigation" aria-expanded="false" class="small-main-navigation-toggle js-small-main-navigation-toggle">
<span class="small-main-navigation-toggle__content-container small-main-navigation-toggle__content-container--collapsed">
<span class="small-main-navigation-toggle__icon">
<svg class="menu" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g class="menu__shape" mask="url(#mask0_3722_41141)">
<path d="M3 18V16H21V18H3ZM3 13V11H21V13H3ZM3 8V6H21V8H3Z" fill="#162F93" />
</g>
</svg>
</span>
</span>
<span class="small-main-navigation-toggle__content-container small-main-navigation-toggle__content-container--expanded">
<span class="small-main-navigation-toggle__icon">
<svg class="x" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
<path class="x__shape" d="M1.6129 0.209705L1.70711 0.292893L6 4.585L10.2929 0.292893C10.6834 -0.0976311 11.3166 -0.0976311 11.7071 0.292893C12.0676 0.653377 12.0953 1.22061 11.7903 1.6129L11.7071 1.70711L7.415 6L11.7071 10.2929C12.0976 10.6834 12.0976 11.3166 11.7071 11.7071C11.3466 12.0676 10.7794 12.0953 10.3871 11.7903L10.2929 11.7071L6 7.415L1.70711 11.7071C1.31658 12.0976 0.683418 12.0976 0.292893 11.7071C-0.0675907 11.3466 -0.0953203 10.7794 0.209705 10.3871L0.292893 10.2929L4.585 6L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893C0.653377 -0.0675907 1.22061 -0.0953203 1.6129 0.209705Z" fill="#303030" />
</svg>
</span>
</span>
</button>
<div role="navigation" aria-label="Main Navigation" class="small-main-navigation">
<div class="small-main-navigation__search">
<div class="quick-search">
<form role="search" method="get" id="quick-search-small-form" class="quick-search__form" action="">
<input id="quick-search-small-input" name="s" type="text" placeholder="Search" class="quick-search__input">
<label for="quick-search-small-input" class="quick-search__input-label">
Search the website
</label>
<div class="quick-search__icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" fill="none" viewBox="0 0 24 25">
<path class="_mark" fill="#fff" d="m19.6 21.5-6.3-6.3a6.096 6.096 0 0 1-3.8 1.3c-1.817 0-3.354-.63-4.612-1.887C3.629 13.354 3 11.817 3 10c0-1.817.63-3.354 1.888-4.612C6.146 4.129 7.683 3.5 9.5 3.5c1.817 0 3.354.63 4.613 1.888C15.37 6.646 16 8.183 16 10a6.096 6.096 0 0 1-1.3 3.8l6.3 6.3-1.4 1.4Zm-10.1-7c1.25 0 2.313-.438 3.188-1.313C13.562 12.313 14 11.25 14 10c0-1.25-.438-2.313-1.313-3.188C11.813 5.938 10.75 5.5 9.5 5.5c-1.25 0-2.313.438-3.188 1.313S5 8.75 5 10c0 1.25.438 2.313 1.313 3.188.875.874 1.937 1.312 3.187 1.312Z" />
</svg>
</div>
<input aria-label="submit search query" class="quick-search__submit" type="submit" id="quick-search-small-submit" value="Search" />
</form>
</div>
</div>
<ul class="small-main-navigation__list">
<li class="small-main-navigation__item">
<div class="small-main-navigation__item-container">
<a class="
small-main-navigation__item-link
small-main-navigation__item-link--active
small-main-navigation__item-link--active-trail" href="https://google.com">Programs & Schools
</a>
</div>
</li>
<li class="small-main-navigation__item">
<div class="small-main-navigation__item-container">
<a class="
small-main-navigation__item-link
" href="http://google.com">Admissions & Aid
</a>
</div>
</li>
<li class="small-main-navigation__item">
<div class="small-main-navigation__item-container">
<a class="
small-main-navigation__item-link
" href="http://google.com">Research & Creative Work
</a>
<button aria-expanded="false" class="small-main-navigation__item-toggle" aria-label="toggle Research & Creative Work menu">
<span class="small-main-navigation__item-toggle-icon">
<svg width="6" height="12" viewBox="0 0 6 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="_mark icon-right-chevron__shape" fill-rule="evenodd" clip-rule="evenodd" d="M0.400059 0.200059C0.841887 -0.131312 1.46869 -0.041769 1.80006 0.400059L6.00006 6.00006L1.80006 11.6001C1.46869 12.0419 0.841887 12.1314 0.400059 11.8001C-0.0417684 11.4687 -0.131312 10.8419 0.200059 10.4001L3.50006 6.00006L0.200059 1.60006C-0.131312 1.15823 -0.0417684 0.53143 0.400059 0.200059Z" fill="black" />
</svg>
</span>
</button>
</div>
<div class="small-main-navigation__children">
<ul class="small-main-navigation__children-list">
<li class="small-main-navigation__children-item">
<a class="
small-main-navigation__children-item-link
" href="http://google.com">Interior Page 1
</a>
</li>
<li class="small-main-navigation__children-item">
<a class="
small-main-navigation__children-item-link
" href="http://google.com">Interior Page 2
</a>
</li>
<li class="small-main-navigation__children-item">
<a class="
small-main-navigation__children-item-link
small-main-navigation__children-item-link--active
" href="http://google.com">Interior Page 3
</a>
</li>
<li class="small-main-navigation__children-item">
<a class="
small-main-navigation__children-item-link
small-main-navigation__children-item-link--active-trail
" href="http://google.com">Interior Page 4
</a>
</li>
<li class="small-main-navigation__children-item">
<a class="
small-main-navigation__children-item-link
" href="http://google.com">Interior Page 5
</a>
</li>
<li class="small-main-navigation__children-item">
<a class="
small-main-navigation__children-item-link
" href="http://google.com">Interior Page 6
</a>
</li>
<li class="small-main-navigation__children-item">
<a class="
small-main-navigation__children-item-link
" href="http://google.com">Interior Page 7
</a>
</li>
</ul>
</div>
</li>
<li class="small-main-navigation__item">
<div class="small-main-navigation__item-container">
<a class="
small-main-navigation__item-link
" href="http://google.com">About
</a>
</div>
</li>
</ul>
<div class="small-main-navigation__eyebrow">
<ul class="eyebrow-menu">
<li class="eyebrow-menu__item">
<a href="#" class="
eyebrow-menu__item-link
">
Contact Us
</a>
</li>
<span class="eyebrow-menu__separator"><svg width="2" height="12" viewBox="0 0 2 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="Vector 5" d="M1 0V12" stroke="#4559A9" />
</svg>
</span>
<li class="eyebrow-menu__item">
<a href="#" class="
eyebrow-menu__item-link
eyebrow-menu__item-link--is-active
">
Apply
</a>
</li>
<span class="eyebrow-menu__separator"><svg width="2" height="12" viewBox="0 0 2 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="Vector 5" d="M1 0V12" stroke="#4559A9" />
</svg>
</span>
<li class="eyebrow-menu__item">
<a href="#" class="
eyebrow-menu__item-link
">
Make a Gift
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div role="search" aria-label="Search Form" aria-expanded="true" class="search">
<form class="search-form search-form--dark" aria-label="search page form" role="search" method="get" id="search-form" action="">
<div class="search-form__container">
<label class="search-form__input-label" for="search-input">Search for keywords</label>
<input class="search-form__input" placeholder="Search" type="text" id="search-input" value="" name="s" required="required" />
<input class="search-form__submit" type="submit" id="search-submit" aria-label="Search" value="" />
<div class="search-form__submit-icon">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="search-large-icon" width="24" height="25" fill="none" viewBox="0 0 24 25">
<path class="search-large-icon__shape" fill="#E84A27" d="m19.6 21.5-6.3-6.3a6.096 6.096 0 0 1-3.8 1.3c-1.817 0-3.354-.63-4.612-1.887C3.629 13.354 3 11.817 3 10c0-1.817.63-3.354 1.888-4.612C6.146 4.129 7.683 3.5 9.5 3.5c1.817 0 3.354.63 4.613 1.888C15.37 6.646 16 8.183 16 10a6.096 6.096 0 0 1-1.3 3.8l6.3 6.3-1.4 1.4Zm-10.1-7c1.25 0 2.313-.438 3.188-1.313C13.562 12.313 14 11.25 14 10c0-1.25-.438-2.313-1.313-3.188C11.813 5.938 10.75 5.5 9.5 5.5c-1.25 0-2.313.438-3.188 1.313S5 8.75 5 10c0 1.25.438 2.313 1.313 3.188.875.874 1.937 1.312 3.187 1.312Z" />
</svg>
</div>
</div>
</form>
</div>
<div class="header">
<div class="header__navigation">
<div class="header__eyebrow-navigation">
{% include 'partials/navigation/eyebrow/eyebrow.twig' %}
</div>
<div class="header__main-navigation">
{% include 'bits/site-logo-link/site-logo-link.twig' %}
<div class="header__main-nav-and-search-container">
{% include 'partials/navigation/main-navigation/main-navigation.twig' %}
{% include 'partials/search-toggle/search-toggle.twig' %}
</div>
{% include 'partials/navigation/small-main-navigation/small-main-navigation.twig' %}
</div>
</div>
</div>
<div
role="search"
aria-label="Search Form"
aria-expanded="true"
class="search">
{% include 'partials/search-form/search-form.twig' with {
background: 'dark',
} %}
</div>
{
"mainMenu": {
"currentPageInMenu": true,
"items": [
{
"title": "Programs & Schools",
"url": "https://google.com",
"isActive": true,
"isChildActive": false,
"isDescendantActive": true,
"children": []
},
{
"title": "Admissions & Aid",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Research & Creative Work",
"url": "http://google.com",
"isActive": false,
"isChildActive": true,
"isDescendantActive": false,
"children": [
{
"title": "Interior Page 1",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Interior Page 2",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Interior Page 3",
"url": "http://google.com",
"isActive": true,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Interior Page 4",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": true,
"children": []
},
{
"title": "Interior Page 5",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Interior Page 6",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Interior Page 7",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
}
]
},
{
"title": "About",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
}
]
},
"eyebrowMenu": {
"items": [
{
"title": "Contact Us",
"url": "#"
},
{
"title": "Apply",
"url": "#",
"isActive": true
},
{
"title": "Make a Gift",
"url": "#"
}
]
}
}
.header
box-shadow 0 4px 4px rgba(0, 0, 0, 0.25)
display flex
position relative
&__navigation
display flex
flex 1
flex-direction column
justify-content flex-end
+above(breakpointHeaderMedium)
justify-content space-between
&__eyebrow-navigation
display flex
background-color darkBlue
justify-content flex-end
padding 8px 0
+below(breakpointHeaderLarge)
display none
&__main-navigation
align-items center
display flex
justify-content space-between
padding 0 24px 0 0
+above(breakpointHeaderSmall)
padding-right 48px
+above(breakpointHeaderLarge)
padding-right 56px
&__logo
display none
+above(breakpointHeaderLarge)
display block
&--mobile
display block
+above(breakpointHeaderLarge)
display none
&__main-nav-and-search-container
align-items center
display flex
.search
--backgroundColor linear-gradient(180deg, #002657 0%, #162F93 100%)
display none
background var(--backgroundColor)
padding 48px 20%
position absolute
align-items center
width 100%
&[data-collapsing]
animation slideOut 0.5s
&[data-expanding]
z-index 3
animation slideIn 0.5s
&[data-expanded=true]
z-index 3
opacity 1
display block
No notes defined.