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) */