• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Bürger Menü verzerrt

HTim

Neues Mitglied
Hallo Leute,
ich habe ein Bürger Menü programmiert, nur habe ich noch vier kleine Fehler.
1. Der Markenname verschwindet, wenn man das Bürger Menü öffnet.
2. Die drei Balken vom Bürger Menü gehen mit dem sich öffnendem Menü nach unten. Sie sollen aber genauso, wie derMarkenname an der. selben Stelle bleiben
3. Das der obere Balken vom Bürger Menü sich öffnet ist gewollt. Warum verschwinden die anderen beiden Balken ganz?
4. Der Main Part, in diesem Fall nur die Überschrift verschiebt sich nach unten, dass ist auch so gewollt. Nur verschiebt sich der Text doppelt so weit, wie nötig nach unten.

Ich wäre euch sehr dankbar für Hilfe jeglicher Art. Hier ist der Code:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://kit.fontawesome.com/a2c993e8e8.js" crossorigin="anonymous"></script>
</head>
    <body>
        <a class="cart" href="#"><i class="fa-regular fa-cart-shopping"></i><span>0</span></a>
        <header class="navbar">
            <a class="logo" href="#">Markenname</a>
            <nav>
                <ul class="nav__links">
                    <li class="nav-item"><a href="#" class="nav-link"></a>Start</li>
                    <li class="nav-item"><a href="#" class="nav-link"></a>Produkte</li>
                    <li class="nav-item"><a href="#" class="nav-link"></a>ÜberUns</li>
                </ul>
                <div class="hamburger">
                    <span class="bar"></span>
                    <span class="bar"></span>
                    <span class="bar"></span>
                </div>
            </nav>
        </header>
        <br>
        <br>
        <div class="main">
        <h2 style="text-align: center;" class="title">Produkte</h2>
        <br>
        </div>
    </body>
</html>
CSS:
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    header {
        background-color: #dedede;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 18px 0.75%;
    }
    .logo {
        cursor: pointer;
        font-family: Arial, Helvetica, sans-serif;
        color: #000000;
        text-decoration: none;
        background-color: transparent;
        font-size: 19px;
        padding-right: 2%;
    }
    .navbar {
        min-height: 60px;
        display: flex;
        justify-content: flex-start;
        padding: 0 10px;
    }
    .nav__links {
        list-style: none;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 500;
        font-size: 16px;
        color: #7f7f7f;
        text-decoration: none;
        background-color: transparent;
        cursor: pointer;
        word-spacing: 15px;
        display: flex;
        justify-content: flex-start;
        gap: 20px;
    }
    .nav__links li {
        display: inline-block;
    }
    .nav__links li {
        transition: all 0.3s ease 0s;
    }
    .nav__links li:hover {
        color: #1e90ff;
    }
    .cart {
        position: fixed;
        right: 2%;
        background-color: transparent;
        overflow: hidden;
        background-repeat: no-repeat;
        border: none;
        outline: none;
        margin-top: 23px;
        color: #1e90ff;
        font-size: 16px;
    }
    .hamburger {
        display: none;
        cursor: pointer;
    }
    .bar {
        display: block;
        width: 25px;
        height: 2px;
        margin: 7px auto;
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        background-color: #1e90ff;
    }
    @media(max-width:768px){
        .hamburger{
            display: block;
        }
        .hamburger.active .bar:nth-child(2){
            opacity: 0;
        }
        .hamburger.active .bar:nth-child(1){
            transform: translateY(8px) rotate(45deg);
        }
        .hamburger.active .bar:nth-child(1){
            transform: translateY(-8px) rotate(-45deg);
        }
        .hamburger.active {
                margin-top: 160px;
        }
        .nav__links {
            position: fixed;
            left: -100%;
            top: 50px;
            gap: 0;
            flex-direction: column;
            width: 100%;
            text-align: left;
            padding-left: 2%;
            transition: 0.2s;
            background-color: #dedede;
        }
        .nav-item {
            margin: 16px 0;
        }
        .nav__links.active {
            left: 0;
        }
        .main {
            transition: margin-top 0.2s;
        }
        .main.active {
            margin-top: var(--margin-top);
        }
    }
    .title {
        font-family: Helvetica;
        font-size: 2rem;
        font-weight: normal;
    }
</style>
Javascript:
<script>
    const hamburger = document.querySelector(".hamburger");
    const nav__links = document.querySelector(".nav__links");
    const main = document.querySelector('.main');
    const menuBox = nav__links.getBoundingClientRect();
    const root = document.documentElement;
    root.style.setProperty('--margin-top', menuBox.height + 'px');

    hamburger.addEventListener("click", () => {
        hamburger.classList.toggle("active");
        nav__links.classList.toggle("active");
        main.classList.toggle("active");
    })

    document.querySelectorAll(".nav__links").forEach(n => {
        n.addEventListener("click", () => {
        hamburger.classList.remove("active");
        nav__links.classList.remove("active");
        main.classList.remove("active");
        });
    });
</script>

Mit freundlichen Grüßen
 
Werbung:
Zurück
Oben