Skip to content

updated nav #784

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
helms-charity merged 4 commits into from
Apr 8, 2026
Merged

updated nav #784

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e17f0bc
updated nav
Apr 8, 2026
1e26bdf
padding and alignment changes
Apr 8, 2026
eea6af9
cards fix
Apr 8, 2026
5e82697
height fix
Apr 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 10 additions & 9 deletions blocks/category-nav/category-nav.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -407,7 +407,6 @@ body.is-framework-page .section#bell-outline {
gap: 6px;
flex-wrap: wrap;
position: relative;
z-index: 2;
align-items: flex-start;
justify-content: flex-start;
top: -12px;
Expand All @@ -424,12 +423,15 @@ body.is-framework-page .section#bell-outline {
.category-nav-card .category-nav-tag {
padding: 4px 10px;
border-radius: 8px;
font-size: 11px;
line-height: 1.5;
font-size: 9px;
line-height: 11px;
font-weight: 600;
letter-spacing: 0;
white-space: nowrap;
box-shadow: 0 2px 4px rgb(0 0 0 / 12%);
border: 1px solid rgb(0 0 0 / 12%);
display: inline-block;
text-transform: uppercase;
color: var(--text-color);
}

/* Remove the red arrow pseudo-element from tags (override nav-pane.css) */
Expand All @@ -443,7 +445,7 @@ body.is-framework-page .section#bell-outline {
.category-nav-card .category-nav-tag.tg-clr-pale-yellow { background-color: #fffbe6; }
.category-nav-card .category-nav-tag.tg-clr-pale-cyan { background-color: #ebffff; }
.category-nav-card .category-nav-tag.tg-clr-pale-lavender { background-color: #ffeffd; }
.category-nav-card .category-nav-tag.tg-clr-pale-rose { background-color: #ffcece; }
.category-nav-card .category-nav-tag.tg-clr-pale-rose { background-color: #fae1e1; }
.category-nav-card .category-nav-tag.tg-clr-pale-pink { background-color: #ffe1ec; }
.category-nav-card .category-nav-tag.tg-clr-pale-purple { background-color: #f2e5ff; }
.category-nav-card .category-nav-tag.tg-clr-pale-mint { background-color: #eefff2; }
Expand All @@ -460,7 +462,6 @@ body.is-framework-page .section#bell-outline {
font-weight: 700;
line-height: 1.4;
position: relative;
z-index: 1;
}

/* Icon Right Arrow */
Expand Down Expand Up @@ -531,7 +532,7 @@ header nav .nav-sections .nav-fragment-section-content .category-nav-explore-lin
}

.nav-fragment-content .category-nav-card-link > .category-nav-card-title{
color: var(--text-red-color);
color: var(--color-red-800);
font-weight: 600;
font-size: 13px;
line-height: 17px;
Expand All @@ -541,7 +542,7 @@ header nav .nav-sections .nav-fragment-section-content .category-nav-explore-lin
.nav-fragment-content .category-nav-card .category-nav-tags {
position: relative;
display: flex;
width: fit-content;
width: 71%;
margin-left: 11px;
top: unset;
left: unset;
Expand All @@ -551,7 +552,7 @@ header nav .nav-sections .nav-fragment-section-content .category-nav-explore-lin
.nav-fragment-content .category-nav-card .category-nav-card-image {
margin: 10px 0 0;
display: inline-block;
width: fit-content;
width: 23%;
height: auto;
}

Expand Down
53 changes: 44 additions & 9 deletions blocks/header/header.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ header nav .nav-sections .default-content-wrapper>ul>li {
header nav .nav-sections .default-content-wrapper>ul>li p {
display: block;
min-width: 70px;
min-height: 52px;
min-height: 46px;
padding: 16px 40px 16px 20px;
margin: 0;
font-size: var(--body-font-size-l);
Expand All @@ -72,6 +72,18 @@ header nav .nav-sections .default-content-wrapper>ul>li p a {
text-decoration: none;
}

header nav .new-tag {
display: inline-block;
padding: 4px 10px;
background: linear-gradient(135deg, #9B1E26 0%, #56070C 98.08%);
border-radius: 6px;
color: #fff;
font-size: 10px;
line-height: 14px;
font-weight: 700;
margin-left: 8px;
}

/* Accordion chevron icon */
header nav .nav-sections .default-content-wrapper>ul>li::after {
content: '';
Expand Down Expand Up @@ -275,7 +287,7 @@ header nav .nav-sections .nav-fragment-section[aria-expanded='true']::after {
header nav .nav-sections .nav-fragment-section-content {
list-style: none;
padding-left: 0;
margin: 0;
margin: 0 16px;
overflow: hidden;
max-height: 0;
transition: max-height 0.3s ease-in-out;
Expand Down Expand Up @@ -675,7 +687,7 @@ header nav .nav-sections.tab-view-active .nav-h4-section-content > li {

/* Tab view: Ensure H4 content has same indentation as other content */
header nav .nav-sections.tab-view-active .nav-fragment-section-content p.button-container {
padding-left: 40px;
padding-left: 24px;
padding-right: 20px;
border-bottom: none;
font-size: var(--body-font-size-s);
Expand Down Expand Up @@ -1671,6 +1683,11 @@ header nav .nav-sections .default-content-wrapper>ul>li .nav-h4-section-content
cursor: pointer;
}

header nav li.nav-link-only,
header nav .category-nav-eyebrow-title {
display: none !important;
}

/* Mobile: Search input in expanded nav */
header nav[aria-expanded='true'] .nav-tools #search-box .search-input {
flex: 1;
Expand Down Expand Up @@ -1956,6 +1973,7 @@ header nav[aria-expanded='true'] .nav-tools #search-box .search-input {
align-self: start;
position: relative;
z-index: 1;
margin: 0;
}

header nav .nav-sections .default-content-wrapper>ul>li>ul>li {
Expand Down Expand Up @@ -2027,7 +2045,7 @@ header nav[aria-expanded='true'] .nav-tools #search-box .search-input {
background: var(--color-white-200);
box-shadow: none;
border-radius: 0;
height: 520px; /* Fixed default height */
height: 565px;
max-height: calc(100vh - 150px); /* Constrain on smaller viewports */
overflow: visible; /* Parent doesn't scroll, only children */
}
Expand All @@ -2044,7 +2062,7 @@ header nav[aria-expanded='true'] .nav-tools #search-box .search-input {
padding-right: 236px; /* Reserve space for discover card: 220px width + 16px gap */
background: var(--color-white-200);
border-radius: 8px;
height: 520px; /* Fixed default height - matches parent */
height: 565px; /* Fixed default height - matches parent */
max-height: calc(100vh - 150px); /* Constrain on smaller viewports */
overflow-y: auto; /* Scroll the entire content area */
display: grid;
Expand Down Expand Up @@ -2183,7 +2201,7 @@ header nav[aria-expanded='true'] .nav-tools #search-box .search-input {
padding-top: var(--spacing-xs);
}

header nav .nav-sections .nav-discover-section .cards-card-image {
header nav .nav-sections .nav-discover-section .cards.blog-posts .blog-post-card .cards-card-image {
width: 100%;
overflow: hidden;
max-height: 110px;
Expand Down Expand Up @@ -2263,6 +2281,25 @@ header nav[aria-expanded='true'] .nav-tools #search-box .search-input {
display: none;
}

header nav li.nav-link-only {
padding: var(--spacing-xs) 20px;
transition: color 0.2s ease;
border-left: 3px solid transparent;
border-bottom: none !important;
display: block !important;

a.category-nav-explore-link {
font-size: var(--body-font-size-xs);
font-weight: 600;
color: var(--color-red-600);
text-decoration: none;
}
}

header nav .category-nav-eyebrow-title {
display: block !important;
}

/* =================================================================
DESKTOP: COLUMN 2 CONTENT STYLING
================================================================= */
Expand All @@ -2276,7 +2313,6 @@ header nav[aria-expanded='true'] .nav-tools #search-box .search-input {
height: auto;
border-bottom: none;
font-size: var(--body-font-size-xs);
font-weight: 400;
line-height: 1.3;
display: block;
white-space: normal;
Expand Down Expand Up @@ -2454,8 +2490,7 @@ header nav[aria-expanded='true'] .nav-tools #search-box .search-input {
box-shadow: none;
border-bottom: 1px solid var(--color-gray-100);
z-index: 2;

/* height: 518px; */
height: 566px;
max-height: 100%;
overflow-y: auto;
}
Expand Down
44 changes: 40 additions & 4 deletions blocks/header/header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1290,6 +1290,30 @@ export default async function decorate(block) {
}
}

/**
* Wrap literal "NEW" in nav fragment section titles so it can be styled (e.g. badge).
* @param {Element} ul Root ul.nav-fragment-content
*/
function wrapNavFragmentNewBadgeInTitles(ul) {
ul.querySelectorAll(
':scope > li.nav-fragment-section > p:first-child',
).forEach((p) => {
const text = p.textContent;
if (!text.includes('NEW') || p.querySelector('span.new-tag')) return;
const parts = text.split('NEW');
p.textContent = '';
parts.forEach((part, i) => {
p.append(document.createTextNode(part));
if (i < parts.length - 1) {
const badge = document.createElement('span');
badge.className = 'new-tag';
badge.textContent = 'NEW';
p.append(badge);
}
});
});
}

/**
* Load fragment content and build structure based on viewport.
* Both Desktop and Mobile: use nested accordion structure.
Expand All @@ -1312,12 +1336,24 @@ export default async function decorate(block) {
return false;
}

if (fragmentPath === '/framework/ccnav1') {
const allCardsLi = document.createElement('li');
allCardsLi.classList.add('nav-link-only');
const allCardsLink = document.createElement('a');
allCardsLink.href = '/credit-card';
allCardsLink.className = 'category-nav-explore-link';
allCardsLink.textContent = 'All Credit Cards';
allCardsLi.appendChild(allCardsLink);
ul.prepend(allCardsLi);
}

navSection.appendChild(ul);
navSection.setAttribute('data-fragment-loaded', 'true');
navSection.removeAttribute('data-fragment-loading');
navSection.classList.add('nav-drop');
decorateCategoryNavBlocks(ul);
await decorateFragmentBlocks(ul);
wrapNavFragmentNewBadgeInTitles(ul);
if (isMobile) setupMobileAccordionBehavior(ul);
else setupDesktopAccordionBehavior(ul);
return true;
Expand Down Expand Up @@ -1356,8 +1392,8 @@ export default async function decorate(block) {
toggleAllNavSections(navSections);
navSection.setAttribute('aria-expanded', 'true');

// Auto-expand first section in the dropdown
const firstSection = navSection.querySelector('.nav-fragment-section:first-child');
// First accordion row (skip leading all-cards li)
const firstSection = navSection.querySelector('.nav-fragment-content > .nav-fragment-section');
if (firstSection) {
firstSection.setAttribute('aria-expanded', 'true');
}
Expand All @@ -1375,8 +1411,8 @@ export default async function decorate(block) {
toggleAllNavSections(navSections);
navSection.setAttribute('aria-expanded', 'true');

// Auto-expand first section in the dropdown
const firstSection = navSection.querySelector('.nav-fragment-section:first-child');
// First accordion row (skip leading all-cards li)
const firstSection = navSection.querySelector('.nav-fragment-content > .nav-fragment-section');
if (firstSection) {
firstSection.setAttribute('aria-expanded', 'true');
}
Expand Down
Loading