diff --git a/img/nasa.svg b/img/nasa.png
similarity index 100%
rename from img/nasa.svg
rename to img/nasa.png
diff --git a/index.html b/index.html
index 412cae513fd2c8407ef5495671bf726dcc251913..9ac818e8f967998f569932de97492ce84c13c2ad 100644
--- a/index.html
+++ b/index.html
@@ -10,7 +10,7 @@
</head>
<body>
<header>
- <img class="nasa-img" src="img/nasa.svg" />
+ <img class="nasa-img" src="img/nasa.png" />
<nav>
<ul class="top-nav">
diff --git a/styles.css b/styles.css
index cec734dc239cef733693fa2bb88fe6f0678011b3..c655d1066460e9aa3fecaa1381717d4aad4e53b9 100644
--- a/styles.css
+++ b/styles.css
@@ -72,13 +72,13 @@ nav ul li a {
position: absolute;
left: 0;
top: 0;
- width: 5em;
+ margin-top: 1em;
+ width: 6em;
z-index: -1;
}
.top-nav {
display: flex;
- overflow: hidden;
flex-wrap: nowrap;
flex-direction: row;
justify-content: flex-end;
@@ -97,6 +97,7 @@ nav ul li a {
.top-nav li a {
border-right: 0.05em solid #eeeeee;
+ white-space: nowrap;
}
.top-nav li:nth-child(n+7) a {
@@ -116,6 +117,7 @@ nav ul li a {
padding: 0 0.5em;
height: 100%;
background-color: #55555580;
+ white-space: nowrap;
}
.search-form input[type="search"] {
@@ -141,11 +143,24 @@ nav ul li a {
display: flex;
justify-content: center;
align-items: center;
- background-color: blue;
+ margin-top: 1em;
}
-.center-nav {
+.center-nav li {
+ padding: 0.5em 0;
+ background-color: #555555;
+}
+.center-nav li a {
+ display: block;
+ padding: 0.5em 1em;
+ font-size: 0.7em;
+ font-weight: 500;
+ white-space: nowrap;
+}
+
+.center-nav li:not(li:last-child) a {
+ border-right: 0.1em solid #eeeeee;
}
/* Extra small devices (phones, 600px and down) */