diff --git a/app/components/centennial/centennial-nav/component.js b/app/components/centennial/centennial-nav/component.js
new file mode 100644
index 000000000..bb93d73f3
--- /dev/null
+++ b/app/components/centennial/centennial-nav/component.js
@@ -0,0 +1,4 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+});
diff --git a/app/components/centennial/centennial-nav/template.hbs b/app/components/centennial/centennial-nav/template.hbs
new file mode 100644
index 000000000..826e7b6b3
--- /dev/null
+++ b/app/components/centennial/centennial-nav/template.hbs
@@ -0,0 +1,11 @@
+
+
diff --git a/app/styles/_centennial.scss b/app/styles/_centennial.scss
index c4ad7c637..fd67b0eaf 100644
--- a/app/styles/_centennial.scss
+++ b/app/styles/_centennial.scss
@@ -1,6 +1,7 @@
@import 'centennial/centennial-base';
@import 'centennial/centennial-header';
+@import 'centennial/centennial-nav';
@import 'centennial/centennial-logo-wnyc';
@import 'centennial/centennial-timeline';
@import 'centennial/centennial-archives';
diff --git a/app/styles/centennial/_centennial-base.scss b/app/styles/centennial/_centennial-base.scss
index e1d2ce471..f7bba3be2 100644
--- a/app/styles/centennial/_centennial-base.scss
+++ b/app/styles/centennial/_centennial-base.scss
@@ -13,6 +13,24 @@
--centennial-header-line-height: 1.2;
--centennial-module-spacing: 64px;
}
+
+.centennial-home {
+ position: relative;
+}
+
+
+.centennial-nav-anchor {
+ position: relative;
+ top: -60px;
+}
+
+@media screen and (min-width: 1025px) {
+ .centennial-nav-anchor {
+ position: inherit;
+ }
+}
+
+
.centennial-module {
margin-bottom: var(--centennial-module-spacing);
}
diff --git a/app/styles/centennial/_centennial-header.scss b/app/styles/centennial/_centennial-header.scss
index 64fc0d4fb..d500f764f 100644
--- a/app/styles/centennial/_centennial-header.scss
+++ b/app/styles/centennial/_centennial-header.scss
@@ -1,5 +1,5 @@
.centennial-header {
- margin-bottom: var(--centennial-module-spacing);
+ margin-bottom: 32px;
}
.centennial-header__hero, .centennial-header__hero img {
diff --git a/app/styles/centennial/_centennial-nav.scss b/app/styles/centennial/_centennial-nav.scss
new file mode 100644
index 000000000..c65ac4afa
--- /dev/null
+++ b/app/styles/centennial/_centennial-nav.scss
@@ -0,0 +1,30 @@
+.centennial-nav ul, .centennial-nav li {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+
+.centennial-nav ul {
+ display: flex;
+ justify-content: space-between;
+}
+@media (max-width: 1210px) {
+ .centennial-nav ul {
+ flex-direction: column;
+ row-gap: 32px;
+ }
+}
+
+.centennial-nav li a {
+ font-size: 16px;
+ font-weight: 700;
+ text-decoration: none;
+ border: none;
+ text-transform: uppercase;
+ color: rgb(51, 51, 51);
+ &:hover {
+ border: none;
+ text-decoration: none;
+ color: #d3008c;
+ }
+}
\ No newline at end of file
diff --git a/app/templates/centennial.hbs b/app/templates/centennial.hbs
index a237747f4..09128127a 100644
--- a/app/templates/centennial.hbs
+++ b/app/templates/centennial.hbs
@@ -3,7 +3,11 @@
{{centennial/centennial-header}}
+
+ {{centennial/centennial-nav}}
+
{{centennial/centennial-message}}
+
{{centennial/centennial-explore
category1Title=model.featuredCategory1.title
category1Items=model.featuredCategory1.bucketItems
@@ -13,11 +17,16 @@
category3Items=model.featuredCategory3.bucketItems
}}
{{centennial/centennial-cta-narrow}}
+
{{centennial/centennial-legacy-giving}}
+
{{centennial/centennial-timeline}}
{{centennial/centennial-archives items=model.archiveItems}}
+
{{centennial/centennial-events events=model.events}}
+
{{centennial/centennial-new-york-stories}}
{{centennial/centennial-double-cta}}
+
{{centennial/centennial-major-sponsor}}
\ No newline at end of file
diff --git a/tests/integration/components/centennial/centennial-nav/component-test.js b/tests/integration/components/centennial/centennial-nav/component-test.js
new file mode 100644
index 000000000..4f1370d26
--- /dev/null
+++ b/tests/integration/components/centennial/centennial-nav/component-test.js
@@ -0,0 +1,26 @@
+import { module, skip } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | centennial/centennial-nav', function(hooks) {
+ setupRenderingTest(hooks);
+
+ skip('it renders', async function(assert) {
+ // Set any properties with this.set('myProperty', 'value');
+ // Handle any actions with this.set('myAction', function(val) { ... });
+
+ await render(hbs`{{centennial/centennial-nav}}`);
+
+ assert.equal(this.element.textContent.trim(), '');
+
+ // Template block usage:
+ await render(hbs`
+ {{#centennial/centennial-nav}}
+ template block text
+ {{/centennial/centennial-nav}}
+ `);
+
+ assert.equal(this.element.textContent.trim(), 'template block text');
+ });
+});