I'm trying to learn HTML by creating a mess around the website, I have added a menu bar on the top right of my site but when I open up the display my text stops showing.
the text showing up on the top of page
The menu bar without text
I want the text that shows up on the top from the first picture to show up on the menu bar.
This is my CSS
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
nav{
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: darkgray;
font-family: 'Poppins', sans-serif;
}
.logo{
color: rgb(221, 220, 220);
letter-spacing: 5px;
font-size: 22px;
}
.nav-links{
display: flex;
justify-content: space-around;
width: 30%;
}
.nav-links li{
list-style: none;
}
.nav-links a{
color: rgb(221, 220, 220);
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 10px;
}
.burger{
display: none;
cursor: pointer;
}
.burger div{
width: 25px;
height: 3px;
background-color: rgb(221, 220, 220);
margin: 5px;
transition: all 0.3s ease;
}
#media screen and (max-width:1024px){
.nav-links{
width: 30%;
}
}
#media screen and (max-width:768px){
body{
overflow-x: hidden;
}
.nav-links{
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: darkgray;
display: flex;
flex-direction: column;
align-items: center;
width: 20%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger{
display: block;
}
}
.nav-active{
transform: translateX(0%);
}
#keyframes navLinkFade{
from{
opacity: 0;
transform: translateX(30px);
}
to{
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line1{
transform: rotate(-45deg) translate(-5px,6px);
}
.toggle .line2{
opacity: 0;
}
.toggle .line3{
transform: rotate(45deg) translate(-5px,-6px);
}
This is my HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/d82fb47a55.js" crossorigin="anonymous"></script>
<title>FutAvion</title>
</head>
<body>
<nav>
<div class="logo">
<h4><u>FutAvion</u></h4>
</div>
<ul class="nav-links">
<li>Home</li>
<li>Work</li>
<li>About</li>
<li>Projects</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="apps"></script>
</body>
</html>
This is my js
const navSlide = () => {
const menu = document.querySelector('.menu');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
menu.addEventListener('click',()=> {
//toggle Nav
nav.classList.toggle('nav-active');
//Anumate Links
navLinks.forEach((link, index) => {
if(link.style.animation){
link.style.animation = ''
} else {
link.style.animation = 'navLinkFade 0.5s ease fowards ${index / 7 + 0.5}s';
}
});
//menu Animation
menu.classList.toggle('toggle');
});
}
navSlide();
That's your problem you gave .nav-links li an opacity of 0
Therefore the li links won't show. So to fix that you just need to remove the opacity and you are set to go.
#media screen and (max-width: 768px)
.nav-links li {
/* opacity: 0; */
}
// jshint esversion: 6
console.log('am working');
const navSlide = () => {
const menu = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
menu.addEventListener('click', () => {
//toggle Nav
nav.classList.toggle('nav-active');
// Anumate Links
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = '';
} else {
link.style.animation = 'navLinkFade 0.5s ease fowards ${index / 7 + 0.5}s';
}
});
//menu Animation
menu.classList.toggle('toggle');
});
};
navSlide();
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: darkgray;
font-family: 'Poppins', sans-serif;
}
.logo {
color: rgb(221, 220, 220);
letter-spacing: 5px;
font-size: 22px;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 30%;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: rgb(221, 220, 220);
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 10px;
}
.burger {
display: none;
cursor: pointer;
}
.burger div {
width: 25px;
height: 3px;
background-color: rgb(221, 220, 220);
margin: 5px;
transition: all 0.3s ease;
}
#media screen and (max-width:1024px) {
.nav-links {
width: 30%;
}
}
#media screen and (max-width:768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: darkgray;
display: flex;
flex-direction: column;
align-items: center;
width: 20%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 1;
}
.burger {
display: block;
}
}
.nav-active {
transform: translateX(0%);
}
#keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
<nav>
<div class="logo">
<h4><u>FutAvion</u></h4>
</div>
<ul class="nav-links">
<li>Home</li>
<li>Work</li>
<li>About</li>
<li>Projects</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
Related
I have a responsive hamburger side navigation bar on the upper right of my website. When user clicks, the sub-menus appear vertically. There is no problem when viewed in PC, but, when viewed in mobile, there is a blank space on the right side of the screen, as shown below:
I searched everywhere to find the answer, such as adjusting the width of the screen, placing the width as 100%, writing body and HTML {overflow-x: hidden;}, etc..
After doing more research, I finally found out that the blank space is a vertical hamburger navigation bar. Simply put, if a user clicks on the hamburger menu, the vertical sub-menu is sliding to from right to left.
If I write width: 100% in .nav-links in #media of CSS, more blank space is created on the right since the side navigation bar would slide full screen from right to left.
I'm wondering whether there is any way I can have this responsive vertical hamburger side-menu without having any of the spacing issue?
The issue belongs to here in CSS:
#media screen and (max-width: 950px) {
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 10vh;
background-color: black;
display: flex;
flex-direction: column;
align-items: center;
width: 40%;
transform: translateX(100%);
padding-right: 2em;
transition: transform 0.5s ease-in;
z-index: 99999;
}
Below is a full-code for my website:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="monday.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>J[a]son</title>
</head>
<body>
<nav>
<div class = "logo">
<h4>J[a]son</h4>
</div>
<ul class = "nav-links">
<li>
HOME
</li>
<li>
PHOTOGRAPHY
<ul class="sub-menu">
<li>Colour</li>
<li>Black</li>
</ul>
</li>
<li>
CODING
</li>
<li>
ABOUT
</li>
</ul>
<div class= "burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="testing.js"></script>
<div class="main_car_wrapper">
<img class="main_car" src="Photos/main_car1.jpg" alt="car" width="100%" height="100%"/>
</div>
<!--<p>June, 2020. Sunshine Coast, BC, Canada </p>-->
<div class ="bottom">
<div class = "logos">
<p id = "paragraph">TESTING</p>
</div>
</div>
</body>
</html>
CSS
html {
min-height: 100vh;
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
background-color: black !important; /*rgb(241, 233, 233);*/
display: flex;
flex-direction: column;
min-height: 100vh;
}
nav {
display: flex !important;
justify-content: space-between;
/*padding-right: 2em;*/
padding-left: 2em;
padding-top: 2em;
padding-bottom: 1.5em;
align-items: center;
min-height: 8vh;
background-color: black;
/*font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;*/
font-family: 'Poppins', sans-serif;
}
.logo {
background-color: black;
color: rgb(240, 235, 235);
font-size: 20px;
text-transform: uppercase;
letter-spacing: 5px;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 30%;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: white;
text-decoration: none;
letter-spacing: 1px;
font-weight: bold;
font-size: 11px;
/*padding: 5px 5px;*/
}
.nav-links a:hover {
text-decoration: none;
color: white;
}
.burger {
display: none;
cursor: pointer;
}
.burger div {
width: 25px;
height: 3px;
background-color: white;
margin: 5px;
transition: all 0.3s ease;
}
#media screen and (max-width:1430px) {
.nav-links {
width: 40%;
}
}
#media screen and (max-width:950px) {
* {
margin: 0;
padding: 0;
}
body, html {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 10vh;
background-color: black;
display: flex;
flex-direction: column;
align-items: center;
width: 40%;
transform: translateX(100%);
padding-right: 2em;
transition: transform 0.5s ease-in;
z-index: 99999;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
padding-right: 1em;
}
.sub-menu {
position: relative;
}
.carousel-control-prev {
padding-top: 5em;
}
.carousel-control-next {
padding-top: 5em;
}
.carousel-item {
padding-top: 6em;
}
.logos {
padding-bottom: 0em;
}
}
.nav-active {
transform: translate(0%);https://ahweb.org.uk/car.png
}
.main_car_wrapper {
background-image: url(https://ahweb.org.uk/car.png);
background-repeat: no-repeat no-repeat;
background-position: center center;
background-size: contain;
max-width: 100%;
height: auto;
padding-top: 6em;
}
#keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity :1;
transform: translateX(0px);
}
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
.sub-menu {
display: none;
}
.sub-menu li a {
/*display: block;*/
text-decoration: none;
color: white;
border-top: 1px solid white;
background: rgb(221, 215, 215);
white-space: nowrap;
top: 40px;
left: 25px;
padding: 5px;
padding-top: 1px;
}
.sub-menu li a:hover{
background: rgb(10, 10, 10);
opacity: 1;
transition: all 0.5s ease;
}
li:hover ul {
display: flex;
position: absolute;
}
li:hover li {
float: none;
font-size: 8px;
}
li:hover a {
background: rgb(5, 5, 5);
}
li:hover li a:hover {
background: rgb(19, 18, 18);
}
.bottom {
margin-top: auto;
}
.logos {
display: flex !important;
flex-direction: row;
background-color: black;
}
.logos a {
color: white;
text-align: center;
padding: 14px;
text-decoration: none;
font-size: 17px;
}
.logos a:hover {
text-decoration: none;
color: white;
}
.carousel-inner p {
text-align: center;
color: black;
font-size: 14px;
}
.carousel-inner {
background-color: black;
}
.carousel-inner img {
display: flex;
margin: 0 auto;
width: 50vw;
max-height: auto;
align-items: center;
}
/*.carousel-item {
height: 300px
}*/
.carousel-control-prev-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}
.carousel-control-next-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}
JS:
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
//Toggle Nav
burger.addEventListener('click', () => {
//Toggle Nav
nav.classList.toggle('nav-active');
//Animate Links
navLinks.forEach((link, index) => {
if(link.style.animation) {
link.style.animation = ''
} else {
link.style.animation = `navLinkFade 0.2s ease forwards ${index / 7 + 0.5}s`;
}
});
//Burger Animation
burger.classList.toggle('toggle');
});
//Animate Links
}
navSlide();
I want "THE NAV" to be displayed in the center of the navbar for mobile view and want the hamburger menu icon on the far right side.
how do i do this?
I tried .logo justify-content: center but nothing changed
If anyone would care to explain this to me I would be super grateful, I have tried finding a solution myself by using google but as I'm quite new to this I haven't been able to find a fix for my problem because I'm really not sure what to search for to fix my problem
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #5d4954;
font-family: "Poppins", sans-serif;
}
.logo {
color: rgb(226, 226, 226);
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 40%;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: rgb(226, 226, 226);
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.burger {
display: none;
cursor: pointer;
}
.burger div {
width: 25px;
height: 3px;
background-color: rgb(226, 226, 226);
margin: 5px;
transition: all 0.3s ease;
}
#media screen and (max-width: 1024px) {
.nav-links {
width: 60%;
}
}
#media screen and (max-width: 768px) {
body {
overflow: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #5d4954;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.4s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
}
}
.nav-active {
transform: translateX(0%);
}
<nav>
<div class="logo">
<h4>The Nav</h4>
</div>
<ul class="nav-links">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Projects</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
So thing is: Display Flex distributes space between divs evenly. This means your logo and your burger bove geht the same space and justify-content then placees them next to each other with 50% width.
What you need to do is: Take the burger out of the equation for the flexbox. You can do this by placing it absolute (with position: absolute) and then you just have to tell it a right-value of e.g. 40px
//CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #5d4954;
font-family: "Poppins", sans-serif;
}
.logo {
color: rgb(226, 226, 226);
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 40%;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: rgb(226, 226, 226);
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.burger {
display: none;
cursor: pointer;
}
.burger div {
width: 25px;
height: 3px;
background-color: rgb(226, 226, 226);
margin: 5px;
transition: all 0.3s ease;
}
#media screen and (max-width: 1024px) {
.nav-links {
width: 60%;
}
}
#media screen and (max-width: 768px) {
body {
overflow: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #5d4954;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.4s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
position: absolute;
right: 40px;
}
}
.nav-active {
transform: translateX(0%);
}
//HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="nav.css" />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;500&display=swap"
rel="stylesheet"
/>
<title>NAVIGATION</title>
</head>
<body>
<nav>
<div class="logo">
<h4>The Nav</h4>
</div>
<ul class="nav-links">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Projects</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="nav.js"></script>
</body>
</html>
I have a pure css hamburger menu based on this codepen and I made my hamburger menu only show up on devices with 768px width and below, the hamburger menu also has some transitions when opening and closing to make it look smooth but the problem is that when the page is refreshed, you can see the menu show up for a split second before it transitions under the header. This can also be seen when you're manually resizing the viewport from a width larger than 768px and when it gets to 767px, you can the see the menu appear for a split second before it disappears. Please I need help to make this behaviour stop. Below is the code required to recreate this problem:
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
min-width: fit-content;
}
body {
font-family: "Montserrat", sans-serif;
background-color: #eeeeee;
}
header {
width: 100%;
background-color: #eeeeee;
padding: 0 20px;
height: 65px;
position: fixed;
top: 0;
}
.logo {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-top: 15px;
}
#header-img {
width: 100%;
height: 100%;
max-width: 300px;
}
/* Navigation */
nav {
width: 100%;
text-align: center;
}
/* Hamburger menu button */
.menu-btn {
display: none;
}
.menu-icon {
display: inline-block;
position: relative;
top: -42px;
left: -25px;
cursor: pointer;
padding: 24px 14px;
z-index: 1;
}
.navicon {
background-color: #222222;
display: block;
height: 3px;
width: 26px;
position: relative;
transition: 0.3192s ease-in-out;
}
.navicon:before,
.navicon:after {
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
background-color: #222222;
transition: 0.3192s ease-in-out;
}
.navicon:before {
top: 9px;
}
.navicon:after {
bottom: 9px;
}
/* Hamburger Menu Animation Start */
.menu-btn:checked~.menu-icon .navicon:before {
transform: rotate(-45deg);
top: 0;
}
.menu-btn:checked~.menu-icon .navicon:after {
transform: rotate(45deg);
bottom: 0;
}
.menu-btn:checked~.menu-icon .navicon {
background: transparent;
transition: 0.3192s ease-in-out;
}
/* Hide blue background on hamburger menu tap on some mobile devices */
.menu-icon,
.menu-btn,
.navicon {
-webkit-tap-highlight-color: transparent;
}
/* Nav items */
.menu {
background-color: #eeeeee;
width: 100%;
height: auto;
list-style-type: none;
position: absolute;
top: 0;
left: 0;
right: 0;
margin-top: 65px;
padding: 0;
visibility: hidden;
opacity: 0;
transition: visibility 0.3192s ease-in-out, opacity 0.3192s ease-in-out;
}
.menu-btn:checked~nav .menu {
visibility: visible;
opacity: 1;
transition: visibility 0.3192s ease-in-out, opacity 0.3192s ease-in-out;
}
.menu li {
border-top: 1px solid #c7c7c7;
padding: 10px 0;
opacity: 0;
transition: 0.5s;
}
.menu a {
color: #222222;
text-decoration: none;
font-weight: 500;
font-size: 0.9rem;
opacity: 0;
transition: 0.5s;
}
.menu-btn:checked~nav .menu a,
.menu-btn:checked~nav .menu li {
opacity: 1;
transition: 0.3192s ease-in-out;
}
/* Medium devices (landscape tablets, 768px and up) */
#media only screen and (min-width: 768px) {
header {
display: flex;
align-items: center;
justify-content: space-around;
}
.logo {
width: 60vw;
margin-top: 0;
justify-content: flex-start;
}
.menu-icon {
display: none;
}
nav {
width: 40vw;
margin-top: 0;
}
.menu {
width: 100%;
transform: none;
transition: none;
position: static;
margin: 0;
visibility: visible;
opacity: 1;
display: flex;
justify-content: space-around;
align-items: center;
}
.menu li {
border: none;
padding: 0;
opacity: 1;
transition: none;
}
.menu a {
opacity: 1;
transition: none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Product Landing Page</title>
</head>
<body>
<main id="main">
<header id="header">
<div class="logo">
<img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="original trombones logo">
</div>
<input type="checkbox" class="menu-btn" id="menu-btn">
<label for="menu-btn" class="menu-icon"><span class="navicon"></span></label>
<nav id="nav-bar">
<ul class="menu">
<li>Feautures</li>
<li>How it Works</li>
<li>Pricing</li>
</ul>
</nav>
</header>
</main>
</body>
</html>
I also provided a fiddle you can use to check out the problem.
P.S: The original codepen I got the idea from also has the same issue if you copy the code and preview it in a browser and reload the page.
Using javascript we can add the stop-transition class to the body for some few milliseconds. Then in the css we can add the rule to stop play any transition momentarily. After that, when the resize is done, we can remove the stop-transition class from the body to make sure that everything acts accordingly.
Here's the fiddle.
(function () {
const classes = document.body.classList;
let timer = null;
window.addEventListener('resize', function () {
if (timer){
clearTimeout(timer);
timer = null;
} else {
classes.add('stop-transition');
}
timer = setTimeout(() => {
classes.remove('stop-transition');
timer = null;
}, 100);
});
})();
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
min-width: fit-content;
}
body {
font-family: "Montserrat", sans-serif;
background-color: #eeeeee;
}
/* Stop playing transition momentarily on viewport resize. */
body.stop-transition .menu {
transition: none;
}
header {
width: 100%;
background-color: #eeeeee;
padding: 0 20px;
height: 65px;
position: fixed;
top: 0;
}
.logo {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-top: 15px;
}
#header-img {
width: 100%;
height: 100%;
max-width: 300px;
}
/* Navigation */
nav {
width: 100%;
text-align: center;
}
/* Hamburger menu button */
.menu-btn {
display: none;
}
.menu-icon {
display: inline-block;
position: relative;
top: -42px;
left: -25px;
cursor: pointer;
padding: 24px 14px;
z-index: 1;
}
.navicon {
background-color: #222222;
display: block;
height: 3px;
width: 26px;
position: relative;
transition: 0.3192s ease-in-out;
}
.navicon:before,
.navicon:after {
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
background-color: #222222;
transition: 0.3192s ease-in-out;
}
.navicon:before {
top: 9px;
}
.navicon:after {
bottom: 9px;
}
/* Hamburger Menu Animation Start */
.menu-btn:checked~.menu-icon .navicon:before {
transform: rotate(-45deg);
top: 0;
}
.menu-btn:checked~.menu-icon .navicon:after {
transform: rotate(45deg);
bottom: 0;
}
.menu-btn:checked~.menu-icon .navicon {
background: transparent;
transition: 0.3192s ease-in-out;
}
/* Hide blue background on hamburger menu tap on some mobile devices */
.menu-icon,
.menu-btn,
.navicon {
-webkit-tap-highlight-color: transparent;
}
/* Nav items */
.menu {
background-color: #eeeeee;
width: 100%;
height: auto;
list-style-type: none;
position: absolute;
top: 0;
left: 0;
right: 0;
margin-top: 65px;
padding: 0;
visibility: hidden;
opacity: 0;
transition: visibility 0.3192s ease-in-out, opacity 0.3192s ease-in-out;
}
.menu-btn:checked~nav .menu {
visibility: visible;
opacity: 1;
transition: visibility 0.3192s ease-in-out, opacity 0.3192s ease-in-out;
}
.menu li {
border-top: 1px solid #c7c7c7;
padding: 10px 0;
opacity: 0;
transition: 0.5s;
}
.menu a {
color: #222222;
text-decoration: none;
font-weight: 500;
font-size: 0.9rem;
opacity: 0;
transition: 0.5s;
}
.menu-btn:checked~nav .menu a,
.menu-btn:checked~nav .menu li {
opacity: 1;
transition: 0.3192s ease-in-out;
}
/* Medium devices (landscape tablets, 768px and up) */
#media only screen and (min-width: 768px) {
header {
display: flex;
align-items: center;
justify-content: space-around;
}
.logo {
width: 60vw;
margin-top: 0;
justify-content: flex-start;
}
.menu-icon {
display: none;
}
nav {
width: 40vw;
margin-top: 0;
}
.menu {
width: 100%;
transform: none;
transition: none;
position: static;
margin: 0;
visibility: visible;
opacity: 1;
display: flex;
justify-content: space-around;
align-items: center;
}
.menu li {
border: none;
padding: 0;
opacity: 1;
transition: none;
}
.menu a {
opacity: 1;
transition: none;
}
}
<main id="main">
<header id="header">
<div class="logo">
<img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="original trombones logo">
</div>
<input type="checkbox" class="menu-btn" id="menu-btn">
<label for="menu-btn" class="menu-icon"><span class="navicon"></span></label>
<nav id="nav-bar">
<ul class="menu">
<li>Feautures</li>
<li>How it Works</li>
<li>Pricing</li>
</ul>
</nav>
</header>
</main>
My problem is that when I specify the height of the div class "mobile" to 100wh, it only takes on about half of the screen. Another thing is, that I cannot make the list inside the mobile div to appear. My goal is to align them horizontally and vertically using flexbox, and make them appear as I press the hamburger button but so far I cannot see the list elements at all. Thanks for help!
* {
margin: 0;
padding: 0;
-webkit-tap-highlight-color: transparent;
}
.mobile {
position: fixed;
visibility: hidden;
background: rgba(255, 0, 0, 0);
width: 100vw;
height: 500px;
z-index: 1;
transition: visibility 1s, background 1s;
}
.hamburger {
align-items: center;
display: flex;
width: 25px;
height: 15px;
margin-right: 50px;
cursor: pointer;
display: none;
z-index: 2;
}
.hamburger.active .line {
background: rgba(0, 0, 0, 0);
transition: .2s;
}
.hamburger.active .line::before {
transform: rotate(45deg);
top: 0;
transition: .5s;
}
.hamburger.active .line::after {
transform: rotate(135deg);
top: 0;
transition: .5s;
}
.line {
position: relative;
background-color: black;
width: 100%;
height: 1px;
transition: .5s;
}
.line::before,
.line::after {
position: absolute;
content: "";
height: 1px;
width: 100%;
background-color: black;
}
.line::after {
top: 6px;
transition: .5s;
}
.line::before {
top: -6px;
transition: .5s;
}
.nav {
justify-content: flex-end;
display: flex;
flex-wrap: wrap;
letter-spacing: 1px;
padding: 30px 0;
margin-right: 50px;
}
.nav li {
text-align: center;
font-family: "Georgia";
padding-left: 60px;
font-size: .8em;
font-weight: normal;
letter-spacing: 1px;
list-style: none;
}
.nav li a {
position: relative;
text-decoration: none;
color: inherit;
transition: color .5s;
}
.nav li a::before {
top: 2em;
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
left: 0;
background-color: black;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.nav li a:hover::before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.nav, nav {
align-items: center;
display: flex;
}
nav .logo {
margin-left: 50px;
display: flex;
justify-content: flex-start;
flex: 1;
font-family: Georgia, serif;
font-size: .8em;
padding: 30px 0;
font-weight: bold;
letter-spacing: 3px;
}
.sublogo {
font-weight: lighter;
margin-left: 10px;
}
.sublogo::before {
content: '|';
margin-right: 10px;
}
#media (max-width: 1120px) {
.nav {
display: none;
}
.hamburger {
display: flex;
-ms-transform: scale(1.2, 1.2);
-webkit-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
}
nav .logo {
font-size: 1em;
letter-spacing: 3px;
transition: visibility .5s, opacity .5s;
}
nav .logo .sublogo {
letter-spacing: 3px;
}
.logo.active {
visibility: hidden;
opacity: 0;
transition: visibility .5s, opacity .5s;
}
.mobile.active {
display: flex;
visibility: visible;
background: rgba(255, 25, 55, 1);
transition: background 1s;
}
}
#media (max-width: 600px) {
nav .logo {
font-size: 1em;
letter-spacing: 3px;
}
.sublogo {
display: none;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
<link rel="stylesheet" href="stylesheet.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.hamburger').click(function(){
$('.hamburger').toggleClass('active');
$('.logo').toggleClass('active');
$('.mobile').toggleClass('active');
})
})
</script>
<meta charset="utf-8">
<title>CSS & HTML NAVIGATION</title>
</head>
<body>
<nav>
<div class="logo">
navigation.
<div class="sublogo">
this is my first example
</div>
</div>
<ul class="nav">
<li>html</li>
<li>css</li>
<li>javascript</li>
<li>python</li>
<li>c++</li>
<li>php</li>
</ul>
<div class="hamburger">
<div class="line">
</div>
</div>
<div class="mobile">
<ul>
<li>html</li>
<li>css</li>
<li>javascript</li>
<li>python</li>
<li>c++</li>
<li>php</li>
</ul>
</div>
</nav>
</body>
</html>
you made the width:100vw, you seem to left the height:500px;
Anyhow, check on the .mobile div that the position is fixed, but you did not specified any constraints like top:0; left:0; etc; this is why that div is too hight on the page.
The viewport is alright. :D Have a nice day!
I am trying to make the hamburger navigation elements to align themselves evenly on the whole 100vh area, I tried using space-between but it did not work. Is it because I used vh instead of px as my measure? Should I be using aling-content instead? How does flexbox' justify-content work?
* {
margin: 0;
padding: 0;
-webkit-tap-highlight-color: transparent;
}
.mobile {
position: fixed;
top: 0;
left: 0;
display: flex;
flex-direction: column;
align-items: center;
visibility: hidden;
background: rgba(255, 255, 255, 0);
width: 100vw;
height: 100vh;
z-index: 1;
transition: visibility 1s, background 1s;
transition-delay: .5s;
font-family: "Georgia";
}
.mobile a {
text-decoration: none;
color: black;
}
.mobilenav {
visibility: hidden;
list-style: none;
opacity: 0;
transition: visibility .5s, opacity .5s;
}
.mobilenav.active {
visibility: visible;
opacity: 1;
transition: visibility .5s, opacity .5s;
transition-delay: .5s;
}
.hamburger {
align-items: center;
display: flex;
width: 25px;
height: 15px;
margin-right: 50px;
cursor: pointer;
display: none;
z-index: 2;
}
.hamburger.active .line {
background: rgba(0, 0, 0, 0);
transition: .2s;
}
.hamburger.active .line::before {
transform: rotate(45deg);
top: 0;
transition: .5s;
}
.hamburger.active .line::after {
transform: rotate(135deg);
top: 0;
transition: .5s;
}
.line {
position: relative;
background-color: black;
width: 100%;
height: 1px;
transition: .5s;
}
.line::before,
.line::after {
position: absolute;
content: "";
height: 1px;
width: 100%;
background-color: black;
}
.line::after {
top: 6px;
transition: .5s;
}
.line::before {
top: -6px;
transition: .5s;
}
.nav {
justify-content: flex-end;
display: flex;
flex-wrap: wrap;
letter-spacing: 1px;
padding: 30px 0;
margin-right: 50px;
}
.nav li {
text-align: center;
font-family: "Georgia";
padding-left: 60px;
font-size: .8em;
font-weight: normal;
letter-spacing: 1px;
list-style: none;
}
.nav li a {
position: relative;
text-decoration: none;
color: inherit;
transition: color .5s;
}
.nav li a::before {
top: 2em;
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
left: 0;
background-color: black;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.nav li a:hover::before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.nav, nav {
align-items: center;
display: flex;
}
nav .logo {
margin-left: 50px;
display: flex;
justify-content: flex-start;
flex: 1;
font-family: Georgia, serif;
font-size: .8em;
padding: 30px 0;
font-weight: bold;
letter-spacing: 3px;
}
.sublogo {
font-weight: lighter;
margin-left: 10px;
}
.sublogo::before {
content: '|';
margin-right: 10px;
}
#media (max-width: 1120px) {
.nav {
display: none;
}
.hamburger {
display: flex;
-ms-transform: scale(1.2, 1.2);
-webkit-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
}
nav .logo {
font-size: 1em;
letter-spacing: 3px;
transition: visibility .5s, opacity .5s;
}
nav .logo .sublogo {
letter-spacing: 3px;
}
.logo.active {
visibility: hidden;
opacity: 0;
transition: visibility .5s, opacity .5s;
}
.mobile.active {
display: flex;
visibility: visible;
background: rgba(255, 255, 255, 1);
transition: background 1s;
}
}
#media (max-width: 600px) {
nav .logo {
font-size: 1em;
letter-spacing: 3px;
}
.sublogo {
display: none;
}
}
/*--END OF NAV--*/
.picture {
width: 100%;
height: 400px;
background-image: url(img/slider.jpg);
background-size: cover;
background-position: top;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="stylesheet.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.hamburger').click(function(){
$('.hamburger').toggleClass('active');
$('.logo').toggleClass('active');
$('.mobile').toggleClass('active');
$('.mobilenav').toggleClass('active');
})
})
</script>
<meta charset="utf-8">
<title>CSS & HTML NAVIGATION</title>
</head>
<body>
<nav>
<div class="logo">
navigation.
<div class="sublogo">
this is my first example
</div>
</div>
<ul class="nav">
<li>html</li>
<li>css</li>
<li>javascript</li>
<li>python</li>
<li>c++</li>
<li>php</li>
</ul>
<div class="hamburger">
<div class="line">
</div>
</div>
<div class="mobile">
<ul class="mobilenav">
<li>html</li>
<li>css</li>
<li>javascript</li>
<li>python</li>
<li>c++</li>
<li>php</li>
</ul>
</div>
</nav>
<div class="picture">
</div>
</body>
</html>
You have to set the height on the mobilenav class. Set the element to flex and their flex-direction: column and justify-content: space-evenly
The height of a block element defaults to the height of the block's content so, you have to specify a height in order for justify-content to work.
Hope this helps.
* {
margin: 0;
padding: 0;
-webkit-tap-highlight-color: transparent;
}
.mobile {
position: fixed;
top: 0;
left: 0;
display: flex;
flex-direction: column;
align-items: center;
visibility: hidden;
background: rgba(255, 255, 255, 0);
width: 100vw;
height: 100vh;
z-index: 1;
transition: visibility 1s, background 1s;
transition-delay: .5s;
font-family: "Georgia";
}
.mobile a {
text-decoration: none;
color: black;
}
.mobilenav {
visibility: hidden;
list-style: none;
opacity: 0;
transition: visibility .5s, opacity .5s;
height: 100vh;
justify-content: space-evenly;
display: flex;
flex-direction: column;
}
.mobilenav.active {
visibility: visible;
opacity: 1;
transition: visibility .5s, opacity .5s;
transition-delay: .5s;
}
.hamburger {
align-items: center;
display: flex;
width: 25px;
height: 15px;
margin-right: 50px;
cursor: pointer;
display: none;
z-index: 2;
}
.hamburger.active .line {
background: rgba(0, 0, 0, 0);
transition: .2s;
}
.hamburger.active .line::before {
transform: rotate(45deg);
top: 0;
transition: .5s;
}
.hamburger.active .line::after {
transform: rotate(135deg);
top: 0;
transition: .5s;
}
.line {
position: relative;
background-color: black;
width: 100%;
height: 1px;
transition: .5s;
}
.line::before,
.line::after {
position: absolute;
content: "";
height: 1px;
width: 100%;
background-color: black;
}
.line::after {
top: 6px;
transition: .5s;
}
.line::before {
top: -6px;
transition: .5s;
}
.nav {
justify-content: flex-end;
display: flex;
flex-wrap: wrap;
letter-spacing: 1px;
padding: 30px 0;
margin-right: 50px;
}
.nav li {
text-align: center;
font-family: "Georgia";
padding-left: 60px;
font-size: .8em;
font-weight: normal;
letter-spacing: 1px;
list-style: none;
}
.nav li a {
position: relative;
text-decoration: none;
color: inherit;
transition: color .5s;
}
.nav li a::before {
top: 2em;
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
left: 0;
background-color: black;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.nav li a:hover::before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.nav, nav {
align-items: center;
display: flex;
}
nav .logo {
margin-left: 50px;
display: flex;
justify-content: flex-start;
flex: 1;
font-family: Georgia, serif;
font-size: .8em;
padding: 30px 0;
font-weight: bold;
letter-spacing: 3px;
}
.sublogo {
font-weight: lighter;
margin-left: 10px;
}
.sublogo::before {
content: '|';
margin-right: 10px;
}
#media (max-width: 1120px) {
.nav {
display: none;
}
.hamburger {
display: flex;
-ms-transform: scale(1.2, 1.2);
-webkit-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
}
nav .logo {
font-size: 1em;
letter-spacing: 3px;
transition: visibility .5s, opacity .5s;
}
nav .logo .sublogo {
letter-spacing: 3px;
}
.logo.active {
visibility: hidden;
opacity: 0;
transition: visibility .5s, opacity .5s;
}
.mobile.active {
display: flex;
visibility: visible;
background: rgba(255, 255, 255, 1);
transition: background 1s;
}
}
#media (max-width: 600px) {
nav .logo {
font-size: 1em;
letter-spacing: 3px;
}
.sublogo {
display: none;
}
}
/*--END OF NAV--*/
.picture {
width: 100%;
height: 400px;
background-image: url(img/slider.jpg);
background-size: cover;
background-position: top;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="stylesheet.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.hamburger').click(function(){
$('.hamburger').toggleClass('active');
$('.logo').toggleClass('active');
$('.mobile').toggleClass('active');
$('.mobilenav').toggleClass('active');
})
})
</script>
<meta charset="utf-8">
<title>CSS & HTML NAVIGATION</title>
</head>
<body>
<nav>
<div class="logo">
navigation.
<div class="sublogo">
this is my first example
</div>
</div>
<ul class="nav">
<li>html</li>
<li>css</li>
<li>javascript</li>
<li>python</li>
<li>c++</li>
<li>php</li>
</ul>
<div class="hamburger">
<div class="line">
</div>
</div>
<div class="mobile">
<ul class="mobilenav">
<li>html</li>
<li>css</li>
<li>javascript</li>
<li>python</li>
<li>c++</li>
<li>php</li>
</ul>
</div>
</nav>
<div class="picture">
</div>
</body>
</html>
It is important that justify-content aligns the flex items in the flex-direction. so if your flex-direction is row(default), justify-content is in the row manner and if your flex-direction is column, justify-content is the vertical.
so you just need this sample:
.mobile {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}