Skip to content
Snippets Groups Projects
Commit 52307ee2 authored by Silas Meister's avatar Silas Meister
Browse files

Add centered nav

parent b781ec99
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
img/nasa.svg → img/nasa.png
+ 0
− 0
View file @ 52307ee2
File moved
index.html
+ 1
− 1
View file @ 52307ee2
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
</head> </head>
<body> <body>
<header> <header>
<img class="nasa-img" src="img/nasa.svg" /> <img class="nasa-img" src="img/nasa.png" />
<nav> <nav>
<ul class="top-nav"> <ul class="top-nav">
......
styles.css
+ 19
− 4
View file @ 52307ee2
...@@ -72,13 +72,13 @@ nav ul li a { ...@@ -72,13 +72,13 @@ nav ul li a {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
width: 5em; margin-top: 1em;
width: 6em;
z-index: -1; z-index: -1;
} }
.top-nav { .top-nav {
display: flex; display: flex;
overflow: hidden;
flex-wrap: nowrap; flex-wrap: nowrap;
flex-direction: row; flex-direction: row;
justify-content: flex-end; justify-content: flex-end;
...@@ -97,6 +97,7 @@ nav ul li a { ...@@ -97,6 +97,7 @@ nav ul li a {
.top-nav li a { .top-nav li a {
border-right: 0.05em solid #eeeeee; border-right: 0.05em solid #eeeeee;
white-space: nowrap;
} }
.top-nav li:nth-child(n+7) a { .top-nav li:nth-child(n+7) a {
...@@ -116,6 +117,7 @@ nav ul li a { ...@@ -116,6 +117,7 @@ nav ul li a {
padding: 0 0.5em; padding: 0 0.5em;
height: 100%; height: 100%;
background-color: #55555580; background-color: #55555580;
white-space: nowrap;
} }
.search-form input[type="search"] { .search-form input[type="search"] {
...@@ -141,11 +143,24 @@ nav ul li a { ...@@ -141,11 +143,24 @@ nav ul li a {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: 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) */ /* Extra small devices (phones, 600px and down) */
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment