CodeWizard AI
Chat
Code
Debug
Learn
CodeWizard AI: Hello! I'm your AI coding assistant. How can I help you today?
// Try asking me to:
// - Write a function in Python/JavaScript
// - Explain how recursion works
// - Debug a piece of code
// - Convert code between languages
You: Can you show me an example of a responsive navbar?
CodeWizard AI: Sure! Here's a responsive navbar using HTML, CSS, and JavaScript:
<!DOCTYPE html>
<html>
<head>
<style>
.navbar {
background: #333;
overflow: hidden;
}
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar .icon {
display: none;
}
@media screen and (max-width: 600px) {
.navbar a:not(:first-child) {display: none;}
.navbar a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.navbar.responsive a {
float: none;
display: block;
text-align: left;
}
.navbar.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
}
</style>
</head>
<body>
<div class="navbar" id="myNavbar">
<a href="#">Home</a>
<a href="#">News</a>
<a href="#">Contact</a>
<a href="#" class="icon" onclick="toggleNavbar()">
<i class="fa fa-bars"></i>
</a>
</div>
<script>
function toggleNavbar() {
var x = document.getElementById("myNavbar");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
</script>
</body>
</html>
Comments
Post a Comment