Hamburger icon is not showing-CodePudding

I create a website and try to make a responsive design. I follow the video on youtube and do everything as in the video, but I don't see the hamburger icon. Do you know maybe why? It works perfectly in the video. Here is what my code look like:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nikolinart</title>
    <link rel="stylesheet" href="./styles/style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <nav >
        <div >
            <div ><a href="#">Nikolin<span>art</span></a></div>
            <ul >
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
            <div >
                <i ></i>
            </div>
        </div>
    </nav>

    <section  id="home">
        <div >
            <div >
                <div >Hello and welcome to</div>
                <div >Nikolin<span>art</span></div>
                <div >My name is Nikolina and I'm a <span>Painter</span></div>
            </div>
        </div>
    </section>

    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore aperiam rem laboriosam corrupti sunt, aspernatur doloremque ipsum molestiae, eveniet debitis vitae tempore ea molestias atque fugiat hic voluptas dignissimos mollitia quasi earum saepe fuga cum. Vero quia blanditiis voluptatum suscipit consequuntur praesentium odit asperiores totam quod, aliquid esse voluptas voluptatem dolorum! Dolor provident, sint repellat esse voluptates facere, dolorem tempora, libero at voluptas repellendus saepe reprehenderit laudantium dicta quas id aliquid corporis. Vitae, perferendis dolores! Explicabo voluptatum officiis vel exercitationem voluptate voluptatem in qui expedita ullam voluptas doloremque modi, ratione iure assumenda nostrum architecto ipsa, minima est corporis sed consequuntur, ipsam corrupti? Ipsam fugit fuga quia tempora ut beatae aperiam impedit iste nostrum consequuntur delectus esse dignissimos, minima placeat sunt possimus. Dolor aperiam beatae id, dignissimos voluptatem vero? Dignissimos illum iste fuga quo at repellendus, recusandae itaque minima accusantium dolorem debitis voluptatem id sint facilis, odit quos aut architecto nemo atque distinctio quaerat error. Deserunt maiores dolorum distinctio placeat fugiat consectetur ipsa facilis quam, saepe ea voluptas esse est ullam itaque sapiente quidem hic. Adipisci facere minima eaque natus sapiente officiis totam magnam consectetur doloribus, consequuntur quis dolorem corporis harum blanditiis mollitia iusto molestiae repellendus quia error, neque fuga praesentium!</p>
    <script src="./script/script.js"></script>
</body>
</html>

.menu-btn {
    color: #fff;
    font-size: 23px;
    cursor: pointer;
    display: none;
}

CodePudding user response：

Two possible reasons:

You set the display:none which make the text to become hidden or you accidentally use the color:#fff (white color) and have the same color with background

Also, you doesn't even has the content of it.

.menu-btn {
    color:red;
    font-size: 23px;
    cursor: pointer;  
}

<div >
     <i >Yes</i>
 </div>

CodePudding user response：

display : none hides the element you need to remove that line of css

CodePudding user response：

In your CSS property, you have the display property is None, which is used to hide the elements. Change the class to

.menu-btn {
    color: #fff;
    font-size: 23px;
    cursor: pointer;
}

Also, I see that you've used Font Awesome icons and you've not imported them , make sure you import them properly. If you're using CDN to load Font Awesome, make sure you add the necessary import inside your HTML's HEAD tag.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">