Ich habe Probleme beim Erstellen eines Hamburger-Menüs für meine Website auf Mobilgeräten ⇐ HTML

[Anonymous]

Ich habe Schwierigkeiten, ein Hamburger-Menü für meine Website auf Mobilgeräten zu erstellen. Ich habe mir ein paar Videokurse auf YouTube angesehen und Cloud Code verwendet, aber ich habe Probleme, es in meinen Code zu integrieren, da die Tutorials und LLM es anders machen und es mit meinem Code nicht funktioniert. Könnte jemand einige Beispiele für die Implementierung bereitstellen?

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: #706e6e;
}

/* 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;
}

/* Responsive adjustments */
@media (max-width: 768px) {
.navbar {
justify-content: space-between;
align-items: center;
}

.logo {
order: 1;
margin-right: 0;
}

.nav-links {
order: 2;
margin-left: 0;
position: absolute;
left: 50%;
transform: translateX(-50%);
gap: 1rem;
}

.social-links {
order: 3;
margin-left: auto;
gap: 1rem;
}

main {
padding: 1rem;
margin-top: 80px;
}

.intro h1 {
font-size: 1.8rem;
}

.post {
padding:  1rem;
}
}

Code: Select all

[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]

[url=https://stackoverflow.com/users/27241755/]
[i][/i]
[/url]







Hello internet



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





© 2026