Skip to content

Instantly share code, notes, and snippets.

@jose-almir

jose-almir/navbar_responsive.html

Created October 8, 2020 19:29
Show Gist options
  • Save jose-almir/5f84cf6e1c530d2a17c10c717f19a59c to your computer and use it in GitHub Desktop.
Save jose-almir/5f84cf6e1c530d2a17c10c717f19a59c to your computer and use it in GitHub Desktop.
Download ZIP
Your custom and responsive navbar with burger.
Raw
navbar_responsive.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navbar Reponsive and Fixed without Frameworks</title>
<style>
body {
margin: 0;
font-family: 'Roboto', sans-serif;
}
main {
margin-top: 72px;
}
.navbar {
min-height: 64px;
display: flex;
background-color: #F9F9F9;
position: fixed;
width: 100%;
top: 0;
overflow: hidden;
}
.navbar-logo {
flex: 1;
min-height: 64px;
min-width: 64px;
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar-menu {
flex: 1;
display: flex;
justify-content: flex-end;
z-index: 1000;
}
.navbar-menu-item {}
.navbar-logo img {
max-height: 56px;
max-width: 56px;
padding: 8px;
cursor: pointer;
}
.navbar-link {
padding: 25px;
text-decoration: none;
color: #510A32;
}
.navbar-burguer:hover,
.navbar-link:hover {
color: #801336;
}
.navbar-burguer {
display: none;
padding: 0px 15px;
font-size: 1.7rem;
cursor: pointer;
}
@media(max-width: 768px) {
.navbar {
flex-direction: column;
}
.navbar-burguer {
display: block;
}
.navbar-menu {
flex-direction: column;
display: none;
background-color: #F9F9F9;
}
}
.is-active {
display: flex;
}
</style>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav class="navbar">
<div class="navbar-logo">
<img src="logo.png" alt="">
<div id="burguer" class="navbar-burguer" onclick="toggleDisplayNavbar()">
&#9776
</div>
</div>
<div id="my-navbar" class="navbar-menu">
<a class="navbar-menu-item navbar-link" href="#inicio">Início</a>
<a class="navbar-menu-item navbar-link" href="#ideais">Ideais</a>
<a class="navbar-menu-item navbar-link" href="#contato">Contato</a>
<a class="navbar-menu-item navbar-link" href="#about">Sobre</a>
</div>
</nav>
</header>
<main>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, molestiae. Iusto amet maxime veniam sed,
nisi tenetur? Ea rerum eius provident beatae ratione sed, tempora mollitia hic doloremque porro dolorum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, molestiae. Iusto amet maxime veniam sed,
nisi tenetur? Ea rerum eius provident beatae ratione sed, tempora mollitia hic doloremque porro dolorum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, molestiae. Iusto amet maxime veniam sed,
nisi tenetur? Ea rerum eius provident beatae ratione sed, tempora mollitia hic doloremque porro dolorum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, molestiae. Iusto amet maxime veniam sed,
nisi tenetur? Ea rerum eius provident beatae ratione sed, tempora mollitia hic doloremque porro dolorum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, molestiae. Iusto amet maxime veniam sed,
nisi tenetur? Ea rerum eius provident beatae ratione sed, tempora mollitia hic doloremque porro dolorum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, molestiae. Iusto amet maxime veniam sed,
nisi tenetur? Ea rerum eius provident beatae ratione sed, tempora mollitia hic doloremque porro dolorum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, molestiae. Iusto amet maxime veniam sed,
nisi tenetur? Ea rerum eius provident beatae ratione sed, tempora mollitia hic doloremque porro dolorum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, molestiae. Iusto amet maxime veniam sed,
nisi tenetur? Ea rerum eius provident beatae ratione sed, tempora mollitia hic doloremque porro dolorum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, molestiae. Iusto amet maxime veniam sed,
nisi tenetur? Ea rerum eius provident beatae ratione sed, tempora mollitia hic doloremque porro dolorum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, molestiae. Iusto amet maxime veniam sed,
nisi tenetur? Ea rerum eius provident beatae ratione sed, tempora mollitia hic doloremque porro dolorum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, molestiae. Iusto amet maxime veniam sed,
nisi tenetur? Ea rerum eius provident beatae ratione sed, tempora mollitia hic doloremque porro dolorum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, molestiae. Iusto amet maxime veniam sed,
nisi tenetur? Ea rerum eius provident beatae ratione sed, tempora mollitia hic doloremque porro dolorum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, molestiae. Iusto amet maxime veniam sed,
nisi tenetur? Ea rerum eius provident beatae ratione sed, tempora mollitia hic doloremque porro dolorum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, molestiae. Iusto amet maxime veniam sed,
nisi tenetur? Ea rerum eius provident beatae ratione sed, tempora mollitia hic doloremque porro dolorum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, molestiae. Iusto amet maxime veniam sed,
nisi tenetur? Ea rerum eius provident beatae ratione sed, tempora mollitia hic doloremque porro dolorum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, molestiae. Iusto amet maxime veniam sed,
nisi tenetur? Ea rerum eius provident beatae ratione sed, tempora mollitia hic doloremque porro dolorum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, molestiae. Iusto amet maxime veniam sed,
nisi tenetur? Ea rerum eius provident beatae ratione sed, tempora mollitia hic doloremque porro dolorum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, molestiae. Iusto amet maxime veniam sed,
nisi tenetur? Ea rerum eius provident beatae ratione sed, tempora mollitia hic doloremque porro dolorum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, molestiae. Iusto amet maxime veniam sed,
nisi tenetur? Ea rerum eius provident beatae ratione sed, tempora mollitia hic doloremque porro dolorum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, molestiae. Iusto amet maxime veniam sed,
nisi tenetur? Ea rerum eius provident beatae ratione sed, tempora mollitia hic doloremque porro dolorum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, molestiae. Iusto amet maxime veniam sed,
nisi tenetur? Ea rerum eius provident beatae ratione sed, tempora mollitia hic doloremque porro dolorum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, molestiae. Iusto amet maxime veniam sed,
nisi tenetur? Ea rerum eius provident beatae ratione sed, tempora mollitia hic doloremque porro dolorum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, molestiae. Iusto amet maxime veniam sed,
nisi tenetur? Ea rerum eius provident beatae ratione sed, tempora mollitia hic doloremque porro dolorum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, molestiae. Iusto amet maxime veniam sed,
nisi tenetur? Ea rerum eius provident beatae ratione sed, tempora mollitia hic doloremque porro dolorum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, molestiae. Iusto amet maxime veniam sed,
nisi tenetur? Ea rerum eius provident beatae ratione sed, tempora mollitia hic doloremque porro dolorum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, molestiae. Iusto amet maxime veniam sed,
nisi tenetur? Ea rerum eius provident beatae ratione sed, tempora mollitia hic doloremque porro dolorum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, molestiae. Iusto amet maxime veniam sed,
nisi tenetur? Ea rerum eius provident beatae ratione sed, tempora mollitia hic doloremque porro dolorum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, molestiae. Iusto amet maxime veniam sed,
nisi tenetur? Ea rerum eius provident beatae ratione sed, tempora mollitia hic doloremque porro dolorum!</p>
</main>
<footer></footer>
<script defer src=" https://use.fontawesome.com/releases/v5.0.7/js/all.js "></script>
<script>
function toggleDisplayNavbar() {
document.querySelector('.navbar-menu').classList.toggle('is-active')
}
document.onclick = function (e) {
if (!(e.target.id == 'burguer')) {
document.querySelector('.navbar-menu').classList.remove('is-active');
}
}
document.onscroll = function (e) {
document.querySelector('.navbar-menu').classList.remove('is-active');
console.log(window.scrollY)
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment