i have a basic navbar with a hamburger menu icon (svg). no idea what i did, but the icon has duplicated itself and i don't know where the problem is.

navbar html:

<div class="navbar">
        <a href="#home" class="nav-logo">bunk</a>
        <ul id="nav-menu">
            <li class="nav-item"><a href=# class="nav-link">coading :</a></li>
            <li class="nav-item"><a href=# class="nav-link">mi goreng :</a></li>
            <li class="nav-item"><a href=# class="nav-link">biscuits :</a></li>
            <li class="nav-item"><a href=# class="nav-link">sign my guestbook</li>
        </ul>
        <!-- Hamburger menu icon to toggle the nav links -->
        <div id="ham"><a href="#"></a></div>
    </div>

navbar css:

.navbar { 
    display: flex;  
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transition: top 0.6s;
    background-color: black;
}

nav-menu css:

#nav-menu {  
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

i have tried changing the div id to class, trying different images for the icon - no cigar.

https://imgur.com/dxTIw4T

CodePudding user response：

Maybe you printed the "div" command 2 times, did you notice?

CodePudding user response：

Your code is not complete or you have not shared all the code.

If you want to use pure CSS3, I advise you to follow this simple tutorial: Tutorial Link