I made a website, which is mobile responsive with a sticky header. But on Iphones the hamburger button is not in the right place, and also doesn't move with the sticky header perfectly. I don't know it is because of the Safari, however, I did not meet with this problem on other tools, only on iPhones. If I change the place of the Hamburger button in one place it won't look good on another phone.
I don't use Bootstrap.
My question is, how could I make my hamburger button to look good on every mobile?
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
}
header {
display: flex;
height: 20vh;
margin: auto;
align-items: center;
border-bottom: 1px solid var(--clr-accent);
}
.logo-container,
.nav-links {
display: flex;
}
.logo-container {
flex: 1;
position: relative;
left: 5%;
}
.logo {
font-weight: 400;
margin: 5px;
}
#myLogo{
max-width: 120px;
max-height: 120px;
}
.logo-container img{
max-width: 120px;
max-height: 120px;
}
/* Logo container JS*/
.logo-container { display: 'none' }
.logo-container.open { display: 'block' }
nav {
flex: 2;
display: flex; /* Make nav a flexbox container , also this makes a new problem*/
}
.nav-links {
margin-left:15%;
margin-right: 15%;
justify-content: center;
justify-content: space-between;
list-style: none;
flex: 1; /* Let it occupy rest of the container */
align-items: center; /* Align to the vertical center because logo is bigger. */
}
.nav-link {
color: var(--clr-dark);
font-size:20px;
text-decoration: none;
font-weight: 600;
}
.sticky {
position: fixed;
top: 10;
height: 20vh;
width:100%;
align-items: center;
background: rgba(255, 255, 255, 1);
}
#keyframes drop {
0% {
opacity: 0;
transform: translateY(-80px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
#media screen and (max-width: 767px){
/* Logo container JS*/
.logo-container { display: 'block' }
.line{
width: 30px;
height: 3px;
background: var(--clr-accent);
margin: 5px;
}
header{
background: white;
}
nav{
position: relative;
}
.hamburger{
position: fixed; /*this was absolute*/
cursor: pointer;
right: 5%;
top: 20%;
transform: translate(-5%, -280%); /*this was 200 with absolute*/
z-index: 2;
}
.nav-links
{ margin-left:0%;
margin-right: 0%;
justify-content: space-evenly;
background-color: var(--clr-light);
position: fixed;
height: 100vh;
width:100%;
flex-direction: column;
clip-path: circle(0px at 57% 10%);
-webkit-clip-path: circle(0px at 57% 10%);
transition: all 1s ease-out;
pointer-events: none;
text-align: center;
z-index: 1;
}
.nav-links.open{
clip-path: circle(1000px at 57% 10%);
-webkit-clip-path: circle(1000px at 57% 10%);
pointer-events:all;
}
.nav-links li{
opacity: 0;
}
.navlinks li a{
font-size: 25px;
}
.nav-links li:nth-child(1){
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(2){
transition: all 0.5s ease 0.4s;
}
.nav-links li:nth-child(3){
transition: all 0.5s ease 0.6s;
}
li.fade{
opacity: 1;
}
.nav-link {
color: var(--clr-dark);
font-size: 18px;
}
}
#media screen and (max-width: 1024px) {
.cta-select {
border: 2px solid #f48024;
background: transparent;
color: #f48024;
width: 100px;
height: 35px;
font-size: 12px;
}
.cta-add {
background: #f48024;
width: 100px;
height: 35px;
font-size: 12px;
margin: 30px 0px 0px 10px;
}
.cover img {
height: 65%;
padding: 15px; /*safari*/
}
.small-circle,
.medium-circle,
.big-circle {
opacity: 0.25;
}
.nav-link {
/* font-size:10px; */
text-decoration: none;
font-weight: 600;
}
.logo-container {
left: 2%;
}
.logo-container img{
max-width: 65px;
max-height: 65px;
}
.calendar {
right: 2%;
visibility: hidden;
}
.logo-click{
display: none;
visibility: hidden;
}
.header {
top: 10;
height: 20vh;
width:100%;
align-items: center;
}
.hamburger{
transform: translate(0%, -285%); /*this was 200 with absolute*/
z-index: 2;
}
}
#media screen and (max-width: 420px) {
.hamburger{
transform: translate(0%, -330%);
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 415px) {
.hamburger{
transform: translate(0%, -300%); /*this was 200 with absolute*/
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px; /*Safari*/
padding: 5px;
}
}
#media screen and (max-width: 376px) {
.hamburger{
transform: translate(0%, -320%); /*this was 200 with absolute*/
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 361px) {
.hamburger{
transform: translate(0%, -270%); /*this was 200 with absolute*/
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 321px) {
.hamburger{
transform: translate(0%, -245%); /*this was 200 with absolute*/
z-index: 2;
}
.cover img {
height: 56%;
border-radius: 50px;
margin: 5px;
padding: 5px;
}
}
<body>
<header class="header" id="myHeader">
<script src="https://www.google.com/recaptcha/api.js"></script>
<nav role="navigation">
<div class="logo-container" id="myLogo">
<img src="./img/logo.png" alt="logo"/>
</div>
<div class="hamburger" id="hamburgerID">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li><a class="nav-link" href="#details"> DETAILS</a></li>
<li><a class="nav-link" href="#description">DESCRIPTION</a></li>
<li><a class="nav-link" href="#aboutus">ABOUT US</a></li>
</ul>
</nav>
</header>
First Method
add align-items: center; to nav tag. that is
nav{align-items: center;}
Also remove top:20%; in hamburger class. That is
.hamburger{top:20%}
position:fixed element having atleast assign one of the top, left, bottom, right.
So, here right:5% is only enough.
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
--clr-accent:#111;
}
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
}
header {
display: flex;
height: 20vh;
margin: auto;
align-items: center;
border-bottom: 1px solid var(--clr-accent);
}
.logo-container,
.nav-links {
display: flex;
}
.logo-container {
flex: 1;
position: relative;
left: 5%;
}
.logo {
font-weight: 400;
margin: 5px;
}
#myLogo{
max-width: 120px;
max-height: 120px;
}
.logo-container img{
max-width: 120px;
max-height: 120px;
}
/* Logo container JS*/
.logo-container { display: 'none' }
.logo-container.open { display: 'block' }
nav {
flex: 2;
display: flex; /* Make nav a flexbox container , also this makes a new problem*/
align-items: center;
}
.nav-links {
margin-left:15%;
margin-right: 15%;
justify-content: center;
justify-content: space-between;
list-style: none;
flex: 1; /* Let it occupy rest of the container */
align-items: center; /* Align to the vertical center because logo is bigger. */
}
.nav-link {
color: var(--clr-dark);
font-size:20px;
text-decoration: none;
font-weight: 600;
}
.sticky {
position: fixed;
top: 10px;
height: 20vh;
width:100%;
align-items: center;
background: rgba(255, 255, 255, 1);
}
#keyframes drop {
0% {
opacity: 0;
transform: translateY(-80px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
#media screen and (max-width: 767px){
/* Logo container JS*/
.logo-container { display: 'block' }
.line{
width: 30px;
height: 3px;
background: var(--clr-accent);
margin: 5px;
}
header{
background: white;
}
nav{
position: relative;
}
.hamburger{
position: fixed; /*this was absolute*/
cursor: pointer;
right: 5%;
z-index: 2;
}
.nav-links
{
margin-left:0%;
margin-right: 0%;
justify-content: space-evenly;
background-color: var(--clr-light);
position: fixed;
height: 100vh;
width:100%;
flex-direction: column;
clip-path: circle(0px at 57% 10%);
-webkit-clip-path: circle(0px at 57% 10%);
transition: all 1s ease-out;
pointer-events: none;
text-align: center;
z-index: 1;
}
.nav-links.open{
clip-path: circle(1000px at 57% 10%);
-webkit-clip-path: circle(1000px at 57% 10%);
pointer-events:all;
}
.nav-links li{
opacity: 0;
}
.navlinks li a{
font-size: 25px;
}
.nav-links li:nth-child(1){
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(2){
transition: all 0.5s ease 0.4s;
}
.nav-links li:nth-child(3){
transition: all 0.5s ease 0.6s;
}
li.fade{
opacity: 1;
}
.nav-link {
color: var(--clr-dark);
font-size: 18px;
}
}
#media screen and (max-width: 1024px) {
.cta-select {
border: 2px solid #f48024;
background: transparent;
color: #f48024;
width: 100px;
height: 35px;
font-size: 12px;
}
.cta-add {
background: #f48024;
width: 100px;
height: 35px;
font-size: 12px;
margin: 30px 0px 0px 10px;
}
.cover img {
height: 65%;
padding: 15px; /*safari*/
}
.small-circle,
.medium-circle,
.big-circle {
opacity: 0.25;
}
.nav-link {
/* font-size:10px; */
text-decoration: none;
font-weight: 600;
}
.logo-container {
left: 2%;
}
.logo-container img{
max-width: 65px;
max-height: 65px;
}
.calendar {
right: 2%;
visibility: hidden;
}
.logo-click{
display: none;
visibility: hidden;
}
.header {
top: 10;
height: 20vh;
width:100%;
align-items: center;
}
.hamburger{
z-index: 2;
}
}
#media screen and (max-width: 420px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 415px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px; /*Safari*/
padding: 5px;
}
}
#media screen and (max-width: 376px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 361px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 321px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
border-radius: 50px;
margin: 5px;
padding: 5px;
}
}
.scrolling{color:#fff;background:orange;height:800px;padding:30px;}
<body>
<header class="header" id="myHeader">
<script src="https://www.google.com/recaptcha/api.js"></script>
<nav role="navigation">
<div class="logo-container" id="myLogo">
<img src="" alt="logo"/>
</div>
<div class="hamburger" id="hamburgerID">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li><a class="nav-link" href="#details"> DETAILS</a></li>
<li><a class="nav-link" href="#description">DESCRIPTION</a></li>
<li><a class="nav-link" href="#aboutus">ABOUT US</a></li>
</ul>
</nav>
</header>
<div class="scrolling">Content Here</div>
</body>
Second Method
We can align Hamburger icon to center by without translate
instead of adding
top:20%;
to calculated by
top: calc((20vh - 30px) / 2); // header height = 20vh and hamburger height = 30px makes half of both to align middle of header
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
--clr-accent:#111;
}
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
}
header {
display: flex;
height: 20vh;
margin: auto;
align-items: center;
border-bottom: 1px solid var(--clr-accent);
}
.logo-container,
.nav-links {
display: flex;
}
.logo-container {
flex: 1;
position: relative;
left: 5%;
}
.logo {
font-weight: 400;
margin: 5px;
}
#myLogo{
max-width: 120px;
max-height: 120px;
}
.logo-container img{
max-width: 120px;
max-height: 120px;
}
/* Logo container JS*/
.logo-container { display: 'none' }
.logo-container.open { display: 'block' }
nav {
flex: 2;
display: flex; /* Make nav a flexbox container , also this makes a new problem*/
}
.nav-links {
margin-left:15%;
margin-right: 15%;
justify-content: center;
justify-content: space-between;
list-style: none;
flex: 1; /* Let it occupy rest of the container */
align-items: center; /* Align to the vertical center because logo is bigger. */
}
.nav-link {
color: var(--clr-dark);
font-size:20px;
text-decoration: none;
font-weight: 600;
}
.sticky {
position: fixed;
top: 10px;
height: 20vh;
width:100%;
align-items: center;
background: rgba(255, 255, 255, 1);
}
#keyframes drop {
0% {
opacity: 0;
transform: translateY(-80px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
#media screen and (max-width: 767px){
/* Logo container JS*/
.logo-container { display: 'block' }
.line{
width: 30px;
height: 3px;
background: var(--clr-accent);
margin: 5px;
}
header{
background: white;
}
nav{
position: relative;
}
.hamburger{
position: fixed; /*this was absolute*/
cursor: pointer;
right: 5%;
top: calc((20vh - 30px) / 2); // header height = 20vh and hamburger height = 30px makes half of both to align middle of header
z-index: 2;
}
.nav-links
{
margin-left:0%;
margin-right: 0%;
justify-content: space-evenly;
background-color: var(--clr-light);
position: fixed;
height: 100vh;
width:100%;
flex-direction: column;
clip-path: circle(0px at 57% 10%);
-webkit-clip-path: circle(0px at 57% 10%);
transition: all 1s ease-out;
pointer-events: none;
text-align: center;
z-index: 1;
}
.nav-links.open{
clip-path: circle(1000px at 57% 10%);
-webkit-clip-path: circle(1000px at 57% 10%);
pointer-events:all;
}
.nav-links li{
opacity: 0;
}
.navlinks li a{
font-size: 25px;
}
.nav-links li:nth-child(1){
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(2){
transition: all 0.5s ease 0.4s;
}
.nav-links li:nth-child(3){
transition: all 0.5s ease 0.6s;
}
li.fade{
opacity: 1;
}
.nav-link {
color: var(--clr-dark);
font-size: 18px;
}
}
#media screen and (max-width: 1024px) {
.cta-select {
border: 2px solid #f48024;
background: transparent;
color: #f48024;
width: 100px;
height: 35px;
font-size: 12px;
}
.cta-add {
background: #f48024;
width: 100px;
height: 35px;
font-size: 12px;
margin: 30px 0px 0px 10px;
}
.cover img {
height: 65%;
padding: 15px; /*safari*/
}
.small-circle,
.medium-circle,
.big-circle {
opacity: 0.25;
}
.nav-link {
/* font-size:10px; */
text-decoration: none;
font-weight: 600;
}
.logo-container {
left: 2%;
}
.logo-container img{
max-width: 65px;
max-height: 65px;
}
.calendar {
right: 2%;
visibility: hidden;
}
.logo-click{
display: none;
visibility: hidden;
}
.header {
top: 10;
height: 20vh;
width:100%;
align-items: center;
}
.hamburger{
z-index: 2;
}
}
#media screen and (max-width: 420px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 415px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px; /*Safari*/
padding: 5px;
}
}
#media screen and (max-width: 376px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 361px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 321px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
border-radius: 50px;
margin: 5px;
padding: 5px;
}
}
.scrolling{color:#fff;background:orange;height:800px;padding:30px;}
<body>
<header class="header" id="myHeader">
<script src="https://www.google.com/recaptcha/api.js"></script>
<nav role="navigation">
<div class="logo-container" id="myLogo">
<img src="" alt="logo"/>
</div>
<div class="hamburger" id="hamburgerID">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li><a class="nav-link" href="#details"> DETAILS</a></li>
<li><a class="nav-link" href="#description">DESCRIPTION</a></li>
<li><a class="nav-link" href="#aboutus">ABOUT US</a></li>
</ul>
</nav>
</header>
<div class="scrolling">Content Here</div>
</body>
Related
I have been struggling with this all day so I guess I'll ask the community. I am trying to get my social links / icons to fit side-by-side on one line, rather than taking up 5 lines.
It seems that whatever rules I have set for the other list items (which is actually a separate ul) are also being applied to these social links.
Thanks a ton if you can help!
I'll take notes. lol
Updated Website
What I am trying to do.
What I am currently dealing with.
const hamburger = document.querySelector('.hamburger');
const mobile_menu = document.querySelector('.mobile-nav');
hamburger.addEventListener('click', function () {
hamburger.classList.toggle('is-active');
mobile_menu.classList.toggle('is-active');
})
:root {
--light: #FFF;
--dark: #111;
}
#font-face {
font-family: roboto-light;
src: url(fonts/Roboto-Light.ttf);
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: roboto-light;
}
.container {
max-width: 1120px;
margin: 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 10px 12px 20px;
}
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
background-color: var(--dark);
}
#header-logo {
width: 42px;
transition: 0.3s;
}
#header-logo:hover {
opacity: 50%;
cursor: pointer;
}
#header-logo:active {
opacity: 100%;
cursor: pointer;
}
.hamburger {
display: block;
position: relative;
z-index: 1;
user-select: none;
appearance: none;
border: none;
outline: none;
background: none;
cursor: pointer;
}
.hamburger span {
display: block;
width: 30px;
height: 2px;
margin-bottom: 7px;
position: relative;
background-color: var(--light);
z-index: 1;
transform-origin: 0 0;
transition: 0.4s;
}
.hamburger span:nth-child(1) {
margin-top: 6px;
}
.hamburger.is-active span:nth-child(1) {
transform: translate(0px, -2px) rotate(45deg);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(2) {
opacity: 0;
transform: translateX(30px);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(3) {
transform: translate(-3px, 3px) rotate(-45deg);
margin-bottom: 6px;
background-color: #757575;
}
.mobile-nav {
position: fixed;
left: 100%;
min-height: fit-content;
z-index: 98;
background-color: #222222;
padding-top: 66px;
transition: 0.4s;
}
.mobile-nav.is-active {
left: 0;
}
.mobile-nav a {
font-size: 24px;
text-align: center;
display: block;
padding: 19px 0px 19px;
width: 100vw;
border-bottom: solid 1px #363636;
background-color: var(--primary);
color: var(--light);
text-decoration: none;
}
.mobile-social-links img {
width: 28px;
}
.mobile-social-links li {
list-style: none;
width: 28px;
display: inline;
}
.menu {
display: none;
flex: 1px 1px 0%;
justify-content: flex-end;
margin: 0px -16px;
}
.menu a {
color: var(--light);
font-size: 16px;
margin: 0px 16px;
text-decoration: none;
transition: 0.4s;
padding: 0px 0px;
}
.menu a.is-active, .menu a:hover {
color: #757575;
}
.menu a:active{
color: var(--light);
}
#media (min-width: 780px) {
.hamburger {
display: none;
}
.menu {
display: flex;
}
.mobile-nav {
display: none;
}
#header-logo {
width: 80px;
padding-left: 22px;
}
.container {
padding: 16px 50px 16px 30px;
margin: 0px auto;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Zachery Vaughn</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<div class="container">
<img src="images/logos/Logo-White-500.png" id="header-logo">
<div class="menu">
about
services
portfolio
blog
contact
</div>
<button class="hamburger">
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
<nav class="mobile-nav">
about
services
portfolio
blog
contact
<div>
<ul class="mobile-social-links">
<li><img src="images/social-icons/twitter-icon.png"></li>
<li><img src="images/social-icons/linkedin-icon.png"></li>
<li><img src="images/social-icons/youtube-icon.png"></li>
<li><img src="images/social-icons/facebook-icon.png"></li>
<li><img src="images/social-icons/instagram-icon.png"></li>
</ul>
</div>
</nav>
</header>
<main>
</main>
<footer>
</footer>
<script src="main.js"></script>
</body>
</html>
Make the element with class .mobile-social-links to display: flex;. There's also a bit of work to do to position them centrally as you're doing some odd stuff with the anchor links but see below. All changes are annotated. There's a bit of animation to do but I'll leave you to sort that out.
Just as an aside you're making life difficult for yourself having two menus, one for desktop and one for mobile. If you can, have one menu but style it for both.
const hamburger = document.querySelector('.hamburger');
const mobile_menu = document.querySelector('.mobile-nav');
hamburger.addEventListener('click', function() {
hamburger.classList.toggle('is-active');
mobile_menu.classList.toggle('is-active');
})
:root {
--light: #FFF;
--dark: #111;
}
#font-face {
font-family: roboto-light;
src: url(fonts/Roboto-Light.ttf);
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: roboto-light;
}
.container {
max-width: 1120px;
margin: 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 10px 12px 20px;
}
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
background-color: var(--dark);
}
#header-logo {
width: 42px;
transition: 0.3s;
}
#header-logo:hover {
opacity: 50%;
cursor: pointer;
}
#header-logo:active {
opacity: 100%;
cursor: pointer;
}
.hamburger {
display: block;
position: relative;
z-index: 1;
user-select: none;
appearance: none;
border: none;
outline: none;
background: none;
cursor: pointer;
}
.hamburger span {
display: block;
width: 30px;
height: 2px;
margin-bottom: 7px;
position: relative;
background-color: var(--light);
z-index: 1;
transform-origin: 0 0;
transition: 0.4s;
}
.hamburger span:nth-child(1) {
margin-top: 6px;
}
.hamburger.is-active span:nth-child(1) {
transform: translate(0px, -2px) rotate(45deg);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(2) {
opacity: 0;
transform: translateX(30px);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(3) {
transform: translate(-3px, 3px) rotate(-45deg);
margin-bottom: 6px;
background-color: #757575;
}
.mobile-nav {
position: fixed;
left: 100%;
min-height: fit-content;
z-index: 98;
background-color: #222222;
padding-top: 66px;
transition: 0.4s;
}
.mobile-nav.is-active {
left: 0;
}
.mobile-nav a {
font-size: 24px;
text-align: center;
display: block;
padding: 19px 0px 19px;
width: 100vw;
border-bottom: solid 1px #363636;
background-color: var(--primary);
color: var(--light);
text-decoration: none;
}
.mobile-social-links {
/* added this */
display: none;
padding-block: 19px;
justify-content: center;
gap: 0.5rem;
}
.mobile-nav.is-active .mobile-social-links {
/*added this */
display: flex;
}
.mobile-social-links a {
/* added this */
display: inline;
padding: 0;
}
.mobile-social-links img {
width: 28px;
}
.mobile-social-links li {
list-style: none;
width: 28px;
}
.menu {
display: none;
flex: 1px 1px 0%;
justify-content: flex-end;
margin: 0px -16px;
}
.menu a {
color: var(--light);
font-size: 16px;
margin: 0px 16px;
text-decoration: none;
transition: 0.4s;
padding: 0px 0px;
}
.menu a.is-active,
.menu a:hover {
color: #757575;
}
.menu a:active {
color: var(--light);
}
#media (min-width: 780px) {
.hamburger {
display: none;
}
.menu {
display: flex;
}
.mobile-nav {
display: none;
}
#header-logo {
width: 80px;
padding-left: 22px;
}
.container {
padding: 16px 50px 16px 30px;
margin: 0px auto;
}
}
<header>
<nav>
<div class="container">
<img src="images/logos/Logo-White-500.png" id="header-logo">
<div class="menu">
about
services
portfolio
blog
contact
</div>
<button class="hamburger">
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
<nav class="mobile-nav">
about
services
portfolio
blog
contact
<div>
<ul class="mobile-social-links">
<li>
<img src="images/social-icons/twitter-icon.png">
</li>
<li>
<img src="images/social-icons/linkedin-icon.png">
</li>
<li>
<img src="images/social-icons/youtube-icon.png">
</li>
<li>
<img src="images/social-icons/facebook-icon.png">
</li>
<li>
<img src="images/social-icons/instagram-icon.png">
</li>
</ul>
</div>
</nav>
I've also done a version with grid but it means only one menu is needed. See below:
const hamburger = document.querySelector('.hamburger');
const menu = document.querySelector('.menu');
hamburger.addEventListener('click', function() {
hamburger.classList.toggle('is-active');
menu.classList.toggle('is-active');
})
:root {
--light: #FFF;
--dark: #111;
}
#font-face {
font-family: roboto-light;
src: url(fonts/Roboto-Light.ttf);
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: roboto-light;
}
.container {
max-width: 1120px;
margin: 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 10px 12px 20px;
}
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
background-color: var(--dark);
}
#header-logo {
width: 42px;
transition: opacity 0.3s;
cursor: pointer;
}
#header-logo:hover {
opacity: 50%;
}
.hamburger {
grid-area: hamburger;
justify-self: end;
position: relative;
cursor: pointer;
}
.hamburger span {
display: block;
width: 30px;
height: 2px;
margin-bottom: 7px;
background-color: var(--light);
transform-origin: 0 0;
transition: transform 0.4s;
}
.hamburger.is-active span {
margin-bottom: 6px;
background-color: #757575;
}
.hamburger span:nth-child(1) {
margin-top: 6px;
}
.hamburger.is-active span:nth-child(1) {
transform: translate(0px, -2px) rotate(45deg);
}
.hamburger.is-active span:nth-child(2) {
opacity: 0;
transform: translateX(30px);
}
.hamburger.is-active span:nth-child(3) {
transform: translate(-3px, 3px) rotate(-45deg);
}
.container {
display: grid;
grid-template-columns: fit-content(0) 1fr;
grid-template-areas: "icon hamburger" "menu menu";
}
.image-container {
grid-area: icon;
}
.menu {
grid-area: menu;
max-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
background-color: #222222;
transition: max-height 1s, margin-top 1s;
}
.menu a {
text-align: center;
color: var(--light);
font-size: 1.5rem;
margin: 0 1rem;
text-decoration: none;
transition: color 0.4s;
padding: 19px 0;
border-bottom: solid 1px #363636;
}
.menu.is-active {
max-height: 100vh;
margin-top: 1rem;
}
.menu a:hover {
color: #757575;
}
.menu a:active {
color: var(--light);
}
.mobile-social-links {
padding: 19px;
}
.mobile-social-links>ul {
display: flex;
justify-content: center;
width: 100%;
}
.mobile-social-links a {
padding: 0;
}
#media only screen and (min-width: 780px) {
.hamburger {
display: none;
}
.menu {
justify-content: flex-end;
flex-direction: row;
background: none;
display: flex;
max-height: initial;
margin-top: 0;
}
.menu a {
text-align: left;
font-size: 1rem;
border-bottom: none;
}
.mobile-social-links {
display: none;
}
#header-logo {
width: 80px;
padding-left: 22px;
}
.container {
grid-template-areas: "icon menu";
padding: 16px 50px 16px 30px;
margin: 0px auto;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<nav>
<div class="container">
<div class="image-container">
<img src="https://www.fillmurray.com/500/500" id="header-logo">
</div>
<div class="menu">
about
services
portfolio
blog
contact
<div class="mobile-social-links">
<ul>
<li><i class="fa-brands fa-twitter"></i></li>
<li><i class="fa-brands fa-linkedin"></i></li>
<li><i class="fa-brands fa-youtube"></i></li>
<li><i class="fa-brands fa-facebook"></i></li>
<li><i class="fa-brands fa-instagram"></i></li>
</ul>
</div>
</div>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</nav>
Try adding display: flex to the ul with the .mobile-social-links class.
const hamburger = document.querySelector('.hamburger');
const mobile_menu = document.querySelector('.mobile-nav');
hamburger.addEventListener('click', function () {
hamburger.classList.toggle('is-active');
mobile_menu.classList.toggle('is-active');
})
:root {
--light: #FFF;
--dark: #111;
}
#font-face {
font-family: roboto-light;
src: url(fonts/Roboto-Light.ttf);
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: roboto-light;
}
.container {
max-width: 1120px;
margin: 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 10px 12px 20px;
}
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
background-color: var(--dark);
}
#header-logo {
width: 42px;
transition: 0.3s;
}
#header-logo:hover {
opacity: 50%;
cursor: pointer;
}
#header-logo:active {
opacity: 100%;
cursor: pointer;
}
.hamburger {
display: block;
position: relative;
z-index: 1;
user-select: none;
appearance: none;
border: none;
outline: none;
background: none;
cursor: pointer;
}
.hamburger span {
display: block;
width: 30px;
height: 2px;
margin-bottom: 7px;
position: relative;
background-color: var(--light);
z-index: 1;
transform-origin: 0 0;
transition: 0.4s;
}
.hamburger span:nth-child(1) {
margin-top: 6px;
}
.hamburger.is-active span:nth-child(1) {
transform: translate(0px, -2px) rotate(45deg);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(2) {
opacity: 0;
transform: translateX(30px);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(3) {
transform: translate(-3px, 3px) rotate(-45deg);
margin-bottom: 6px;
background-color: #757575;
}
.mobile-nav {
position: fixed;
left: 100%;
min-height: fit-content;
z-index: 98;
background-color: #222222;
padding-top: 66px;
transition: 0.4s;
}
.mobile-nav.is-active {
left: 0;
}
.mobile-nav a {
font-size: 24px;
text-align: center;
display: block;
padding: 19px 0px 19px;
width: 100vw;
border-bottom: solid 1px #363636;
background-color: var(--primary);
color: var(--light);
text-decoration: none;
}
.mobile-social-links img {
width: 28px;
}
.mobile-social-links li {
list-style: none;
width: 28px;
display: inline;
}
.menu {
display: none;
flex: 1px 1px 0%;
justify-content: flex-end;
margin: 0px -16px;
}
.menu a {
color: var(--light);
font-size: 16px;
margin: 0px 16px;
text-decoration: none;
transition: 0.4s;
padding: 0px 0px;
}
.menu a.is-active, .menu a:hover {
color: #757575;
}
.menu a:active{
color: var(--light);
}
ul.mobile-social-links{
display: flex;
}
#media (min-width: 780px) {
.hamburger {
display: none;
}
.menu {
display: flex;
}
.mobile-nav {
display: none;
}
#header-logo {
width: 80px;
padding-left: 22px;
}
.container {
padding: 16px 50px 16px 30px;
margin: 0px auto;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Zachery Vaughn</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<div class="container">
<img src="images/logos/Logo-White-500.png" id="header-logo">
<div class="menu">
about
services
portfolio
blog
contact
</div>
<button class="hamburger">
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
<nav class="mobile-nav">
about
services
portfolio
blog
contact
<div>
<ul class="mobile-social-links">
<li><img src="images/social-icons/twitter-icon.png"></li>
<li><img src="images/social-icons/linkedin-icon.png"></li>
<li><img src="images/social-icons/youtube-icon.png"></li>
<li><img src="images/social-icons/facebook-icon.png"></li>
<li><img src="images/social-icons/instagram-icon.png"></li>
</ul>
</div>
</nav>
</header>
<main>
</main>
<footer>
</footer>
<script src="main.js"></script>
</body>
</html>
The rules are still being applied to your links in the other ul as they still match.
I.e. Your mobile social links are still being given the width of 100vw because they are still elements within the 'mobile-nav' element. You'd need the rules below to take higher precedence, So where you've applied 'width: 28px;' to the '.mobile-social-links li' you'd want to apply it to the '.mobile-social-links li a' so it can overwrite the initial css
So, I have a navbar with a (burger icon animation on mobile view) and when I click a link I want the navbar to close & the burger icon cross animation to reverse to normal.
NOTE: This already worked on my previous builds. But since this is a one pager and the link goes out to a section of my page it does not automaticly refresh the page. (Like in my previous projects). I want to do it in vanilla js (so no JQuery).
NOTE2 : This will mainly be a JS problem, but I added the css of the nav just in case.
Thanks in advance
My html code :
<nav id="navbar" class="c-nav">
<div class="logo">
<a href="index.html">
<img class="logo_size" src="./images/Dumotech1.png" alt="Logo van Minter">
</a>
</div>
<ul class="nav-links">
<li><a class="c-underline" href="#about">Over ons</a></li>
<li><a class="c-underline" href="#services">Diensten</a></li>
<li><a class="c-underline" href="#projects">Projecten</a></li>
<li><a class="c-underline" href="#contact">Contact</a></li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
Css :
.c-nav {
/* overflow-x: hidden; */
text-transform: uppercase;
position: fixed;
z-index: 4;
top: 0;
width: 100%;
height: 5rem;
display: flex;
justify-content: space-around;
align-items: center;
vertical-align: middle;
min-height: 8vh;
background-color: rgb(0, 0, 0);
font-family: 'Raleway', sans-serif;
}
#navbar {
background-color:rgb(0, 0, 0);
position: fixed;
top: 0;
width: 100%;
transition: top 0.5s ease;
}
.logo_size {
max-width: 16rem;
max-height: auto;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 20%;
}
.nav-links li {
list-style: none;
}
.nav-links a {
position: relative;
top: 0.5rem;
color: rgb(255, 255, 255);
font-family: 'Raleway', sans-serif;
text-decoration: none;
letter-spacing: 3px;
font-weight: regular;
font-size: 14px;
padding: 0 1px;
display: inline-block;
}
.c-underline::after {
background: none repeat scroll 0 0 transparent;
bottom: -3px;
content: "";
display: inline-block;
height: 2px;
left: 50%;
position: absolute;
background: rgb(194, 12, 12);
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0;
}
.c-underline:hover::after {
display: inline-block;
width: 100%;
left: 0;
}
.nav-links a:hover {
color: rgb(194, 12, 12);
text-decoration: none;
}
.burger {
display: none;
}
.burger div {
width: 35px;
height: 4px;
background-color: rgb(255, 255, 255);
margin: 8px;
transition: all 0.3s ease;
}
#media screen and (max-width: 1024px) {
.nav-links a {
position: relative;
top: 0;
}
}
#media screen and (max-width: 780px) {
.nav-links {
width: 60%;
}
}
#media screen and (max-width: 1024px) {
.nav-links {
width: 60%;
}
}
#media screen and (max-width: 1920px) {
.nav-links {
width: 40%;
}
}
#media screen and (max-width: 768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: fixed;
right: 0px;
height: 92vh;
top: 8vh;
background-color: rgb(0, 0, 0);
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
cursor: pointer;
}
}
.nav-active {
transform: translateX(0%);
}
#keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
JS :
function navSlide() {
const burger = document.querySelector(".burger");
const nav = document.querySelector(".nav-links");
const navLinks = document.querySelectorAll(".nav-links li");
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.5s ease forwards ${index / 7 + 0.3}s`;
}
});
//Burger Animation
burger.classList.toggle("toggle");
});
}
I'm still new to css and tried to make a sticky navbar with background of white color and black font. I'm struggling to find the solution and can't figure out what's wrong.
Here's my what my initial navbar looks like
initial navbar
And here's scrolled navbar
Scrolled Navbar
The picture isn't clear but the font is still white with a little black outline even though i changed the font color to black
Here's my HTML code:
<header id='navbar'>
LOGO
<div class="menu">
<div class="btn">
<i class="fas fa-times close-btn"></i>
</div>
Jadi Partner
Lapangan Favorit
Pesanan Saya
<div class="dropdown">
<button class="dropbtn">
<i class="fas fa-bars" id="menu-dropdown"></i><i class="fas fa-user-circle"></i>
</button>
<div class="dropdown-content">
Log In
Sign Up
</div>
</div>
</div>
<div class="btn">
<i class="fas fa-bars menu-btn"></i>
</div>
</header>
<script type="text/javascript">
window.addEventListener('scroll', function () {
// var header = document.querySelector('header');
var header = document.querySelector('header');
header.classList.toggle('sticky', window.scrollY > 0);
})
</script>
<script type="text/javascript">
//Javacript of responsive navigation menu
const menuBtn = document.querySelector(".menu-btn");
const navigation = document.querySelector(".navigation");
menuBtn.addEventListener("click", () => {
menuBtn.classList.toggle("active");
navigation.classList.toggle("active");
});
</script>
and this is the CSS part:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
header{
z-index: 999;
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 100px;
transition: 0.6s;
}
header.sticky {
background: #ffffff;
padding: 20px 100px;
}
header .brand{
color: #fff;
font-size: 30px;
font-weight: 700;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 2px;
}
header .menu{
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
header .menu a{
color: rgb(255, 255, 255);
font-size: 16px;
font-weight: 500;
text-decoration: none;
margin: 0 30px;
padding: 0 10px;
border-radius: 20px;
transition: 0.3s;
transition-property: color, background;
}
header.sticky .menu a{
color: black !important;
z-index: 9999999;
}
header .menu a:hover{
color: #000;
background: #fff;
}
header .btn{
color: #fff;
font-size: 25px;
cursor: pointer;
display: none;
}
.dropdown {
float: right;
position: relative;
/* overflow: hidden; */
margin-left: 10px;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
font-family: inherit;
margin-left: 20px;
color: black;
background-color: #fff;
border-radius: 30px;
padding: 0 3px;
}
.dropdown-content {
display: none;
position: absolute;
top: calc(100%);
right: 0;
background-color: #ffffff;
max-width: 160px;
/* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
z-index: 9999;
border-radius: 10px;
}
.dropdown-content a {
/* float: none; */
color: black !important;
margin: 5px 0 !important;
padding: 6px 10px;
min-width: 120px;
text-decoration: none;
display: inline-block;
font-size: .8em !important;
/* text-align: left; */
/* overflow: hidden; */
}
.dropdown-content a:hover {
background-color: rgb(212, 212, 212);
}
.dropdown:hover .dropdown-content {
display: block;
}
.navigation-items {
display: flex;
justify-content: center;
align-items: center;
}
header .navigation .navigation-items #profile-dropdown {
color: black;
background-color: #fff;
border-radius: 30px;
padding: 0 3px;
}
.dropbtn i {
margin: 0 3px;
}
#menu-dropdown {
font-size: .7em;
}
header ul li a:before {
content: '';
position: absolute;
background: rgb(255, 255, 255);
border-color: #000000;
width: 0;
height: 3px;
bottom: 0;
left: 0;
transition: 0.3s ease;
}
header ul li a:hover:before {
width: 100%;
}
This part is edited
I found out that with only navbar it works perfectly fine, but the problem occure when i add background image below navbar. Here's my background code below navbar:
<section class="home">
<div class="images-home">
<img src="{% static 'main/images/basketball.jfif' %}" alt="" class="image-slide">
<img src="{% static 'main/images/prapoth-panchuea-OMWubltUEfE-unsplash.jpg' %}" alt="" class="image-slide">
<img src="{% static 'main/images/muktasim-azlan-rjWfNR_AC5g-unsplash.jpg' %}" alt="" class="image-slide">
</div>
<div class="content">
<h1>Train. Grow. Repeat.<br></h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maiores magnam quia vitae, animi unde consequuntur
nihil doloribus quidem culpa, voluptatem, harum consequatur laboriosam delectus officia!</p>
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span> Booking sekarang</a>
</div>
<div class="slider-navigation">
<div onclick="slider_nav(1)" class="nav-btn" id="radio1"></div>
<div onclick="slider_nav(2)" class="nav-btn" id="radio2"></div>
<div onclick="slider_nav(3)" class="nav-btn" id="radio3"></div>
</div>
</section>
and here's CSS for background:
section {
padding: 100px 200px;
}
.home {
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
flex-direction: column;
/* background: #267be9; */
background: #ED1E1E;
}
.home:before {
z-index: 777;
content: '';
position: absolute;
/* background: rgba(62, 129, 245, 0.3); */
background: rgba(212, 11, 11, 0.3);
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.home .content {
z-index: 888;
/* color: #fff; */
color: #fff;
width: 60%;
margin: 50px 70px;
position: absolute;
left: 0%;
}
.home .content h1 {
font-size: 3.5em;
font-weight: 700;
/* text-transform: uppercase; */
letter-spacing: 5px;
line-height: 75px;
margin-bottom: 40px;
}
.home .content p {
margin-bottom: 65px;
max-width: 50%;
/* font-size: 1.2vw; */
}
.home .content a {
/* background: #fff; */
width: 30%;
background: #ED1E1E;
padding: 15px 35px;
/* color: #1680AC; */
/* color: #ED1E1E; */
color: #ffffff;
/* font-size: 1.1em; */
font-size: 1.4vw;
font-weight: 500;
text-decoration: none;
text-transform: uppercase;
position: relative;
/* display: flex; */
}
.home .content a:hover {
color: var(--main-color);
background-color: #fff;
}
.home .content a span {
display: block;
position: absolute;
background: var(--main-color);
}
.home .content a span:nth-child(1) {
left: 0;
bottom: 0;
width: 2px;
height: 100%;
transform: scaleY(0);
transform-origin: top;
transition: transform 0.5s;
}
.home .content a:hover span:nth-child(1) {
transform: scaleY(1);
transform-origin: bottom;
transition: transform 0.5s;
}
.home .content a span:nth-child(2) {
left: 0;
bottom: 0;
width: 100%;
height: 2px;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.5s;
}
.home .content a:hover span:nth-child(2) {
transform: scaleX(1);
transform-origin: left;
transition: transform 0.5s;
}
.home .content a span:nth-child(3) {
right: 0;
bottom: 0;
width: 2px;
height: 100%;
transform: scaleY(0);
transform-origin: top;
transition: transform 0.5s;
transition-delay: 0.5s;
}
.home .content a:hover span:nth-child(3) {
transform: scaleY(1);
transform-origin: bottom;
transition: transform 0.5s;
transition-delay: 0.5s;
}
.home .content a span:nth-child(4) {
left: 0;
top: 0;
width: 100%;
height: 2px;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.5s;
transition-delay: 0.5s;
}
.home .content a:hover span:nth-child(4) {
transform: scaleX(1);
transform-origin: left;
transition: transform 0.5s;
transition-delay: 0.5s;
}
.home img {
z-index: 000;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.home .media-icons {
z-index: 888;
position: absolute;
right: 30px;
display: flex;
flex-direction: column;
transition: 0.5s ease;
}
.home .media-icons a {
color: #fff;
font-size: 1.6em;
transition: 0.3s ease;
}
.home .media-icons a:not(:last-child) {
margin-bottom: 20px;
}
.home .media-icons a:hover {
transform: scale(1.3);
}
.slider-navigation {
z-index: 888;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
/* transform: translateY(80px); */
/* margin-bottom: 12px; */
bottom: 5%;
left: 50%;
transform: translateX(-50%);
}
.slider-navigation .nav-btn {
width: 12px;
height: 12px;
background: #fff;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
transition: 0.3s ease;
}
.slider-navigation .nav-btn:not(:last-child) {
margin-right: 20px;
}
.slider-navigation .nav-btn:hover {
transform: scale(1.2);
}
.slider-navigation .nav-btn.active {
background: var(--main-color);
}
#media (max-width: 1040px) {
section {
padding: 100px 20px;
}
.home .content {
margin: 0 20px;
}
.home .media-icons {
right: 15px;
}
.home .content h1 {
font-size: 4vw;
line-height: 60px;
}
.home .content p {
margin-bottom: 65px;
max-width: 40%;
font-size: 13px;
}
}
#media (max-width: 560px) {
.home .content {
margin: 0 20px;
}
.home .content h1 {
/* font-size: 2em; */
line-height: 60px;
}
.home .content p {
margin-bottom: 65px;
max-width: 40%;
font-size: 10px;
}
.home .content a {
max-width: 10px;
padding: 10px 25px;
}
}
I read something about !important, but it dind't help. Thank you for anyone who are willing to help an amateur like me :)
You need to add background-color and color property to the header selector not header .sticky.
As you're dynamically adding the sticky class, so at first render the colors are not actually visible.
UPDATE
Checked your codepen and you're missing the property when .sticky class is applied via JS
header.sticky .dropdown .dropbtn {
background-color: #000;
}
header.sticky .brand{
color: #000;
}
I have trouble with my header, when I open this website in a mobile, and click in the burger button the nav menu can't be responsive at all.
The menu is in "position: fixed", and depending on the diferents mobiles I need to change the "top: n%", so I don't know how this can be responsive.
picture of the problem https://i.gyazo.com/7ca78e79ced8784c8e72ebc7090920d3.png
picture image of the problem https://i.gyazo.com/4cda3f4bc256719a4d565e74d131e7a0.png
Link of the website http://maderines.000webhostapp.com/
const ipad = window.matchMedia('screen and (max-width: 658px)');
const menu = document.querySelector('.menu');
const burgerButton = document.querySelector('#burger-menu');
ipad.addListener(validation)
function validation(event) {
if (event.matches) {
burgerButton.addEventListener('click', hideShow);
} else {
burgerButton.removeEventListener('click', hideShow);
}
}
validation(ipad);
function hideShow() {
if (menu.classList.contains('is-active')) {
menu.classList.remove('is-active');
} else {
menu.classList.add('is-active');
}
}
/* start HEADER */
.header {
background-color: rgba(0, 0, 0, 0.692);
color: white;
display: flex;
height: 80px;
width: 100%;
justify-content: space-around;
flex-wrap: wrap;
position: fixed;
z-index: 2;
}
.header figure {
justify-self: center;
padding-top: 5px;
}
.menu {
height: inherit;
}
.header ol {
font-family: inherit;
display: flex;
height: inherit;
font-size: 17px;
}
.header ol li {
height: inherit;
}
.header a {
color: white;
text-decoration: none;
display: flex;
align-items: center;
height: inherit;
padding: 0 10px;
transition: transform 0.3s ease 0s, opacity 0.3s ease 0s;
}
.header ol a:hover {
transform: scale(1.2);
opacity: 1;
}
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
}
figure {
margin: 0;
}
.burger-button {
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
display: none;
position: fixed;
left: 10px;
top: 20px;
color: white;
font-size: 28px;
}
/* end HEADER */
/* start Responsive */
#media screen and (max-width:781px) {
.header {
display: flex;
flex-wrap: wrap;
flex-direction: column;
height: auto;
align-items: center;
}
}
#media screen and (max-width:658px) {
.burger-button {
display: block;
position: fixed;
z-index: 3;
justify-content: center;
align-self: center;
top: 15px;
}
.header ol {
display: block;
font-size: 20px;
}
.header ol li {
height: 40px;
}
.menu {
position: fixed;
background-color: rgba(0, 0, 0, 0.692);
top: 12%;
left: -300px;
height: auto;
transition: .3s;
}
.menu.is-active {
left: 0;
}
}
#media screen and (max-width:480px) {
.burger-button {
top: 10px;
}
.menu {
top: 12%;
}
}
#media screen and (max-width:425px) {
.menu {
top: 14%;
}
}
#media screen and (max-width:320px) {
.menu {
top: 14vh;
}
.burger-button {
line-height: 40px;
width: 40px;
height: 40px;
left: 10px;
top: 15px;
font-size: 20px;
}
}
<i class="icon-menu burger-button" id="burger-menu"></i>
<div class="fondo">
<header class="header">
<figure class="logo ">
<img src="images/log3o.png" alt="Logo Carpinteria Mader Ranch">
</figure>
<nav class="menu">
<ol>
<li>Inicio</li>
<li>Nuestros trabajos</li>
<li>Contacto</li>
</ul>
</nav>
</header>
If I understood what you try to do, you can just change the menu class from position: fixed; to position: absolute; and set top: 97% to all media sizes, so you should have:
const ipad = window.matchMedia('screen and (max-width: 658px)');
const menu = document.querySelector('.menu');
const burgerButton = document.querySelector('#burger-menu');
ipad.addListener(validation)
function validation(event) {
if (event.matches) {
burgerButton.addEventListener('click', hideShow);
} else {
burgerButton.removeEventListener('click', hideShow);
}
}
validation(ipad);
function hideShow() {
if (menu.classList.contains('is-active')) {
menu.classList.remove('is-active');
} else {
menu.classList.add('is-active');
}
}
/* start HEADER */
.header {
background-color: rgba(0, 0, 0, 0.692);
color: white;
display: flex;
height: 80px;
width: 100%;
justify-content: space-around;
flex-wrap: wrap;
position: fixed;
z-index: 2;
}
.header figure {
justify-self: center;
padding-top: 5px;
}
.menu {
height: inherit;
}
.header ol {
font-family: inherit;
display: flex;
height: inherit;
font-size: 17px;
}
.header ol li {
height: inherit;
}
.header a {
color: white;
text-decoration: none;
display: flex;
align-items: center;
height: inherit;
padding: 0 10px;
transition: transform 0.3s ease 0s, opacity 0.3s ease 0s;
}
.header ol a:hover {
transform: scale(1.2);
opacity: 1;
}
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
}
figure {
margin: 0;
}
.burger-button {
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
display: none;
position: fixed;
left: 10px;
top: 20px;
color: white;
font-size: 28px;
}
/* end HEADER */
/* start Responsive */
#media screen and (max-width:781px) {
.header {
display: flex;
flex-wrap: wrap;
flex-direction: column;
height: auto;
align-items: center;
}
}
#media screen and (max-width:658px) {
.burger-button {
display: block;
position: fixed;
z-index: 3;
justify-content: center;
align-self: center;
top: 15px;
}
.header ol {
display: block;
font-size: 20px;
}
.header ol li {
height: 40px;
}
.menu {
position: absolute;
background-color: rgba(0, 0, 0, 0.692);
top: 97%;
left: -300px;
height: auto;
transition: .3s;
}
.menu.is-active {
left: 0;
}
}
#media screen and (max-width:480px) {
.burger-button {
top: 10px;
}
.menu {
top: 97%;
}
}
#media screen and (max-width:425px) {
.menu {
top: 97%;
}
}
#media screen and (max-width:320px) {
.menu {
top: 97%;
}
.burger-button {
line-height: 40px;
width: 40px;
height: 40px;
left: 10px;
top: 15px;
font-size: 20px;
}
}
<i class="icon-menu burger-button" id="burger-menu"></i>
<div class="fondo">
<header class="header">
<figure class="logo ">
<img src="http://maderines.000webhostapp.com/images/log3o.png" alt="Logo Carpinteria Mader Ranch">
</figure>
<nav class="menu">
<ol>
<li>Inicio</li>
<li>Nuestros trabajos</li>
<li>Contacto</li>
</ul>
</nav>
</header>
</div>
I made a navigation bar with CSS animation and javascript. But I could not make it responsive. I want the navigation bar animation to be none when the window is resized less than 700px and the animation should appear if it is greater than 700px.That means the transform property of three-d-box :hover on css paart must be hidden when window is resized to 700px.The navigation bar code is below;
$('.block-menu').find('a').each(function(){
var el = $(this),
elText = el.text();
el.addClass("three-d");
el.append('<span aria-hidden="true" class="three-d-box"><span class="front">'+elText+'</span><span class="back">'+elText+'</span></span>');
});
.container {
width: match-parent;
padding: 12px ;
display: flex;
align-items: center;
justify-content: center;
}
a {
color: #fc0;
text-decoration:none;
}
.block-menu {
width:fit-content;
height:fit-content;
}
.block-menu li {
display: inline-block;
}
.block-menu li a {
color: #fff;
display: block;
text-decoration: none;
font-family: 'Passion One', Arial, sans-serif;
font-smoothing: antialiased;
text-transform: uppercase;
font-family: 'Righteous', cursive;
overflow: visible;
width:fit-content;
height: fit-content;
font-size: 1.6vw;
padding: 15px 10px;
margin-left:auto;
margin-right:auto;
margin-top:1px;
margin-bottom:1px;
}
.three-d {
perspective: 200px;
transition: all .07s linear;
position: relative;
cursor: pointer;
}
.three-d:hover .three-d-box,
.three-d:focus .three-d-box {
transform: translateZ(-25px) rotateX(90deg);
}
.three-d-box {
transition: all 0.3s ease-out;
transform: translatez(-25px);
transform-style: preserve-3d;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
}
.front {
transform: rotatex(0deg) translatez(25px);
}
.back {
transform: rotatex(-90deg) translatez(25px);
color: #ffe7c4;
}
.front, .back {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border-radius:15%;
background: black;
padding: 15px 10px;
color: white;
pointer-events: none;
box-sizing: border-box;
}
.back {
background: #d05ce8;
}
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<div id="navbox">
<div class="container" id="navbar">
<ul class="block-menu"><b>
<li >Gifts Corner</li>
<li >Our activities</li>
<li >Inspiration</li>
<li >Education</li>
<li >About us</li>
</ul></b>
</div>