@@ -44,10 +46,10 @@ class Navigation extends Component {
Über Hugo
- Militärflugzeuge
+ Militär
Erster Weltkrieg
- Zwischenkriegszeit
+ Zwischenkriegszeit
Zweiter Weltkrieg
Kalter Krieg
Moderne
@@ -62,11 +64,11 @@ class Navigation extends Component {
- Sportflugzeuge
+ Sport
Doppeldecker
- Propellerflugzeuge
- Segelflugzeuge
+ Propeller
+ Segel
Andere
diff --git a/src/app.css b/src/app.css
index e29a7c9..d96a7ec 100644
--- a/src/app.css
+++ b/src/app.css
@@ -10,34 +10,37 @@ body {
color: white;
}
-#parent {
- display: grid;
- grid-template-rows: 100px auto;
- grid-template-areas: "header"
- "main";
-}
-
p {
width: 1000px;
}
main {
grid-area: main;
+ margin-top: 100px;
}
:root {
- --nav-color: rgb(176, 194, 206);
--nav-hover-color: darkgrey;
}
header {
grid-area: header;
+ position: fixed;
+ top: 0;
+ width: 100%;
+ z-index: 1;
+
+ display: grid;
+ grid-template-columns: 500px auto;
+ overflow: visible;
+
+ margin-top: 10px;
+ margin-left: 10px;
}
header h1 {
- margin-top: 50px;
- margin-left: 10px;
- margin-bottom: 0;
+ margin: 0;
+ width: 500px;
}
main {
@@ -50,14 +53,8 @@ nav {
margin: 0;
padding: 0;
overflow: visible;
- background-color: var(--nav-color);
- width: 100%;
+ display: inline-block;
- position: fixed;
- top: 0;
- height: 50px;
-
- z-index: 1;
}
/*main ul*/
@@ -65,59 +62,52 @@ nav ul {
height: 100%;
margin: 0;
padding: 0;
+ display: inline-block;
}
/*nav li item*/
nav ul li {
float: left;
- border-right: 1px solid gray;
- height: 100%;
- width: 15%;
position: relative;
display: inline-block;
-
+ width: 200px;
font-size: 1.8em;
- background-color: var(--nav-color);
cursor: pointer;
margin: auto;
}
-/*nav li item on hover*/
-nav ul li:hover {
- background-color: darkgray;
- color: var(--nav-hover-color);
- transition-duration: 0.4s;
-}
/*all nav a*/
nav ul li a {
display: block;
text-align: center;
text-decoration: none;
- color: black;
- width: 100%;
- height: 100%;
- background-color: var(--nav-color);
- border: none;
- cursor: pointer;
-}
-
-/*all nav a focus - remove outline so it looks like a normal link*/
-nav ul li a:focus {
- outline: 0;
+ color: white;
+ transition-duration: 0.3s;
}
/*all nav a hover*/
nav ul li a:hover {
background-color: var(--nav-hover-color);
+ transition-duration: 0.3s;
+}
+
+/*Only on the top elements*/
+nav ul li > a {
+ border-right: 1px solid gray;
+}
+
+/*don't show border on the right*/
+nav ul li:last-child > a {
+ border: none;
}
/*drop menu*/
nav ul li .content {
display: none;
- background-color: var(--nav-color);
z-index: 1;
width: 100%;
+ background-color: #282c34;
}
/*drop menu main hover*/