I am creating a basic website for my family business in React and I have made a responsive navbar with a burger and scroll effect. So below my navbar is a cover photo which is getting pushed down every time the burger is clicked and the navigation list is revealed. When I give the cover a position:absolute; it wont get pushed, but the scroll effect wont work on the navbar anymore for some reason. note I am a beginner and this is my first real project. Below You will find my code:
Navbar component:
const Navbar = () => {
const [isClicked, setIsClicked] = useState(false)
const [sticky, setSticky] = useState(false)
useEffect(() => {
const handleScroll = () => {
setSticky(window.scrollY > 0);
};
window.addEventListener('scroll', handleScroll)
}, [])
return (
<nav className= {`navbar ${sticky? "sticky" : ""} ${isClicked && "activeNav"}`}>
<div className='logo'>
<img src={logo} alt = 'logo'/>
</div>
<div className='toggle-button' onClick={() => setIsClicked(!isClicked)}>
<span className={`bar ${isClicked && `active1`}`}></span>
<span className={`bar ${isClicked && `active2`}`}></span>
<span className={`bar ${isClicked && `active3`}`}></span>
</div>
<div className={`navbar-links ${isClicked && `active`}`}>
<ul>
<li><Link to='/'><p>O nama</p></Link></li>
<li><Link to='/'><p>Skola fudbala</p></Link></li>
<li><Link to='/'><p>Rodjendani</p></Link></li>
<li><Link to='/'><p>Kontakt</p></Link></li>
</ul>
</div>
</nav>
)
}
Navbar CSS:
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #052336;
color: white;
transition: 0.6s;
}
.navbar.sticky {
box-shadow: 0px 5px 10px rgb(0, 0, 0, 0.6);
position: sticky;
top: 0;
z-index: 100;
opacity: 0.9;
}
.logo img {
height: 50px;
width: 50px;
margin-left: 10px;
}
.navbar-links ul {
margin: 0;
padding: 0;
display: flex;
top: 9px;
position: relative;
}
.navbar-links li {
list-style: none;
}
.navbar-links li a {
text-decoration: none;
color: white;
padding: 0.8rem;
display: block;
font-size: 1.1rem;
transition:0.2s;
}
.navbar-links li a:hover {
color: #fecb40;
transform: scale(1.1);
}
.toggle-button {
position: absolute;
top: 1.5rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 20px;
cursor: pointer;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: white;
border: 10px;
transition: .4s;
}
#media (max-width: 789px) {
.toggle-button {
display: flex;
}
.navbar-links {
display: none;
width: 100%;
transition: 1s;
}
.navbar {
flex-direction: column;
align-items: flex-start;
}
.navbar-links ul {
width: 100%;
flex-direction: column;
}
.navbar-links li {
text-align: center;
}
.navbar-links li a {
padding: .5rem 1rem;
}
.navbar-links.active {
display: flex;
}
.bar.active1 {
rotate: 45deg;
translate: 0px 10px;
}
.bar.active2 {
background: transparent;
translate: -45px 0px;
}
.bar.active3 {
rotate: -45deg;
translate: 0px -8px;
}
}
Cover component:
const Cover = () => {
return (
<section id='cover'>
<div className = 'header-text'>
<h1>Zlatna Lopta</h1>
</div>
</section>
)
}
cover css:
#cover {
position:absolute;
width: 100%;
height: 800px;
top: 0;
z-index: -1;
background-image: url(/src/Components/Images/cover1.jpg);
background-size: cover;
background-position: center;
}
.header-text {
margin: 0 auto;
color: white;
position:relative;
top: 35%;
padding: 70px 0;
text-align: center;
}
.header-text h1 {
font-size: 5rem
}
I'm doing an hamburger menu which has to open when toggled. The thing is, I can close and open it without any problem but it remains open on page load. Which means it is already toggled when you open the page. Hope this explanation is clear. I gace all the code I have for this feature. Please Can someone help ?
JS
const hamburger = document.querySelector('.navbar__hamburger');
const links = document.querySelector('.nav-primary');
hamburger.addEventListener('click', ()=> {
links.classList.toggle('nav-primary--hide');
});
},
};
HTML
<header class="header">
<div class="header-color">
<div class="container">
<div class="logo__wrapper">
<a class="link__logo" href="index.html">
<div class="header__logo__ctn">
<img class="header__logo" src="./assets/svg/logo-svg-ghosts-02.svg"/>
</div>
<p class="header__title">ghosts team</p>
</a>
</div>
<div class="navbar__hamburger">
<span class="navbar__hamburger__line"></span>
<span class="navbar__hamburger__line"></span>
<span class="navbar__hamburger__line"></span>
</div>
<nav class="nav-primary nav-primary--hide">
<ul class="main-menu">
<li class="menu-item"><a class="menu-item-link presentation" href="index.html">présentation</a></li>
<li class="menu-item"><a class="menu-item-link" href="airsoft.html">l'airsoft</a></li>
<li class="menu-item"><a class="menu-item-link" href="terrain.html">terrain</a></li>
<li class="menu-item"><a class="menu-item-link" href="reglement.html">règlement</a></li>
<li class="menu-item"><a class="menu-item-link" href="equipe.html">équipe</a></li>
<li class="menu-item galerie"><a class="menu-item-link" href="gallery.html">galerie photos</a></li>
</ul>
<div class="social__wrapper__ctn">
<ul class="social__wrapper">
<li class="social__item"><a class="social__link" href="/" target="_blank"><span>Suivez nous sur Facebook:</span><i class="fa-brands fa-facebook-f"></i></a></li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</header>
CSS
.container {
width: 100%;
max-width: 1550px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
margin: 0 auto;
#media screen and (max-width: 1183px) {
align-items: flex-start;
flex-wrap: wrap;
padding: 15px 30px;
}
}
.header {
width: 100%;
position: fixed;
top: 0;
left: 0;
.header-color {
background-color: rgba($color: $darkGrey, $alpha: 0.7);
#media screen and (max-width: 1183px) {
background-color: $darkGrey;
}
.logo__wrapper {
#media screen and (max-width: 359px) {
flex: 70%;
}
#media screen and (min-width: 360px) and (max-width: 1183px) {
flex: 80%;
}
.link__logo {
text-decoration: none;
display: flex;
align-items: center;
max-width: 210px;
.header__logo__ctn {
padding-right: 5px;
.header__logo {
height: 56px;
}
}
.header__title {
color: #ffffff;
font-family: $calvous;
}
}
}
.nav-primary {
display: flex;
justify-content: space-between;
align-items: center;
#media screen and (max-width: 1183px) {
flex-direction: column;
justify-content: flex-start;
// height: 100vh;
}
.nav {
display: flex;
justify-content: space-between;
letter-spacing: 2px;
list-style-type: none;
#media screen and (max-width: 1183px) {
flex-direction: column;
}
.menu-item {
text-decoration: none;
#media screen and (max-width: 1183px) {
display: flex;
padding: 8px 0;
}
&::after {
content: url("../../images/assets/svg/bckg-links.png");
#media screen and (max-width: 1183px) {
content: none;
}
}
.presentation {
#media screen and (max-width: 1183px) {
padding: 18px 25px;
}
}
a{
padding: 5px 25px;
color: #ffffff;
font-family: $ubuntuLight;
font-size: 15px;
text-transform: uppercase;
text-decoration: none;
border: 1px solid transparent;
&:hover {
border-color: #ceae60;
color: #ceae60;
}
#media screen and (max-width: 1183px) {
font-size: 22px;
padding: 15px 5px;
}
}
}
.menu-item-41 {
&::after {
content: none;
}
}
}
.social__wrapper__ctn {
.social__wrapper {
list-style-type: none;
padding-left: 1em;
.social__item {
#media screen and (max-width: 1183px) {
padding: 10px 0;
}
.social__link {
text-decoration: none;
color: $yellow;
font-family: $ubuntuLight;
&:hover {
border-color: $white;
}
span {
display: none;
#media screen and (max-width: 1183px) {
display: inline;
padding-right: 10px;
}
}
i {
border: 1px solid $yellow;
border-radius: 50%;
width: 25px;
height: 25px;
color: $yellow;
font-size: 15px;
padding: 5px 6.2px;
&:hover {
color: $white;
border-color: $white;
}
}
}
}
}
}
}
.nav-primary--hide {
#media screen and (max-width: 1183px) {
display: none;
}
}
}
.navbar__hamburger {
margin: 10px;
cursor: pointer;
.navbar__hamburger__line {
display: block;
width: 40px;
height: 3px;
margin-bottom: 10px;
background-color: #fff;
}
#media screen and (min-width: 1183px) {
display: none;
}
}
}
.header-pages {
background-image: url("../../images/assets/images/background-fonce.jpg");
position: relative;
}
You just need to remove the nav-primary--hide class in the HTML code. Then it behaves as you want.
Everything else looks fine!
Essentially I want the menu to display as it is (column), but underneath the navigation bar rather than positioning itself between the logo/hamburger.
The issue as far as I am aware is that the menu when within the media query breakpoint is still within the initial flexbox container it was prior to media query. I also am yet to style the navigation bar fully so the empty classes won't be empty forever.
#import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Quicksand:wght#300;400;500;600;700&display=swap');
#import url('https://fonts.cdnfonts.com/css/01-digitall');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
li {
list-style-type: none;
}
body {
background: #ffffff;
font-family: 'Quicksand', sans-serif;
}
.container {
max-width: 1250px;
margin: 0 auto;
padding: 0;
}
nav {
width: 100%;
height: 100px;
background: silver;
}
nav .container {
display: flex;
justify-content: space-between;
height: 100%;
padding: 10px;
}
.logo {
font-family: '01 Digitall';
font-size: 40px;
text-transform: uppercase;
display: flex;
height: 100%;
align-items: center;
}
.logo .black {
color: #000000;
}
.logo .red {
color: #ff0000;
}
.nav-menu {
display: flex;
height: 100%;
align-items: center;
display: none;
}
nav ul {
display: flex;
height: 100%;
align-items: center;
}
nav li {}
nav a {
color: #000000;
}
#media (max-width: 768px) {
nav {}
.logo {}
.nav-menu {
display: flex;
}
nav ul {
flex-direction: column;
position: absolute;
width: 100%;
}
nav li {}
nav a {
color: red;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<nav>
<div class="container">
<div class="logo">
<span class="black">Test</span>
<span class="red">Website</span>
</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Shop</li>
<li>Contact</li>
</ul>
<div class="nav-menu">
<i class="fa-solid fa-bars"></i>
</div>
</div>
</nav>
I decided to lead with mobile-first, still learning and getting to grips with flex box.
Your issue is mostly with the fundamentals of absolute positioning. Such elements are positioned with respect to the nearest non-static ancestor, so I've put relative position on the parent. Then, 100% width is problematic if you want to align the menu under the button. I've also set the right value to zero to get it over to the side.
I'm guessing at what you want to some extent. Please provide more detail if I'm off the mark.
Scroll the CSS panel down to see change markers.
#import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Quicksand:wght#300;400;500;600;700&display=swap');
#import url('https://fonts.cdnfonts.com/css/01-digitall');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
li {
list-style-type: none;
}
body {
background: #ffffff;
font-family: 'Quicksand', sans-serif;
}
.container {
max-width: 1250px;
margin: 0 auto;
padding: 0;
}
nav {
width: 100%;
height: 100px;
background: silver;
}
nav .container {
display: flex;
justify-content: space-between;
height: 100%;
padding: 10px;
}
.logo {
font-family: '01 Digitall';
font-size: 40px;
text-transform: uppercase;
display: flex;
height: 100%;
align-items: center;
}
.logo .black {
color: #000000;
}
.logo .red {
color: #ff0000;
}
.nav-menu {
display: flex;
height: 100%;
align-items: center;
display: none;
}
nav ul {
display: flex;
height: 100%;
align-items: center;
}
nav li {}
nav a {
color: #000000;
}
#media (max-width: 768px) {
nav {
position: relative; /* <------------------------- HERE */
}
.logo {}
.nav-menu {
display: flex;
}
nav ul {
flex-direction: column;
position: absolute;
right: 0; /* <------------------------- HERE */
/* width: 100%; */ /* <------------------------- HERE */
top: 100%; /* <------------------------- HERE */
}
nav li {}
nav a {
color: red;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<nav>
<div class="container">
<div class="logo">
<span class="black">Test</span>
<span class="red">Website</span>
</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Shop</li>
<li>Contact</li>
</ul>
<div class="nav-menu">
<i class="fa-solid fa-bars"></i>
</div>
</div>
</nav>
Try it using JS.
css:
#import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Quicksand:wght#300;400;500;600;700&display=swap');
#import url('https://fonts.cdnfonts.com/css/01-digitall');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
li {
list-style-type: none;
}
body {
background: #ffffff;
font-family: 'Quicksand', sans-serif;
}
.container {
max-width: 1250px;
margin: 0 auto;
padding: 0;
}
nav {
width: 100%;
height: 100px;
background: silver;
}
nav .container {
display: flex;
justify-content: space-between;
height: 100%;
padding: 10px;
}
.logo {
font-family: '01 Digitall';
font-size: 40px;
text-transform: uppercase;
display: flex;
height: 100%;
align-items: center;
}
.logo .black {
color: #000000;
}
.logo .red {
color: #ff0000;
}
.nav-menu {
height: 100%;
align-items: center;
display: none;
}
nav ul {
display: inline-flex;
height: 100%;
align-items: center;
}
nav a {
color: #000000;
}
#media (max-width: 768px) {
nav {}
.logo {}
.nav-menu {
display: flex;
}
nav ul {
flex-direction: column;
position: relative;
width: 100%;
display: none;
top: 100px;
right: 15%
}
nav li {}
nav a {
color: red;
}
}
js:
const links = document.querySelector("nav ul")
const navMenu = document.querySelector(".nav-menu")
if (window.matchMedia("(max-width: 768px)").matches) {
}
let linksOpen = false
console.log("Start: links is closed")
navMenu.addEventListener("click", () => {
if (linksOpen === false) {
links.style.display = "inline-flex"
linksOpen = true
console.log("links is open")
} else {
links.style.display = "none"
linksOpen = false
console.log("links is closed")
}
})
When you set position: absolute, the element will stay in the same position it would have been if it hasn't been positioned. In this case, if it wasn't for that property, the menu would have been between the logo and the hamburger item, since they're all inside a flex container.
When you use absolute positioning, you usually want to set top, left or similar properties to adjust its position.
In your situation, one quick way to put it below the header would be to:
Set the container (".container") to position: relative. This way, when we're refering "100%" in the next rule, we'll be considering the size of the container and not the whole document.
Add to the the menu (".container > ul") the following properties:
top: 100%;
left: 0px;
This will position the menu right below the header.
#import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Quicksand:wght#300;400;500;600;700&display=swap');
#import url('https://fonts.cdnfonts.com/css/01-digitall');
/* EDITED CSS ARE IN THE MEDIA QUERY BELOW */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
li {
list-style-type: none;
}
body {
background: #ffffff;
font-family: 'Quicksand', sans-serif;
}
.container {
max-width: 1250px;
margin: 0 auto;
padding: 0;
}
nav {
width: 100%;
height: 100px;
background: silver;
}
nav .container {
display: flex;
justify-content: space-between;
height: 100%;
padding: 10px;
}
.logo {
font-family: '01 Digitall';
font-size: 40px;
text-transform: uppercase;
display: flex;
height: 100%;
align-items: center;
}
.logo .black {
color: #000000;
}
.logo .red {
color: #ff0000;
}
.nav-menu {
display: flex;
height: 100%;
align-items: center;
display: none;
}
nav ul {
display: flex;
height: 100%;
align-items: center;
}
nav li {}
nav a {
color: #000000;
}
#media (max-width: 768px) {
/* EDITED CSS */
.container {
position: relative;
}
.container > ul {
top: 100%;
left: 0;
}
/* END EDITED CSS */
nav {}
.logo {}
.nav-menu {
display: flex;
}
nav ul {
flex-direction: column;
position: absolute;
width: 100%;
}
nav li {}
nav a {
color: red;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<nav>
<div class="container">
<div class="logo">
<span class="black">Test</span>
<span class="red">Website</span>
</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Shop</li>
<li>Contact</li>
</ul>
<div class="nav-menu">
<i class="fa-solid fa-bars"></i>
</div>
</div>
</nav>
My goal is to make a navbar which is centered in the web page and responsive like here on stack.
So far I managed with some research and tutorials make a navbar which is responsive but it spreads to the end of corners.
I tried to wrap it in a container like I do with content but it limited whole navbar to middle.
Then tried to add margin to left and right but when I got on smaller screens it became ugly.
So I want your opinions how to fix it or if there is some other preferred way to do navbars.
const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.navbar {
display: flex;
position: relative;
justify-content: space-between;
align-items: center;
background-color: #333;
color: white;
}
.brand-title {
font-size: 1.5rem;
margin: .5rem;
}
.navbar-links {
height: 100%;
}
.navbar-links ul {
display: flex;
margin: 0;
padding: 0;
}
.navbar-links li {
list-style: none;
}
.navbar-links li a {
display: block;
text-decoration: none;
color: white;
padding: 1rem;
}
.navbar-links li:hover {
background-color: #555;
}
.toggle-button {
position: absolute;
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
#media (max-width: 800px) {
.navbar {
flex-direction: column;
align-items: flex-start;
}
.toggle-button {
display: flex;
}
.navbar-links {
display: none;
width: 100%;
}
.navbar-links ul {
width: 100%;
flex-direction: column;
}
.navbar-links ul li {
text-align: center;
}
.navbar-links ul li a {
padding: .5rem 1rem;
}
.navbar-links.active {
display: flex;
}
}
<nav class="navbar">
<div class="brand-title">Fruit Basket</div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
Wrap the entire thing in a header, set max-width: 800px; margin: 0 auto; on the nav and move the background-color to header:
const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
header {
background-color: #333;
}
.navbar {
display: flex;
position: relative;
justify-content: space-between;
align-items: center;
margin: 0 auto;
max-width: 800px;
color: white;
}
.brand-title {
font-size: 1.5rem;
margin: .5rem;
}
.navbar-links {
height: 100%;
}
.navbar-links ul {
display: flex;
margin: 0;
padding: 0;
}
.navbar-links li {
list-style: none;
}
.navbar-links li a {
display: block;
text-decoration: none;
color: white;
padding: 1rem;
}
.navbar-links li:hover {
background-color: #555;
}
.toggle-button {
position: absolute;
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
#media (max-width: 800px) {
.navbar {
flex-direction: column;
align-items: flex-start;
}
.toggle-button {
display: flex;
}
.navbar-links {
display: none;
width: 100%;
}
.navbar-links ul {
width: 100%;
flex-direction: column;
}
.navbar-links ul li {
text-align: center;
}
.navbar-links ul li a {
padding: .5rem 1rem;
}
.navbar-links.active {
display: flex;
}
}
<header>
<nav class="navbar">
<div class="brand-title">Fruit Basket</div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
margin: 0 auto centers the nav and max-width caps how wide it can be. If you want it to be wider just change this property.
As per your comment:
"I want what I have now, but with a change that when its on big screen that "logo" and links are on center like for example here on stackoverflow. When I did that with padding or container it messed with smaller screens view. – Angelll"
What I understood is you need everything center in bigger screen.
Correct me If I am wrong.
As per my understanding I have found the solution and added in the below code snippet.
I have replaced the .navbar class justify-content property to center.
const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.navbar {
display: flex;
position: relative;
justify-content: center;
align-items: center;
background-color: #333;
color: white;
}
.brand-title {
font-size: 1.5rem;
margin: .5rem;
}
.navbar-links {
height: 100%;
}
.navbar-links ul {
display: flex;
margin: 0;
padding: 0;
}
.navbar-links li {
list-style: none;
}
.navbar-links li a {
display: block;
text-decoration: none;
color: white;
padding: 1rem;
}
.navbar-links li:hover {
background-color: #555;
}
.toggle-button {
position: absolute;
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
#media (max-width: 800px) {
.navbar {
flex-direction: column;
align-items: flex-start;
}
.toggle-button {
display: flex;
}
.navbar-links {
display: none;
width: 100%;
}
.navbar-links ul {
width: 100%;
flex-direction: column;
}
.navbar-links ul li {
text-align: center;
}
.navbar-links ul li a {
padding: .5rem 1rem;
}
.navbar-links.active {
display: flex;
}
}
<nav class="navbar">
<div class="brand-title">Fruit Basket</div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
How can I move the nav-links (work & contact) that come up after you toggle the menu icon in mobile view to the left side of the screen (just under and in line the name). Currently targeting the #js-menu.main-nav.active in the media query to do so, but with no luck.
Everything is how it should be when it's in desktop view, but when I shrink to mobile and click on the icon, the nav-links are not in the right position.
let mainNav = document.getElementById("js-menu");
let navBarToggle = document.getElementById("js-navbar-toggle");
navBarToggle.addEventListener("click", function() {
mainNav.classList.toggle("active");
});
.navbar {
display: flex;
justify-content: space-between;
padding-bottom: 0;
height: 70px;
align-items: center;
}
.main-nav {
display: flex;
margin-right: 30px;
flex-direction: row;
justify-content: flex-end;
}
.main-nav li {
margin: 0;
list-style-type: none;
}
.nav-links {
margin-left: 40px;
}
.logo {
margin-top: 0px;
margin-left: 20px;
}
.navbar-toggle {
display: none;
}
.nav-links,
.logo {
text-decoration: none;
color: black;
}
.navbar {
font-size: 18px;
padding-bottom: 10px;
background: pink;
}
#media screen and (max-width: 500px) {
.navbar-toggle {
position: absolute;
top: 30px;
right: 30px;
display: block;
cursor: pointer;
font-size: 18px;
}
#js-menu.main-nav.active {
display: block;
text-align: left;
margin: 15px 15px 15px 0px;
padding-bottom: 4px;
}
.logo {
display: inline-block;
font-size: 18px;
margin-left: 20px;
}
.main-nav li {
text-align: left;
margin: 15px 15px 15px 0px;
padding-bottom: 4px;
}
.main-nav {
list-style-type: none;
display: none;
padding: 0px 20px;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<body>
<nav class="navbar">
<span class="navbar-toggle" id="js-navbar-toggle">
<i class="fa fa-bars"></i>
</span>
NAME
<ul class="main-nav" id="js-menu">
<li>
WORK
</li>
<li>
CONTACT
</li>
</ul>
</nav>
</body>
If I understood you right, you want to do something like this.
This should give you the right direction.
Basically you had hardcoded height: 70px; of .navbar.
That's why it didn't expand on the toggle.
let navBar = document.querySelector(".navbar");
let mainNav = document.getElementById("js-menu");
let navBarToggle = document.getElementById("js-navbar-toggle");
navBarToggle.addEventListener("click", function() {
mainNav.classList.toggle("active");
navBar.classList.toggle("active");
});
.navbar {
display: flex;
justify-content: space-between;
padding-bottom: 0;
height: 70px;
align-items: center;
}
.main-nav {
display: flex;
margin-right: 30px;
flex-direction: row;
justify-content: flex-end;
}
.main-nav li {
margin: 0;
list-style-type: none;
}
.nav-links {
margin-left: 40px;
}
.logo {
margin-top: 0px;
margin-left: 20px;
}
.navbar-toggle {
display: none;
}
.nav-links,
.logo {
text-decoration: none;
color: black;
}
.navbar {
font-size: 18px;
padding-bottom: 10px;
background: pink;
}
.navbar.active{
height: unset;
flex-direction: column;
align-items: flex-start;
padding-top: 24px;
}
#media screen and (max-width: 500px){
.navbar-toggle {
position: absolute;
top: 30px;
right: 30px;
display: block;
cursor: pointer;
font-size: 18px;
}
#js-menu.main-nav.active {
display: block;
text-align: left;
margin: 0;
margin-top: 4px;
padding: 0px;
}
#js-menu.main-nav.active .nav-links {
margin-left: 20px;
}
.logo {
display: inline-block;
font-size: 18px;
margin-left: 20px;
}
.main-nav li {
text-align: left;
margin: 15px 15px 15px 0px;
padding-bottom: 4px;
}
.main-nav {
list-style-type: none;
display: none;
padding: 0px 20px;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<nav class="navbar">
<span class="navbar-toggle" id="js-navbar-toggle">
<i class="fa fa-bars"></i>
</span>
NAME
<ul class="main-nav" id="js-menu">
<li>
WORK
</li>
<li>
CONTACT
</li>
</ul>
</nav>
</body>