<html >
/* ===== RESET & GRUNDSTYLING ===== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: ‚Montserrat‘, Arial, sans-serif;
line-height: 1.6;
color: #333;
}
/* ===== MENÜ-STYLING ===== */
.wp-block-navigation {
background: #2c3e50 !important;
padding: 15px 0 !important;
position: sticky !important;
top: 0 !important;
z-index: 1000 !important;
width: 100% !important;
}
.wp-block-navigation__container {
display: flex !important;
justify-content: center !important;
list-style: none !important;
margin: 0 auto !important;
padding: 0 20px !important;
max-width: 1200px !important;
gap: 25px !important;
}
.wp-block-navigation-item__content {
color: white !important;
text-decoration: none !important;
font-weight: 600 !important;
font-size: 16px !important;
padding: 8px 15px !important;
border-radius: 4px !important;
transition: all 0.3s ease !important;
display: flex !important;
align-items: center !important;
}
.wp-block-navigation-item__content:hover {
background: #3498db !important;
}
.wp-block-navigation-item–active .wp-block-navigation-item__content {
background: #e74c3c !important;
}
/* Icons im Menü */
.wp-block-navigation-item__content i {
margin-right: 8px !important;
font-size: 14px !important;
}
/* ===== MOBILE MENÜ (Hamburger) ===== */
.menu-toggle {
display: none;
background: #2c3e50;
color: white;
padding: 15px 20px;
cursor: pointer;
font-size: 20px;
text-align: center;
}
@media (max-width: 768px) {
.menu-toggle {
display: block;
}
.wp-block-navigation__container {
display: none !important;
flex-direction: column !important;
position: absolute !important;
background: #2c3e50 !important;
width: 100% !important;
left: 0 !important;
top: 50px !important;
padding: 10px 0 !important;
gap: 0 !important;
}
.wp-block-navigation__container.active {
display: flex !important;
}
.wp-block-navigation-item__content {
padding: 12px 15px !important;
justify-content: center !important;
}
}
/* ===== INHALT (Beispiel für Startseite) ===== */
.site-content {
max-width: 1200px;
margin: 20px auto;
padding: 0 20px;
}
h1, h2, h3 {
color: #2c3e50;
margin-bottom: 15px;
}
p {
margin-bottom: 15px;
}
<body >
‚primary‘,
‚container‘ => false,
‚menu_class‘ => ‚wp-block-navigation__container‘,
‚items_wrap‘ => ‚
‚,
));
} else {
// Fallback: Manuelles Menü (falls kein WordPress-Menü gesetzt ist)
echo ‚
‚;
}
?>
document.addEventListener(‚DOMContentLoaded‘, function() {
const menuToggle = document.querySelector(‚.menu-toggle‘);
const navContainer = document.querySelector(‚.wp-block-navigation__container‘);
if (menuToggle && navContainer) {
menuToggle.addEventListener(‚click‘, function() {
navContainer.classList.toggle(‚active‘);
});
}
});