Responsive center navbar - javascript

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>

Related

Scroll animation on navbar wont work if below element is set to position absolute

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
}

Collapsable Nav Bar using just JavaScript

I am trying to build a mobile view navigation bar that closes after clicking on a list item and I'm having trouble finding a solution. The requirements state not to use jQuery or CSS. Although, CSS solutions are also helpful. The aim is to have the list items navigate the user to a section on the page with the appropriate id. It works as it should but I want the mobile view nav bar to close after clicking a list item. Here is my code so far:
const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})
.navbar {
display: flex;
position: fixed;
width: 100%;
justify-content: space-between;
align-items: center;
background-color: #2a324b;
color: white;
top: 0;
}
.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: rgb(204, 194, 194);
color: #2a324b;
}
.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">Palesa Mapeka</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>About Me</li>
<li>Tech Stack</li>
<li>Projects</li>
</ul>
</div>
</nav>
Ideas on how to solve my dilemma are appreciated. I want to learn how to do this using JavaScript.

Why not just add the same click listener to the navbar-links class?
const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})
navbarLinks.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})
.navbar {
display: flex;
position: fixed;
width: 100%;
justify-content: space-between;
align-items: center;
background-color: #2a324b;
color: white;
top: 0;
}
.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: rgb(204, 194, 194);
color: #2a324b;
}
.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">Palesa Mapeka</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>About Me</li>
<li>Tech Stack</li>
<li>Projects</li>
</ul>
</div>
</nav>

I think we should to try this
<button type="button"
onclick="document.getElementByClassName('navbar').style.display = 'none'">
Hide Navbar</button>
It will hide any element with navbar className
Thank you

Navbar remains opened on page load and shouldn't

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!

Why won't my flexbox navbar align correctly?

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>

How to move ul div display block

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>

Categories