66 lines
1.4 KiB
CSS
66 lines
1.4 KiB
CSS
/* Style the navigation menu */
|
|
.topnav {
|
|
overflow: hidden;
|
|
background-color: #0f0f0f;
|
|
position: relative;
|
|
max-width: 1200px;
|
|
min-width: 800px;
|
|
margin: 5px auto 5px auto;
|
|
padding: 10px;
|
|
border: 1px solid rgb(255, 255, 255);
|
|
border-radius: 10px;
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
/* Hide the links inside the navigation menu (except for logo/home) */
|
|
.topnav #myLinks {
|
|
display: none;
|
|
}
|
|
|
|
/* Style navigation menu links */
|
|
.topnav a {
|
|
color: white;
|
|
padding: 14px 16px;
|
|
text-decoration: none;
|
|
font-size: 17px;
|
|
display: block;
|
|
}
|
|
|
|
/* Style the hamburger menu */
|
|
.topnav a.icon {
|
|
color: #e69109;
|
|
background: black;
|
|
display: block;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
margin-top: 8px;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
/* Add a grey background color on mouse-over */
|
|
.topnav a:hover {
|
|
background-color: #494949;
|
|
color: #ffffff;
|
|
}
|
|
|
|
/* Style the active link (or home/logo) */
|
|
.active {
|
|
background-color: #0f0f0f;
|
|
color: #e69109;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.topnav {
|
|
overflow: hidden;
|
|
background-color: #0f0f0f;
|
|
position: relative;
|
|
min-width: 424px;
|
|
max-width: 500px;
|
|
margin: 5px;
|
|
padding: 10px;
|
|
border: 1px solid rgb(255, 255, 255);
|
|
border-radius: 10px;
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
|
|
}
|
|
}
|