diff --git a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/macros/secondary-nav.html b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/macros/secondary-nav.html
index 119bbccc6bb..13e68c571da 100644
--- a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/macros/secondary-nav.html
+++ b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/macros/secondary-nav.html
@@ -17,14 +17,14 @@
aria-label="Section navigation">
diff --git a/cfgov/regulations3k/jinja2/regulations3k/regulations3k-secondary-nav.html b/cfgov/regulations3k/jinja2/regulations3k/regulations3k-secondary-nav.html
index e5060a4c8be..a45babfbd4c 100644
--- a/cfgov/regulations3k/jinja2/regulations3k/regulations3k-secondary-nav.html
+++ b/cfgov/regulations3k/jinja2/regulations3k/regulations3k-secondary-nav.html
@@ -21,10 +21,10 @@
- {{ svg_icon('plus-round') }}
+ {{ svg_icon('down') }}
- {{ svg_icon('minus-round') }}
+ {{ svg_icon('up') }}
diff --git a/cfgov/unprocessed/apps/regulations3k/css/reg-navigation.less b/cfgov/unprocessed/apps/regulations3k/css/reg-navigation.less
index 450d912f87d..3df707b5273 100644
--- a/cfgov/unprocessed/apps/regulations3k/css/reg-navigation.less
+++ b/cfgov/unprocessed/apps/regulations3k/css/reg-navigation.less
@@ -13,9 +13,10 @@
.respond-to-max( @bp-sm-max, {
background-color: @gray-5;
- border-bottom: 1px solid @gray-40;
- border-top: 1px solid @gray-40;
- margin-bottom: unit( @grid_gutter-width / 2 / @base-font-size-px, em );
+ margin-bottom: unit( @grid_gutter-width / @base-font-size-px, em );
+
+ // Add drop-shadow.
+ box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
} );
// TODO - this will be updated to data-open='true' in newer expandables.
diff --git a/cfgov/unprocessed/css/breadcrumbs.less b/cfgov/unprocessed/css/breadcrumbs.less
index 221e9c7b839..5d512e1b141 100644
--- a/cfgov/unprocessed/css/breadcrumbs.less
+++ b/cfgov/unprocessed/css/breadcrumbs.less
@@ -1,18 +1,22 @@
-.breadcrumbs {
+.m-breadcrumbs {
// Mobile size.
+ position: relative;
display: flex;
- flex-wrap: wrap;
gap: unit(10px / @base-font-size-px, rem);
align-items: center;
+ flex-wrap: wrap;
+
font-size: unit(14px / @base-font-size-px, rem);
padding-top: unit(15px / @base-font-size-px, rem);
padding-bottom: unit(15px / @base-font-size-px, rem);
- margin-left: unit(20px / @base-font-size-px, rem);
- margin-right: unit(20px / @base-font-size-px, rem);
+ min-height: 33px;
+ width: calc(100vw - 65px);
- .cf-icon-svg {
- fill: @pacific;
- margin-left: unit(-20px / @base-font-size-px, rem);
+ &_crumbs {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ display: block;
}
// Desktop size.
@@ -24,30 +28,25 @@
// Hide on print.
.respond-to-print( {
- .breadcrumbs {
+ .m-breadcrumbs {
display: none;
}
} );
// Right-to-left (RTL) layout.
html[lang='ar'] {
- .breadcrumbs {
+ .m-breadcrumbs {
margin-right: unit(20px / @base-font-size-px, rem);
margin-left: unit(20px / @base-font-size-px, rem);
-
- .cf-icon-svg {
- margin-right: unit(-20px / @base-font-size-px, rem);
- margin-left: initial;
- }
}
}
// TODO: When the layout-2-1 template is converted to use `u-layout-grid_wrapper`, this can be removed.
-.content_wrapper .breadcrumbs {
- margin-left: unit(35px / @base-font-size-px, rem);
+.content_wrapper .m-breadcrumbs {
+ margin-left: unit(15px / @base-font-size-px, rem);
// Tablet size only.
.respond-to-range(@bp-sm-min, @bp-sm-max, {
- margin-left: unit(50px / @base-font-size-px, rem);
+ margin-left: unit(30px / @base-font-size-px, rem);
});
}
diff --git a/cfgov/unprocessed/css/enhancements/layout-1-3.less b/cfgov/unprocessed/css/enhancements/layout-1-3.less
index 039c1c9d2ea..385b8417eba 100644
--- a/cfgov/unprocessed/css/enhancements/layout-1-3.less
+++ b/cfgov/unprocessed/css/enhancements/layout-1-3.less
@@ -10,9 +10,28 @@
}
}
+ // Tablet and below.
+ .respond-to-max(@bp-sm-max, {
+ .u-layout-grid {
+ &_breadcrumbs {
+ padding-left: unit(30px / @base-font-size-px, rem);
+ padding-right: unit(30px / @base-font-size-px, rem);
+ margin-left: unit(-30px / @base-font-size-px, rem);
+ margin-right: unit(-30px / @base-font-size-px, rem);
+ background: @gray-5;
+ border-bottom: 1px solid @gray-40;
+ }
+ }
+ });
+
// Tablet
.respond-to-range( @bp-sm-min, @bp-sm-max, {
.u-layout-grid {
+ &_breadcrumbs {
+ padding-left: unit(15px / @base-font-size-px, rem);
+ padding-right: unit(15px / @base-font-size-px, rem);
+ }
+
&_secondary-nav {
margin-left: unit(-30px / @base-font-size-px, rem);
margin-right: unit(-30px / @base-font-size-px, rem);
diff --git a/cfgov/unprocessed/css/organisms/secondary-nav.less b/cfgov/unprocessed/css/organisms/secondary-nav.less
index 4f944b212df..6cc59acf000 100644
--- a/cfgov/unprocessed/css/organisms/secondary-nav.less
+++ b/cfgov/unprocessed/css/organisms/secondary-nav.less
@@ -12,14 +12,14 @@