PromptBase
🤖 GPT
This prompt generates a responsive navigation bar. On larger screens, it features a gradient background with your customizable navigation menu. For smaller screens, a hamburger icon toggles a menu with the same links, which disappears when clicked outside.
Styling includes font customization and hover effects.
You can use the editable values to tailor the navbar and making it suitable to your use case.
...more
$3.99
After purchasing, you will gain access to the prompt file which you can use with GPT or the app builder. You'll receive 20 free generation credits with this purchase. By purchasing this prompt, you agree to our terms of service.
Over 1 month ago
Prompt Details
Model
Chat - GPT-3.5 (gpt-3.5-turbo)
Token size
331 ($0.00050 / call)
Example input
[list of navigation links]: (Home, Blog, Services, About us),
[font size of nav links]: defaults to 25px but can be 25px / 15 em / 10 vw etc,
[font weight of nav links]: defaults to bold but can be normal / bold / 600 / 700 / 900,
[height of navbar] : defaults to 10vh,
[padding of navbar] : defaults to 1vh 1vw,
[number of colors in navbar background gradient] : defaults to 4 and can be any number,
[width of hamburger icon]: defaults to 10vw.
[height of hamburger icon]: defaults to 5vh.
[width of hamburger Menu]: defaults to 70vw.
[height of hamburger Menu]: defaults to 86vh.
[background color of ham menu] : defaults to rgba(0,0,0,0.8),
[width of ham menu item] : defaults to 70vw,
[height of ham menu item] : defaults to 5vh,
[hover color of ham menu item] : defaults to rgba(255,255,255,0.2) which means white with 20% opacity; can be set to a #colorValue also.
Example output
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navbar</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.navbar {
display: flex;
justify-content: center;
align-items: center;
height: 10vh;
padding: 1vh 1vw;
background: linear-gradient(to right, #FF5733, #FFC300, #33FF57, #339CFF);
}
.nav-list {
list-style: none;
display: flex;
}
.nav-item {
margin: 0 15px;
}
.nav-link {
text-decoration: none;
color: #fff;
font-size: 18px;
font-weight: bold;
transition: color 0.3s;
}
.nav-link:hover {
color: #333;
}
/* Media Query for smaller screens */
@media screen and (max-width: 768px) {
.navbar {
justify-content: space-between;
}
.nav-list {
display: none;
}
.hamburger {
width: 10vw;
height: 5vh;
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.bar {
width: 100%;
height: 5px;
background-color: #fff;
transition: transform 0.4s ease-in-out;
}
.menu {
width: 70vw;
height: 86vh;
padding: 1vh 0vw;
background: rgba(0, 0, 0, 0.8);
position: absolute;
top: 12vh;
left: -70vw;
display: flex;
flex-direction: column;
align-items: start;
transition: left 0.4s ease-in-out;
}
.menu-show {
left: 0;
}
.menu-item {
width: 100%;
height: 5vh;
display: flex;
align-items: center;
justify-content: center;
}
.menu-item:hover {
background-color: rgba(255, 255, 255, 0.2);
}
}
</style>
</head>
<body>
<div class="navbar">
<ul class="nav-list">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
<li class="nav-item"><a class="nav-link" href="#">Services</a></li>
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
</ul>
<div class="hamburger" onclick="toggleMenu()">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
</div>
<div class="menu" id="menu">
<div class="menu-item"><a class="nav-link" href="#">Home</a></div>
<div class="menu-item"><a class="nav-link" href="#">Blog</a></div>
<div class="menu-item"><a class="nav-link" href="#">Services</a></div>
<div class="menu-item"><a class="nav-link" href="#">About</a></div>
</div>
<script>
function toggleMenu() {
const menu = document.getElementById("menu");
menu.classList.toggle("menu-show");
}
// Close the menu when clicking outside of it
window.addEventListener("click", function (event) {
const menu = document.getElementById("menu");
if (!event.target.closest(".hamburger") && !event.target.closest("#menu")) {
menu.classList.remove("menu-show");
}
});
</script>
</body>
</html>