diff --git a/client/src/components/Header/Header.test.js b/client/src/components/Header/Header.test.js
index 14d1b84687..6f5852e7b7 100644
--- a/client/src/components/Header/Header.test.js
+++ b/client/src/components/Header/Header.test.js
@@ -23,16 +23,16 @@ describe('', () => {
return acc;
}, []);
- const expectedLinks = ['/learn', '/portfolio'];
+ const expectedLinks = ['/learn', '/portfolio', '/news', '/forum'];
it('renders to the DOM', () => {
expect(root).toBeTruthy();
});
it('has 2 links', () => {
- expect(aTags.length === 2).toBeTruthy();
+ expect(aTags.length === 4).toBeTruthy();
});
- it('has links to learn and portfolio', () => {
+ it('has links to news, forum, learn and portfolio', () => {
// checks if all links in expected links exist in links
expect(expectedLinks.every(elem => links.indexOf(elem) > -1)).toBeTruthy();
});
diff --git a/client/src/components/Header/components/NavLinks.js b/client/src/components/Header/components/NavLinks.js
index 3ff7f34ff5..54528cbe1f 100644
--- a/client/src/components/Header/components/NavLinks.js
+++ b/client/src/components/Header/components/NavLinks.js
@@ -14,6 +14,16 @@ function NavLinks({ displayMenu }) {
className={'nav-list' + (displayMenu ? ' display-flex' : '')}
role='menu'
>
+
+
+ News
+
+
+
+
+ Forum
+
+
Projects
diff --git a/client/src/components/Header/components/universalNav.css b/client/src/components/Header/components/universalNav.css
index ea24788b97..630864b325 100644
--- a/client/src/components/Header/components/universalNav.css
+++ b/client/src/components/Header/components/universalNav.css
@@ -86,10 +86,6 @@
height: 38px;
}
-.nav-list li:hover {
- background: var(--gray-00);
-}
-
.nav-list li a:hover {
color: var(--theme-color);
text-decoration: none;
@@ -101,6 +97,11 @@
color: white;
}
+.nav-list li a:focus:hover {
+ color: var(--theme-color);
+ background: white;
+}
+
.universal-nav-right {
flex-shrink: 0;
display: flex;
@@ -128,13 +129,14 @@
border: 1px solid var(--gray-00);
}
-@media (max-width: 265px) {
+@media (max-width: 355px) {
.nav-list li a {
width: 50vw;
+ text-align: center;
}
}
-@media (max-width: 799px) {
+@media (max-width: 999px) {
.site-header {
padding-right: 0;
padding-left: 0;
@@ -200,7 +202,7 @@
}
}
-@media (min-width: 800px) {
+@media (min-width: 1000px) {
.universal-nav-middle {
flex: 1 0 30%;
margin-right: 0px;
diff --git a/client/src/components/search/searchBar/searchbar.css b/client/src/components/search/searchBar/searchbar.css
index 091d928d13..9cd313ea0e 100644
--- a/client/src/components/search/searchBar/searchbar.css
+++ b/client/src/components/search/searchBar/searchbar.css
@@ -30,7 +30,7 @@
}
.fcc_searchBar .ais-Hits {
- top: 71px;
+ top: 70px;
width: calc(100vw - 30px);
left: 15px;
}
@@ -122,7 +122,7 @@ and arrow keys */
right: 15px;
}
-@media (min-width: 800px) {
+@media (min-width: 1000px) {
.ais-SearchBox-input {
width: 100%;
max-width: 500px;