107 lines
2.5 KiB
PHP
107 lines
2.5 KiB
PHP
|
|
<style>
|
|
.page-header {
|
|
user-select: none;
|
|
-moz-user-select: none;
|
|
-webkit-user-select: none;
|
|
background: #052433;
|
|
position: fixed;
|
|
top: 0;
|
|
/* height: 40px; */
|
|
color: #fff;
|
|
width: 100%;
|
|
line-height: 40px;
|
|
z-index: 1000; /* Ensure the header is above other content */
|
|
margin-bottom: 500px;
|
|
}
|
|
|
|
.page-header__top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0 16px;
|
|
}
|
|
|
|
.page-header__toggle {
|
|
font-size: 2em;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.navigation {
|
|
opacity: 0;
|
|
height: 0;
|
|
overflow: hidden;
|
|
transition: opacity 0.7s, height 0.7s;
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.navigation__item {
|
|
background: #052433;
|
|
padding: 0 16px;
|
|
text-align: left;
|
|
}
|
|
|
|
.navigation--visible {
|
|
opacity: 1;
|
|
height: auto;
|
|
}
|
|
.page-header__logo{
|
|
margin-top: 10px;
|
|
}
|
|
@media (min-width: 550px) {
|
|
.page-header {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.page-header__top {
|
|
margin-right: auto;
|
|
}
|
|
|
|
.page-header__top, .page-header__bottom {
|
|
display: block;
|
|
}
|
|
|
|
.page-header__toggle {
|
|
display: none;
|
|
}
|
|
|
|
.navigation {
|
|
display: flex;
|
|
opacity: 1;
|
|
height: auto;
|
|
}
|
|
|
|
.navigation__item {
|
|
opacity: 0.8;
|
|
display: inline-block;
|
|
padding: 0 16px;
|
|
}
|
|
|
|
.navigation__item:hover {
|
|
cursor: pointer;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<header class="page-header">
|
|
<div class="page-header__top">
|
|
<a href="/" class=""><img class="page-header__logo" src="/assets/svg/dwdlogo.svg" alt=""></a>
|
|
<div class="page-header__toggle" onclick="toggleMenu()">☰</div>
|
|
</div>
|
|
<nav class="page-header__bottom">
|
|
<ul id="navigation" class="navigation">
|
|
<li class="navigation__item"><a href="/"> Home </a></li>
|
|
<li class="navigation__item"><a href="/about-us"> About </a></li>
|
|
<li class="navigation__item"><a href="/contact-us"> Contact </a></li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
<script>
|
|
let nav = document.getElementById('navigation');
|
|
function toggleMenu() {
|
|
nav.classList.toggle('navigation--visible');
|
|
}
|
|
</script> |