Die Hamburger-Menüschaltfläche funktioniert auf meiner Website nicht

Anonymous · Post by **Anonymous** » 13 Jan 2026, 08:31

Die Hamburger-Menüschaltfläche wird auf mobilen Bildschirmen korrekt angezeigt, und wenn ich die Fenstergröße auf dem Desktop ändere, aber darauf klicke, geschieht nichts. Ich habe meinen Code noch einmal überprüft, kann aber immer noch nicht herausfinden, dass er nicht ordnungsgemäß funktioniert?
Wenn Sie auf die Hamburger-Schaltfläche klicken:

[*]Die Seitenleiste (#navbar) sollte von rechts nach links gleiten.

[*]Über dem Hauptinhalt sollte eine halbtransparente Überlagerung erscheinen.

[*]Die Seite sollte angezeigt werden Stoppen Sie den Bildlauf

Durch Klicken auf die Schaltfläche

Code: Select all

/* Reset */
html, * {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Body */
body {
font-family: system-ui, -apple-system, sans-serif;
background-color: #2e2e2e;
color: #f5f5f5;
line-height: 1.6;
overflow-y: auto;
}

/* Footer */
footer {
background-color: #1f1f1f;
padding: 0.9rem 2rem;
text-align: center;
}

/* Links */
a {
color: #f5f5f5;
text-decoration: none;
transition: color 0.2s ease;
}
a:hover {
color: #ccc;
}

/* Header */
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #1f1f1f;
padding: 1rem 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
z-index: 1000;
flex-wrap: wrap;
}

/* Navbar */
.navbar {
display: flex;
align-items: center;
width: 100%;
max-width: 1000px;
margin: 0 auto;
flex-wrap: wrap;
}

.logo {
font-size: 1.5rem;
font-weight: bolder;
margin-right: 1rem;
}

.nav-links {
display: flex;
justify-self: flex-start;
gap: 2.5rem;
margin-left: auto;
padding-left: 10px 0;
height: 39px;
align-items: center;
}

.social-links {
font-size: 1.5rem;
display: flex;
gap: 1.5rem;
margin-left: auto;
}

/* Main content */
main {
margin: 80px auto 4rem;
max-width: 800px;
padding: 1.5rem;
min-height: calc(100vh - 80px);
}

/* Intro section */
.intro {
text-align: center;
margin-bottom: 3rem;
}

.intro h1 {
font-size: 2rem;
margin-bottom: 1rem;
}

/* Blog posts */
.blog-post p {
margin-bottom: 1em;
line-height: 1.6;
}

.recent-posts h2 {
margin-bottom: 1.5rem;
}

.post {
background: #3a3a3a;
padding: 1.5rem;
border-radius: 8px;
margin-bottom: 2rem;
transition: background 0.3s ease;
}

.post:hover {
background: #4a4a4a;
}

.post-list {
list-style: none;
padding: 0;
margin-top: 2rem;
}

.post-list li {
background: #3a3a3a;
margin-bottom: 1rem;
padding: 1rem;
border-radius: 6px;
transition: background 0.3s ease;
}

.post-list li:hover {
background: #4a4a4a;
}

.post-list a {
color: #f5f5f5;
font-weight: bold;
}

/* Hamburger button */
#open-sidebar-button {
display: none;
background: none;
border: none;
padding: 0.5em;
cursor: pointer;
color: #f5f5f5;
font-size: 1.5rem;
position: fixed;
top: 1.2rem;
right: 1.5rem;
z-index: 1001;
transition: transform 0.2s ease;
}

#open-sidebar-button:hover {
transform: scale(1.1);
}

#open-sidebar-button:active {
transform: scale(0.95);
}

#close-sidebar-button {
background: none;
border: none;
padding: 0.5em;
cursor: pointer;
color: #f5f5f5;
font-size: 1.5rem;
position: absolute;
top: 1rem;
right: 1rem;
transition: transform 0.2s ease;
}

#close-sidebar-button:hover {
transform: rotate(90deg);
}

/* Overlay */
#overlay {
background: rgba(0, 0, 0, 0.5);
position: fixed;
inset: 0;
z-index: 999;
display: none;
}

#overlay.show {
display: block;
}

/* Mobile sidebar navigation */
#navbar {
display: none;
}

/* Responsive adjustments */
@media screen and (max-width: 700px) {
#open-sidebar-button {
display: block;
}

.desktop-only {
display: none !important;
}

#navbar {
display: flex;
flex-direction: column;
position: fixed;
top: 0;
right: -100%;
height: 100vh;
width: min(15em, 80%);
z-index: 1000;
background:  #1f1f1f;
border-left: 1px solid #4a4a4a;
transition: right 0.3s ease;
padding: 3rem 1.5rem;
gap: 2rem;
}

#navbar.show {
right: 0;
}

#navbar .nav-links {
flex-direction: column;
margin-left: 0;
gap: 1.5rem;
align-items: flex-start;
}

#navbar .nav-links a {
font-size: 1.1rem;
padding: 0.5rem 0;
width: 100%;
}

#navbar .nav-links a:hover {
color: #4a9eff;
}

#navbar .social-links {
margin-left: 0;
justify-content: flex-start;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid #4a4a4a;
}

#navbar .social-links a {
transition: color 0.2s ease, transform 0.2s ease;
}

#navbar .social-links a:hover {
color: #4a9eff;
transform: translateY(-2px);
}
}

Code: Select all



My Name








[i][/i]




[i][/i]


[url=blog_posts/blog.html]Blog[/url]

[url=https://x.com/]
[i][/i]
[/url]
[url=https://www.instagram.com/]
[i][/i]
[/url]
[url=https://github.com/]
[i][/i]
[/url]





[url=index.html]My Name[/url]

[url=blog_posts/blog.html]Blog[/url]

[url=https://x.com/]
[i][/i]
[/url]
[url=https://www.instagram.com/]
[i][/i]
[/url]
[url=https://github.com/]
[i][/i]
[/url]







Hello internet



Note: This website is currently being updated and improved as I work along, you may find new blog posts and site improvements in the future.





&copy; 2026

Die Hamburger-Menüschaltfläche funktioniert auf meiner Website nicht

Die Hamburger-Menüschaltfläche funktioniert auf meiner Website nicht ⇐ CSS

Quick Reply