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;
}
Related
I have two photos on a page that I've set so that they're lined up against one another. In order to make this web page easier to navigate through on a smartphone, I'd like to have the two photos line up one on top of another when the screen size shrinks.
If anyone knows how to make photos responsive so that they're lined up one on top of another and easier to view on small-screen devices, as well as to help space the images, I'd appreciate your advice.
![How I'd like my page to look on smaller devices][1]
My (revised) code is as follows:
<!DOCTYPE html>
<html lang="en; jp;">
<body style="background-color: white;">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="page-wrap">
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox"/>
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden;">
<li style="border-bottom: .05px solid lightgray;">ホーム</li>
<li style="border-bottom: .05px solid lightgray;">ブログ</li>
<li style="border-bottom: .05px solid lightgray;">小泉ついて</li>
<li style="border-bottom: .05px solid lightgray;">参考文献</li>
<div class="searchbar">
<form id="frmSearch" class="search2" method="get" action="default.html" style=" padding-right: 20px; padding-top: 20px; text-align: right; position: inline;"/>
<input class="search2" id="txtSearch" type="text" name="serach_bar" size="31" maxlength="255" value="" style="center: 396px; top: 185px; width: 180px; height: 26px;"/>
<input class="search1" type="submit" name="submition" value="検索" style=" padding-
bottom:20px; left: 0px; top: 153px; height: 25px; width: 32px;"/>
<input class="search2" type="hidden" name="sitesearch" value="default.html"/>
<script type="text/javascript">
document.getElementById('frmSearch').onsubmit = function() {
window.location = 'http://www.google.com/search?q=site:yoursitename.com ' + document.getElementById('txtSearch').value;
return false;
}
document.getElementById('cp_toggle03').onchange = function() {
if (document.getElementById('cp_toggle03').checked) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "";
}
}
</script>
</div>
</ul>
</nav>
</header>
<div class="setsumei">
</div>
<br><div class="image" style="margin: 10px; text-align: center;">
<div class="responsive-image-container">
<img src="photos/Home_Page/fuji.JPG" alt="Fuji" width="40%"> <img src="photos/Home_Page/Kongoji_homepage.jpg" alt="Kongoji" width="40%">
</div>
<br><br><footer class="site-footer" style="font-size: 12px;">小泉© 2020年 | English</footer>
</div>
<style>
.searchbar{float: right;}
#media only screen and (max-width: 1050px){
.responsive-image-container{
display: flex;
flex-direction: column;
}
}
.setsumei{margin-left: 20px;
margin-right: 20px;}
.footer{width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: absolute;
bottom: 0;
padding: 10px;}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -40px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 40px;
}
.site-footer {
text-align: center;
border-top: 1px solid black;
padding: 10px;
}
*, *:before, *:after {
padding-left: 0;
margin: 0;
box-sizing: border-box;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.cp_cont {
height: auto;
}
/* menu */
.cp_offcm03 {
position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {
height: 100%;
}
.cp_offcm03 li {
display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {
display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {
background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {
display: none;
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {
display: none;
}
/* content */
.cp_container {
position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {
margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
#media (max-width: 1050px) and (min-width: 480px) {
/* menu */
.cp_offcm03 {
position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {
background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {
display: block;
margin-right: 0;}
.cp_offcm03 a {
padding: 20px;
}
/* menu toggle */
.cp_mobilebar {
display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {
display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span {
display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon > span:before,
.cp_menuicon > span:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon > span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked + .cp_mobilebar .cp_menuicon {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked + .cp_mobilebar span:before,
#cp_toggle03:checked + .cp_mobilebar span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked ~ #h-menu_black {
display: block;/*カバーを表示*/
opacity: .6;
}
#h-menu_black {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {
top: 60px;
height: 92vh;
text-align: center;
}
.noscroll{
overflow: hidden;
position: fixed;
}
</style>
</body>
</html>
[1]: https://i.stack.imgur.com/HkD6k.jpg
Images are an inline elements. It depends on how you want your layout to work, but you may not need to do anything, it may be as simple as using the proper image size and setting a max-size.
A very simple implementation of what you need:
.responsive-image-container {
text-align: center;
}
.responsive-image-container>img {
max-width: 100%;
margin: 8px;
}
<div class="responsive-image-container">
<img src="https://placeimg.com/300/200/any" alt="some image" />
<img src="https://placeimg.com/300/200/any" alt="some image" />
</div>
A simple way to have more control, for example to have the images fill the containing parent, can be achieved using flex.
.responsive-image-container {
display: flex;
flex-direction: column;
align-items: stretch;
}
#media only screen and (min-width: 960px) {
.responsive-image-container {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
}
<div class="responsive-image-container">
<img src="https://placeimg.com/300/200/any" alt="some image" />
<img src="https://placeimg.com/300/200/any" alt="some image" />
</div>
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>
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 figure out a way to make the black blob go back smoothly as you're dragging the cursor off it. Better yet I was wondering if its possible to make the blob disappear from left to right using css. Also, do you have an idea on how to make the text turn white as the blob goes over them? Thank you so much for help!
* {
margin: 0;
padding: 0;
}
ul {
display: flex;
justify-content: flex-end;
letter-spacing: 1px;
align-items: center;
padding: 30px 0;
/*background-color: red;*/
}
li {
text-align: center;
font-family: "Trebuchet MS", Helvetica, sans-serif;
list-style: none;
padding: 0 30px;
text-transform: uppercase;
font-size: .71em;
}
ul li i {
margin-left: 7px;
}
li a {
position: relative;
text-decoration: none;
color: inherit;
}
li a::before {
content: "";
position: absolute;
width: 0%;
height: 1.3em;
background-color: black;
visibility: hidden;
transition: width .2s;
}
li a:hover::before {
width: 100%;
visibility: visible;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="stylesheet.css">
<meta charset="utf-8">
<title>CSS & HTML NAVIGATION</title>
</head>
<body>
<nav>
<ul>
<li>home</li>
<li>text</li>
<li>image</li>
<li>slider<i class="fa fa-angle-down" title="slider"></i></li>
<li>html<i class="fa fa-angle-down"></i></li>
<li>css</li>
</ul>
</nav>
</body>
</html>
No need to use visibility since you already set 0% to width. You can also adjust the position to have a left to right transtion. For the color, simply add another hover declarion on the a:
ul {
display: flex;
justify-content: flex-end;
letter-spacing: 1px;
align-items: center;
padding: 30px 0;
/*background-color: red;*/
}
li {
text-align: center;
font-family: "Trebuchet MS", Helvetica, sans-serif;
list-style: none;
padding: 0 30px;
text-transform: uppercase;
font-size: .71em;
}
ul li i {
margin-left: 7px;
}
li a {
position: relative;
text-decoration: none;
color: inherit;
}
li a::before {
content: "";
position: absolute;
z-index: -1;
width: 0%;
left: auto;
right: 0;
height: 1.3em;
background-color: black;
transition: width .2s, left .2s .2s, right .2s .2s;
}
li a:hover::before {
width: 100%;
left: 0;
right: auto;
}
li a:hover {
color: #fff;
}
<ul>
<li>home</li>
<li>text</li>
<li>image</li>
<li>slider<i class="fa fa-angle-down" title="slider"></i></li>
<li>html<i class="fa fa-angle-down"></i></li>
<li>css</li>
</ul>
You can also simplify your code using gradient:
ul {
display: flex;
justify-content: flex-end;
letter-spacing: 1px;
align-items: center;
padding: 30px 0;
/*background-color: red;*/
}
li {
text-align: center;
font-family: "Trebuchet MS", Helvetica, sans-serif;
list-style: none;
padding: 0 30px;
text-transform: uppercase;
font-size: .71em;
}
ul li i {
margin-left: 7px;
}
li a {
position: relative;
text-decoration: none;
color: inherit;
background: linear-gradient(#000, #000) left/0% 100% no-repeat;
transition:
color 0.2s,
background-size 0.2s,
background-position 0.2s 0.2s;
}
li a:hover {
color: #fff;
background-size: 100% 100%;
background-position: right;
}
<ul>
<li>home</li>
<li>text</li>
<li>image</li>
<li>slider<i class="fa fa-angle-down" title="slider"></i></li>
<li>html<i class="fa fa-angle-down"></i></li>
<li>css</li>
</ul>
i have updated your css code. hope this helps you:
* {
margin: 0;
padding: 0;
}
ul {
display: flex;
justify-content: flex-end;
letter-spacing: 1px;
align-items: center;
padding: 30px 0;
/*background-color: red;*/
}
li {
text-align: center;
font-family: "Trebuchet MS", Helvetica, sans-serif;
list-style: none;
padding: 0 30px;
text-transform: uppercase;
font-size: .71em;
}
ul li i {
margin-left: 7px;
}
li a {
position: relative;
text-decoration: none;
color: inherit;
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
li a::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #000;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
li a:hover:before,
li a:focus:before,
li a:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
li a:hover::before {
width: 100%;
visibility: visible;
}
li a:hover {
color: #fff;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="stylesheet.css">
<meta charset="utf-8">
<title>CSS & HTML NAVIGATION</title>
</head>
<body>
<nav>
<ul>
<li>home</li>
<li>text</li>
<li>image</li>
<li>slider<i class="fa fa-angle-down" title="slider"></i></li>
<li>html<i class="fa fa-angle-down"></i></li>
<li>css</li>
</ul>
</nav>
</body>
</html>