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>
Related
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
I ran into a problem displaying a burger menu for my website. I wanted it to appear on the top right corner but somehow the menu is invisible right now.
I leave my source codes so I appreciate it if any of you could advise me on this.
$(document).ready(function(){
$(".burger").on("click", function(){
$("nav li").toggleClass("open");
});
});
/* Header */
header {
position: fixed;
z-index: 100;
width: 100%;
border-bottom: solid 1px #c6c1c1;
background-color: white;
}
header .content {
display: flex;
align-items: center;
padding: 1.875rem;
}
header .site-logo {
flex: 1;
width: 60%
}
header nav ul {
display: flex;
}
ul {
list-style-type: none;
display: flex;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
}
nav li {
padding-left: 3.5rem;
}
nav li:last-child {
display: flex;
}
nav a {
vertical-align: bottom;
line-height: 1.6;
font-size: 1rem;
color: #de6cb6;
}
nav a:link {
color: red;
}
nav select {
display: none;
}
a:-webkit-any-link {
cursor: pointer;
}
header .icon {
width: 1rem;
padding-left: .75rem;
color: #de6cb6
}
header .mobile {
display: none;
}
#media only screen and (max-width: 1200px) {
nav li:last-child {
display: block;
}
header .content {
padding: 1rem 1rem;
}
}
#media only screen and (max-width: 1000px) {
header {
float: none;
}
header .desktop {
display: none;
}
header .mobile {
background: pink;
color: pink;
List-style: none;
clear: both;
}
header .mobile li {
display: inline-block;
margin: 10px;
}
header .mobile .burger {
width: 35px;
height: 5px;
background: pink;
margin: 6px 0;
}
#burger {
float: right;
visibility: visible;
margin: 5px;
}
header .content {
padding: .5rem 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Header -->
<header>
<div class="content" style="height: 60px;">
<img src="./resources/images/cropped_springtribelogo_notagline.png" style="height:60px;">
<nav class="desktop">
<ul>
<li>Impressum</li>
<li>EN</li>
<li><img class="icon" src="./resources/images/instagram (1.png"></li>
<li><img class="Linkedin" src="./resources/images/Linkedin_saturated_4.png" style="width: 20px; color: #de6cb6; margin-left: 8px;"></li>
</ul>
</nav>
<nav class="mobile">
<!-- Navigation Burger-->
<div id="burger" class="burger">
<div></div>
<div></div>
<div></div>
</div>
<br>
<li>Home</li>
<li>About</li>
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
</nav>
</div>
</header>
There's two issues in your code. Firstly the rules in the <1000px media query don't override the default display: none setting of the header .mobile element. Secondly you're applying the styling for the lines of the burger icon to the .burger div directly, instead of this child div within it. If you fix the following two issues, the code works correctly:
#media only screen and (max-width: 1000px) {
header .mobile {
/* other rules... */
background-color: transparent;
display: block;
}
/* OLD: header .mobile .burger { */
header .mobile .burger div {
width: 35px;
height: 5px;
background: pink;
margin: 6px 0;
}
Working example:
/* Header */
header {
position: fixed;
z-index: 100;
width: 100%;
border-bottom: solid 1px #c6c1c1;
background-color: white;
}
header .content {
display: flex;
align-items: center;
padding: 1.875rem;
}
header .site-logo {
flex: 1;
width: 60%
}
header nav ul {
display: flex;
}
ul {
list-style-type: none;
display: flex;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
}
nav li {
padding-left: 3.5rem;
}
nav li:last-child {
display: flex;
}
nav a {
vertical-align: bottom;
line-height: 1.6;
font-size: 1rem;
color: #de6cb6;
}
nav a:link {
color: red;
}
nav select {
display: none;
}
a:-webkit-any-link {
cursor: pointer;
}
header .icon {
width: 1rem;
padding-left: .75rem;
color: #de6cb6
}
header .mobile {
display: none;
}
#media only screen and (max-width: 1200px) {
nav li:last-child {
display: block;
}
header .content {
padding: 1rem 1rem;
}
}
#media only screen and (max-width: 1000px) {
header {
float: none;
}
header .desktop {
display: none;
}
header .mobile {
background-color: transparent;
color: pink;
List-style: none;
clear: both;
display: block;
}
header .mobile li {
display: inline-block;
margin: 10px;
}
header .mobile .burger div {
width: 35px;
height: 5px;
background: pink;
margin: 6px 0;
}
#burger {
float: right;
visibility: visible;
margin: 5px;
}
header .content {
padding: .5rem 0;
}
}
<header>
<div class="content" style="height: 60px;">
<img src="./resources/images/cropped_springtribelogo_notagline.png" style="height:60px;">
<nav class="desktop">
<ul>
<li>Impressum</li>
<li>EN</li>
<li>
<img class="icon" src="./resources/images/instagram (1.png">
</li>
<li>
<img class="Linkedin" src="./resources/images/Linkedin_saturated_4.png" style="width: 20px; color: #de6cb6; margin-left: 8px;">
</li>
</ul>
</nav>
<nav class="mobile">
<div id="burger" class="burger">
<div></div>
<div></div>
<div></div>
</div><br>
<ul>
<li>Home</li>
<li>About</li>
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
</ul>
</nav>
</div>
</header>
As an aside, note that your HTML isn't valid as the li elements need to be children of a ul
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>
I have created a template with a horizontal navigation in desktop, and a vertical navigation in mobile. I am using one nav list and changing the styling of it for desktop to mobile.
The thing is, the jQuery that I have given it adds some strange transitions to it that I want removed. A fade in/fade out of the text and the sidebar and a weird slide in/slide out effect.
What I am trying to achieve is to make the mobile nav slide in/slide out with the width intact, with no fade effects. I think the toggle() class has something to do with it, but Im not sure.
Also, when you open then click the hamburger to open then close the mobile nav, then go to view the desktop mode, the desktop nav is gone also until you refresh the page.
Any help would be great. Thanks.
$('.toggle-menu').click(function() {
$('nav').toggle("nav");
});
:root {
--black: #212121;
--grey: #ccc;
--light-grey: #eee;
--grey-opacity: #ccc, 0.2;
--gutter: 30px;
}
html,
body {
min-height: 100%;
}
html {
box-sizing: border-box;
background-color: var(--grey);
}
body {
font-family: 'Poppins', sans-serif;
font-size: 14px;
line-height: 1.3;
color: var(black);
margin: 0;
}
a {
text-decoration: none;
color: var(--black);
}
a:hover,
a:focus {
color: var(--black);
}
ul {
padding: 0;
}
ul li {
display: inline;
list-style-type: none;
}
.container {
display: grid;
grid-template-columns: 1fr;
grid-template-areas: "header" "aside content" "overview overview" "footer footer";
}
.header-skin {
background-color: rgba(255, 255, 255, 0.1);
}
header {
grid-area: header;
display: flex;
justify-content: space-between;
padding: var(--gutter) 15px;
max-width: 1200px;
margin: 0 auto;
}
.toggle-menu span {
width: 20px;
height: 2px;
margin-bottom: 4px;
border-radius: 50px;
background: var(--black);
display: block;
}
#media (min-width: 839px) {
.toggle-menu {
display: none;
}
nav ul {
margin: 0;
}
nav ul li {
text-transform: capitalize;
padding-left: 20px;
}
nav ul li a {
position: relative;
}
nav ul li a.active {
color: var(--black);
font-weight: 700;
}
nav ul li a.active::after {
content: ' ';
width: 100%;
height: 2px;
display: block;
position: absolute;
left: 0;
bottom: -4px;
background-color: var(--black);
}
nav ul li:nth-child(4n) {
margin-right: 200px;
}
}
#media (max-width: 840px) {
nav {
height: 100%;
position: fixed;
background-color: rgba(255, 255, 255, 0.1);
left: 0;
top: 78px;
width: 300px;
margin-right: -300px;
display: none;
}
nav ul {
margin: 0;
padding: 40px 0 0 40px;
display: flex;
flex-direction: column;
}
nav ul li {
text-transform: capitalize;
padding-bottom: 40px;
}
nav ul li a {
position: relative;
}
nav ul li a.active {
color: var(--black);
font-weight: 700;
}
nav ul li a.active::after {
content: ' ';
width: 100%;
height: 2px;
display: block;
position: absolute;
left: 0;
bottom: -4px;
background-color: var(--black);
}
nav ul li:nth-child(4n) {
margin-right: 200px;
}
}
<div class="container">
<div class="header-skin">
<header>
<div class="logo">
logo
</div>
<div class="toggle-menu">
<span></span>
<span></span>
<span></span>
</div>
<nav>
<ul>
<li>home</li>
<li>about</li>
<li>news</li>
<li>contact</li>
<li>twitter</li>
<li>instagram</li>
</ul>
</nav>
</header>
</div>
<div class="aside"></div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="functions.js"></script>
</div>
I'm trying to create dropdown menu that will open and collapse when the "mobile-nav" button gets clicked.
Please see this video or website as examples of the intended behavior:
https://www.youtube.com/watch?v=ozOSV75DgzU
http://travisneilson.com/
function mobileNav() {
$('.mobile-nav-toggle').on('click', function() {
var status = $(this).hasClass('is-open');
if (status) {
$('.mobile-nav-toggle, .mobile-nav').removeClass('is-open');
} else {
$('.mobile-nav-toggle, .mobile-nav').addClass('is-open');
}
});
}
/* ------------------------------------------ */
/* BASIC SETUP */
/* ------------------------------------------ */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
text-align: justify color: #fff;
font-family: 'Lato', 'arial', sans-serif;
font-size: 19px;
font-weight: 400;
text-rendering: optimizeLegibility;
background: #333;
background-position: center;
height: 100vh;
background-attachment: fixed;
}
/* ------------------------------------------ */
/* REUSABLE COMPONENTS */
/* ------------------------------------------ */
.row-basic {
max-width: 1216px;
}
.main-container {
max-width: 1216px;
margin: 0 auto;
}
/* ------------------------------------------ */
/* HEADER */
/* ------------------------------------------ */
.mobile-nav {
display: ;
position: ;
width: 1216px;
background: white;
padding: 31px 0px 21px;
transform: translateY(-100%);
transition: all 0.3s ease-in-out
}
.mobile-nav.is-open {
display: block;
transform: translateY(0%);
}
.mobile-nav ul {
list-style: none;
}
.mobile-nav ul li {
text-align: center;
margin-bottom: 10px;
}
.mobile-nav ul li a:link,
.mobile-nav ul li a:visited {
color: #999;
text-decoration: none;
text-transform: uppercase;
}
header {
background-color: rgba(246, 149, 149, 0.06);
height: 81px;
width: auto;
padding-top: 24px;
margin-top: 26px;
margin-bottom: 0px;
display: flex;
justify-content: space-between;
}
/* ----- NAVIGATION -----*/
nav {
display: flex;
align-items: center;
}
nav ul {
display: flex;
}
.main-nav {
list-style: none;
}
.main-nav li {
display: inline-block;
line-height: 31px;
border-right: 1px solid rgba(255, 255, 255, 0.24);
padding-right: 9px;
padding-left: 9px;
margin-right: 0px;
width: auto;
}
.main-nav li:last-child {
border-right: hidden;
margin-right: 31px;
}
.main-nav li a:link,
.main-nav li a:visited {
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
.user-tools {
display: flex;
align-items: center;
}
.user-tools:focus {
outline: none;
}
/* ----- MENU BUTTON -----*/
.mobile-nav-toggle {
height: 50px;
width: 35px;
margin-right: 31px;
display: flex;
align-items: center;
cursor: pointer;
}
.mobile-nav-toggle span,
.mobile-nav-toggle span::before,
.mobile-nav-toggle span::after {
border-radius: 2px;
content: "";
display: block;
height: 6px;
width: 100%;
background: #fff;
position: relative;
}
.mobile-nav-toggle span::before {
top: 11px;
}
.mobile-nav-toggle span::after {
bottom: 17px;
}
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link href='https://fonts.googleapis.com/css?family=Lato:400,900' rel='stylesheet' type='text/css'>
<script src="resources/js/functions.js"></script>
</head>
<body>
<div class="main-container">
<div class="mobile-nav is-open">
<ul>
<li>Menu
</li>
<li>Services
</li>
<li>Gallery
</li>
<li>About Me
</li>
</ul>
</div>
<header class="row-basic">
<nav>
<ul class="main-nav">
<li>Menu
</li>
<li>Services
</li>
<li>Gallery
</li>
<li>About Me
</li>
</ul>
</nav>
<div class="user-tools">
<div class="mobile-nav-toggle">
<span></span>
</div>
</div>
</header>
</div>
</body>
</html>
You have to add link to jQuery script.
Delete declaration function mobileNav() { and it closing braket }.
$('.mobile-nav-toggle').on('click', function() {
var status = $(this).hasClass('is-open');
if (status) {
$('.mobile-nav-toggle, .mobile-nav').removeClass('is-open');
} else {
$('.mobile-nav-toggle, .mobile-nav').addClass('is-open');
}
});
Here is example of working code https://jsfiddle.net/efjz40ob/