Navbar #1 | Responsive Flexbox Navigation Bar with Logo

- November 17, 2024

On the body, use this emet and click `tab`

.top-bar>span>ul>li*3>a

2. Use ionicon ionic.io/ionicons. and copy paste the link `<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>` (ionic.io/ionicons/usage) to header element after link element.

3. Use google fonts (Poppins - Google Fonts)

4. Use jquery cdn

html code

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<ul>

</ul>

</div>

<nav>

</div>

</div>

<li><a href="#">About</a></li>

<li><a href="#">Services</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

</div>

$(function(){

$(".toggle").on("click", function(){

if ($(".menu").hasClass("active")) {

$(".menu").removeClass("active");

$(this).find("a").html("<ion-icon name='menu-outline'></ion-icon>");

} else {

$(".menu").addClass("active");

$(this).find("a").html("<ion-icon name='close-outline'></ion-icon>");

}

})

</script>

</body>

</html>

css code

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Poppins", sans-serif;
}

a, a:hover {
    text-decoration: none;
}

.top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background: #ef4b3f;
}

.top-bar span {
    color: #fff;
}

.top-bar ul {
    list-style: none;
    display: flex;
}

.top-bar li {
    margin: 0 5px;
}

.top-bar a {
    color: #fff;
}

.top-bar a:hover {
    color: #f9c23c;
}

nav {
    display: flex;
    align-items: center;
    background-color: #222;
    padding: 5px 20px;
}


nav a {
    color: #fff;
}

nav a:hover {
    color: #ef4b3f;
}

.logo {
    flex: 1;
}

.logo a {
    display: flex;
    align-items: center;
    font-size: 20px;
}

.logo a:hover {
    color: #fff;
}

.logo img{
    width: 40px;
    margin-right: 10px;
}

.menu {
    display: flex;
    list-style: none;
    align-items: center;
}

.menu li {
    padding: 15px 10px;
    font-size: 16px;
}

.toggle {
    font-size: 30px;
    display: none;
    color: #fff;
}

@media screen and (max-width: 600px) {
    nav {
        display: block;
        position: relative;
        padding: 15px 20px;
    }

    .menu {
        margin-top: 15px;
        display: none;
    }

    .menu.active, .toggle {
        display: block;
    }

    .toggle {
        position: absolute;
        top: 15px;
        right: 20px;
    }


}

image,

logo.png

Cari Blog Ini

Ansuf W