Ok so I'm attempting a mobile resizable window. When I tried running it, it doesn't work and I don't know why. Here is my html code:
const menu = document.querySelector('#mobile-menu');
const menuLinks = document.querySelector('.navbar__menu');
menu.addEventListener('click', function() {
menu.classList.toggle('is-active');
menuLinks.classList.toggle('active');
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Kumbh Sans', sans-serif;
}
.navbar {
background: #131313;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
position: sticky;
top: 0;
z-index: 999;
}
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
margin-right: auto;
margin-left: auto;
padding-right: 50px;
padding-left: 50px;
}
#navbar__logo {
background-color: #ff8177;
background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.fa-gem {
margin-right: 0.5rem;
}
.navbar__menu {
display: flex;
align-items: center;
list-style: none;
text-align: center;
}
.navbar__item {
height: 80px;
}
.navbar__links {
color: #fff;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
padding: 0 1rem;
height: 100%;
}
.navbar__btn {
display: flex;
justify-content: center;
align-items: center;
padding: 0 1rem;
width: 100%;
}
.button {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
padding: 10px 20px;
height: 100%;
width: 100%;
border: none;
outline: none;
border-radius: 4px;
background: #f77062;
color: #fff;
}
.button:hover {
background: #4837ff;
transition: all 0.3s ease;
}
.navbar__links:hover {
color: #f77062;
transition: all 0.3s ease;
}
#media screen and (max-width: 960px) {
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
padding: 0;
}
.navbar__menu {
display: grid;
grid-template-columns: auto;
margin: 0;
width: 100%;
position: absolute;
top: -1000px;
opacity: 0;
transition: all 0.5s ease;
height: 50vh;
z-index: -1;
background: #131313;
}
.navbar__menu.active {
background: #131313;
top: 100%;
opacity: 1;
transition: all 0.5s ease;
z-index: 99;
height: 50vh;
font-size: 1.6rem;
}
#navbar__logo {
padding-left: 25px;
}
.navbar__toggle .bar {
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
background: #fff;
}
.navbar__item {
width: 100%;
}
.navbar__links {
text-align: center;
padding: 2rem;
width: 100%;
display: table;
}
.navbar__btn {
padding-bottom: 2rem;
}
.button {
display: flex;
justify-content: center;
align-items: center;
width: 80%;
height: 80px;
margin: 0;
}
#mobile-menu {
position: absolute;
top: 20%;
right: 5%;
transform: translate(5%, 20%);
}
.navbar__toggle .bar {
display: block;
cursor: pointer;
}
#mobile-menu.is-active .bar:nth-child(2) {
opacity: 0;
}
#mobile-menu.is-active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
#mobile-menu.is-active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML CSS Website</title>
<link rel="stylesheet" href="styles.css" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.14.0/css/all.css"
integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc"
crossorigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght#400;700&display=swap"
rel="stylesheet"
/>
</head>
<body>
<nav class="navbar">
<div class="navbar__container">
<i class="fas fa-gem"></i> AigoLearningJuniorTeam
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span> <span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="navbar__menu">
<li class="navbar__item">
Our Team
</li>
<li class="navbar__item">
Weekly Challenges
</li>
<li class="navbar__item">
Monthly Challenges
</li>
<li class="navbar__btn"> Get Started </li>
</ul>
</div>
</nav>
<script>src="app.js"</script>
</body>
Everything works perfectly fine until I resize my window into a mobile version, the drop menu icon shows, but when I press on it, nothing happens.
Related
Hello i dont understand why there is a white space within the container on the rights side, that apeears above like 750 witdh ive been fighting with it for a couple of hours . i am kinda new too..... thanks in advance.
ive tryied playing with flex etc... grow shrink and more flex options i am sure i a missing something.
const hemburger = document.querySelector(`#hemburger`);
const linksContainer = document.querySelector(`.nav__links__container`);
const mainContent = document.querySelector(`.main__content`);
const divHandller = () => {
document.querySelector(`.after__content`).classList.toggle(`display`);
};
const hamburgerHandler = () => {
linksContainer.classList.toggle(`nav__display__icons`);
};
function displayWindowSize() {
// Get width and height of the window excluding scrollbars
var w = document.documentElement.clientWidth;
var h = document.documentElement.clientHeight;
if (w >= 600) {
linksContainer.classList.remove(`nav__display__icons`);
}
}
window.addEventListener("resize", displayWindowSize);
hemburger.addEventListener(`click`, hamburgerHandler);
mainContent.addEventListener(`click`, divHandller);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body {
background-color: black;
color: white;
width: 100%;
height: 100%;
}
html {
font-size: 62.5%;
}
a {
text-decoration: none;
color: white;
}
.container {
display: flex;
justify-content: space-around;
margin-top: 1rem;
align-items: baseline;
}
.nav__logo__container {
flex: 2;
margin-left: 1rem;
position: relative;
}
.nav__links__container {
flex: 0.5 1 auto;
transition: 1s all;
}
#nav__links {
margin: 1rem;
}
#nav__logo {
font-size: 1.5rem;
}
#hemburger {
margin-right: 2rem;
font-size: 1.5rem;
display: none;
color: white;
}
#media (max-width: 600px) {
.nav__links__container {
position: absolute;
flex-direction: column;
display: flex;
left: -100%;
z-index: 2;
}
#hemburger {
display: block;
}
.main__content {
flex-direction: column;
justify-content: center;
}
.btn__container {
align-self: center !important;
}
.main__content {
height: 30vh;
}
}
.nav__display__icons {
position: absolute;
flex-direction: column;
display: flex;
left: 0;
margin-top: 3rem;
}
/* NAV STYLING END */
.main__content {
width: 80%;
height: 80vh;
background-color: black;
margin: 0 auto;
border: rgba(255, 255, 255, 0.491) 1.5px solid;
margin-top: 1.5rem;
display: flex;
align-items: center;
border-radius: 10px;
position: relative;
}
#main__content__text {
}
.after__content {
position: absolute;
width: 100%;
height: 100%;
background-color: rgb(130, 127, 127);
top: -150%;
transition: all 2s;
border-radius: 10px;
}
.display {
top: 0%;
}
#main__content__text {
text-align: center;
height: 20rem;
width: 20rem;
font-size: 2rem;
line-height: 4rem;
}
.main__content__img__container {
font-size: 1.5rem;
}
.btn__container {
align-self: flex-end;
margin-bottom: 2rem;
}
#btn {
padding: 1rem 2rem;
border-radius: 25px;
animation-name: btnAnimation;
animation-duration: 1.5s;
animation-timing-function: ease-in-out;
position: relative;
}
#btn:hover {
}
#keyframes btnAnimation {
0% {
transform: translateX(-50px);
opacity: 0;
}
100% {
transform: translateX(0px);
opacity: 0.9;
}
}
#keyframes btnAfterAnimation {
0% {
opacity: 0.5;
width: 4rem;
color: black;
}
100% {
opacity: 0;
width: 100%;
color: black;
}
}
#btn::after {
content: "";
position: absolute;
width: 100%;
top: 0;
left: 0;
height: 100%;
background-color: rgb(118, 116, 116);
border-radius: 25px;
opacity: 0;
z-index: 1;
transition: all 1s;
}
#btn:hover::after {
animation-name: btnAfterAnimation;
animation-duration: 2s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nav</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<div class="container">
<div class="nav__logo__container">
Logo
</div>
<div class="nav__links__container">
Home
About
My project
Terms
</div>
<div> <i id="hemburger" class="fa-solid fa-bars"></i>
</div>
</div>
</nav>
<section class="main__content">
<div class="main__content__text__container">
<h3 id="main__content__text">strategic design for brands and small business and for you</h3>
</div>
<div class="btn__container">
<button id="btn">Click here for more info</button>
</div>
<div class="main__content__img__container">
<h4>Test test test</h4>
</div>
<div class="after__content"></div>
</section>
<script src="https://kit.fontawesome.com/618bf7505f.js" crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
</html>
please try to add justify-content: space-around; to .main__content
I am not sure how to look for this information online, so I want to ask here.
I want to have the nav bar display fully on full-screen media query but in a hamburger when phone width.
Any direction would be appreciated.
Heres one example https://codepen.io/alvarotrigo/pen/MWEJEWG
<meta name="viewport" content="width=device-width, initial-scale=1">
<section class="top-nav">
<div>
Logo Here
</div>
<input id="menu-toggle" type="checkbox" />
<label class='menu-button-container' for="menu-toggle">
<div class='menu-button'></div>
</label>
<ul class="menu">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
</section>
<h2>Resize window to collapse menu</h2>
#import url(https://fonts.googleapis.com/css?family=Raleway);
h2 {
vertical-align: center;
text-align: center;
}
html, body {
margin: 0;
height: 100%;
}
* {
font-family: "Raleway";
box-sizing: border-box;
}
.top-nav {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
background-color: #00BAF0;
background: linear-gradient(to left, #f46b45, #eea849);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
color: #FFF;
height: 50px;
padding: 1em;
}
.menu {
display: flex;
flex-direction: row;
list-style-type: none;
margin: 0;
padding: 0;
}
.menu > li {
margin: 0 1rem;
overflow: hidden;
}
.menu-button-container {
display: none;
height: 100%;
width: 30px;
cursor: pointer;
flex-direction: column;
justify-content: center;
align-items: center;
}
#menu-toggle {
display: none;
}
.menu-button,
.menu-button::before,
.menu-button::after {
display: block;
background-color: #fff;
position: absolute;
height: 4px;
width: 30px;
transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
border-radius: 2px;
}
.menu-button::before {
content: '';
margin-top: -8px;
}
.menu-button::after {
content: '';
margin-top: 8px;
}
#menu-toggle:checked + .menu-button-container .menu-button::before {
margin-top: 0px;
transform: rotate(405deg);
}
#menu-toggle:checked + .menu-button-container .menu-button {
background: rgba(255, 255, 255, 0);
}
#menu-toggle:checked + .menu-button-container .menu-button::after {
margin-top: 0px;
transform: rotate(-405deg);
}
#media (max-width: 700px) {
.menu-button-container {
display: flex;
}
.menu {
position: absolute;
top: 0;
margin-top: 50px;
left: 0;
flex-direction: column;
width: 100%;
justify-content: center;
align-items: center;
}
#menu-toggle ~ .menu li {
height: 0;
margin: 0;
padding: 0;
border: 0;
transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
}
#menu-toggle:checked ~ .menu li {
border: 1px solid #333;
height: 2.5em;
padding: 0.5em;
transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
}
.menu > li {
display: flex;
justify-content: center;
margin: 0;
padding: 0.5em 0;
width: 100%;
color: white;
background-color: #222;
}
.menu > li:not(:last-child) {
border-bottom: 1px solid #444;
}
}
I have this code.
When inspecting from the browser ,it seems when i click on hamburger-menu active class doesn't work.
I expect when I press the hamburger menu the container class to become the container.active class
Also,I set cursor: pointer for hamburger-menu and for link a(read-more) and it doesn't work.
Any help?
const hamburger_menu = document.querySelector(".hamburger-menu");
const container = document.querySelector(".container");
hamburger_menu.addEventListener("click", () => {
container.classList.toggle("active");
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
min-height: 100vh;
background-image: linear-gradient(135deg, #485461 0%, #28313b 74%);
width: 100%;
}
.navbar {
position: fixed;
width: 100%;
height: 3rem;
top: 0;
left: 0;
z-index: 1;
}
.menu {
max-width: 60rem;
margin: 0 auto;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.hamburger-menu {
cursor: pointer;
width: 4em;
height: 3rem;
display: flex;
justify-content: center;
align-items: center;
background: black;
}
.menu-bar {
width: 50%;
height: 1.5px;
background: white;
position: relative;
transition: 0.5s;
right: 0;
}
.menu-bar:before {
position: absolute;
content: "";
width: 100%;
height: 1.5px;
background: white;
transform: translateY(-7px);
}
.menu-bar:after {
position: absolute;
content: "";
width: 100%;
height: 1.5px;
background: white;
transform: translateY(7px);
}
.main {
position: absolute;
width: 100%;
height: 100vh;
top: 0;
left: 0;
}
.background {
position: absolute;
width: 100%;
height: 100vh;
background: url("time.jpg") no-repeat top center / cover;
z-index: -1;
}
.background-blur {
position: absolute;
width: 100%;
height: 100vh;
background-color: rgba(43, 51, 59, 0.8);
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.future {
font-size: 3rem;
font-weight: bolder;
color: white;
}
.time {
font-size: 1.5rem;
font-weight: bold;
color: white;
}
.middle a {
position: relative;
top: 2rem;
text-decoration: none;
font-size: 1.5rem;
font-weight: bold;
color: white;
border-radius: 25px;
background: blue;
padding: 0.6rem;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Time</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="navbar">
<div class="menu">
<div class="hamburger-menu">
<div class="menu-bar"></div>
</div>
</div>
<div class="main">
<div class="background">
<div class="background-blur">
<div class="middle">
<h2 class="future">"Future is here"</h2>
<h2 class="time">"Time isn't the main thing.It's the only thing."</h2>
<a href="#">Read more </a2>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
It is because your .hamburger_menu classes z-index was under the main element and its dimensions was covering your other elements. I have commented where I increased the z index so you can decide how to handle it. But this way of layering your elements is bad when scaling your project. The read more button is not navigating because u haven't set a href path. Set it to a link or an address and click on the button to navigate. The below code shows that as well.
const hamburger_menu = document.querySelector(".hamburger-menu");
const container = document.querySelector(".container");
hamburger_menu.addEventListener("click", () => {
container.classList.toggle("active");
alert("clicked")
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
min-height: 100vh;
background-image: linear-gradient(135deg, #485461 0%, #28313b 74%);
width: 100%;
}
.navbar {
position: fixed;
width: 100%;
height: 3rem;
top: 0;
left: 0;
z-index: 1;
}
.menu {
max-width: 60rem;
margin: 0 auto;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.hamburger-menu {
cursor: pointer;
width: 10%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: black;
z-index: 4; //changed z index to a higher number
}
.menu-bar {
width: 50%;
height: 1.5px;
background: white;
position: relative;
transition: 0.5s;
right: 0;
}
.menu-bar:before {
position: absolute;
content: "";
width: 100%;
height: 1.5px;
background: white;
transform: translateY(-7px);
}
.menu-bar:after {
position: absolute;
content: "";
width: 100%;
height: 1.5px;
background: white;
transform: translateY(7px);
}
.main {
position: absolute;
width: 100%;
height: 100vh;
top: 0;
left: 0;
z-index: 3;
}
.background {
position: absolute;
width: 100%;
height: 100vh;
background: url("time.jpg") no-repeat top center / cover;
z-index: -1;
}
.background-blur {
position: absolute;
width: 100%;
height: 100vh;
background-color: rgba(43, 51, 59, 0.8);
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.future {
font-size: 3rem;
font-weight: bolder;
color: white;
}
.time {
font-size: 1.5rem;
font-weight: bold;
color: white;
}
.middle a {
position: relative;
top: 2rem;
text-decoration: none;
font-size: 1.5rem;
font-weight: bold;
color: white;
border-radius: 25px;
background: blue;
padding: 0.6rem;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Time</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="navbar">
<div class="menu">
<div class="hamburger-menu">
<div class="menu-bar"></div>
</div>
</div>
<div class="main">
<div class="background">
<div class="background-blur">
<div class="middle">
<h2 class="future">"Future is here"</h2>
<h2 class="time">"Time isn't the main thing.It's the only thing."</h2>
Read more
</div>
</div>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
the problem is your "main" dom element which positioned absolute, so this is overlapping menu element.
So add position relative to menu in css and assign z-index to 1.
.menu {
max-width: 60rem;
margin: 0 auto;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1;
position: relative;
}
window.onload = function() {
const hamburger_menu = document.querySelector(".hamburger-menu");
const container = document.querySelector(".container");
hamburger_menu.addEventListener("click", () => {
container.classList.toggle("active");
});
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
min-height: 100vh;
background-image: linear-gradient(135deg, #485461 0%, #28313b 74%);
width: 100%;
}
.navbar {
position: fixed;
width: 100%;
height: 3rem;
top: 0;
left: 0;
z-index: 1;
}
.menu {
max-width: 60rem;
margin: 0 auto;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
z-index: 1;
}
.hamburger-menu {
cursor: pointer;
width: 4em;
height: 3rem;
display: flex;
justify-content: center;
align-items: center;
background: black;
}
.menu-bar {
width: 50%;
height: 1.5px;
background: white;
position: relative;
transition: 0.5s;
right: 0;
}
.menu-bar:before {
position: absolute;
content: "";
width: 100%;
height: 1.5px;
background: white;
transform: translateY(-7px);
}
.menu-bar:after {
position: absolute;
content: "";
width: 100%;
height: 1.5px;
background: white;
transform: translateY(7px);
}
.main {
position: absolute;
width: 100%;
height: 100vh;
top: 0;
left: 0;
}
.background {
position: absolute;
width: 100%;
height: 100vh;
background: url("time.jpg") no-repeat top center / cover;
z-index: -1;
}
.background-blur {
position: absolute;
width: 100%;
height: 100vh;
background-color: rgba(43, 51, 59, 0.8);
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.future {
font-size: 3rem;
font-weight: bolder;
color: white;
}
.time {
font-size: 1.5rem;
font-weight: bold;
color: white;
}
.middle a {
position: relative;
top: 2rem;
text-decoration: none;
font-size: 1.5rem;
font-weight: bold;
color: white;
border-radius: 25px;
background: blue;
padding: 0.6rem;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Time</title>
</head>
<body>
<div class="container">
<div class="navbar">
<div class="menu">
<div class="hamburger-menu">
<div class="menu-bar"></div>
</div>
</div>
<div class="main">
<div class="background">
<div class="background-blur">
<div class="middle">
<h2 class="future">"Future is here"</h2>
<h2 class="time">"Time isn't the main thing.It's the only thing."</h2>
<a href="#">Read more </a2>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
const menu = document.querySelector('#mobile-menu');
const menulinks = document.querySelector('.navbar__menu');
// Display Mobile Menu
const mobilemenu = () => {
menu.classList.toggle('is-active');
menulinks.classlist.toggle('active');
};
menu.addEventListener('click', mobileMenu ) ;
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Kumbh sans', sans-serif;
scroll-behavior: smooth;
}
.navbar {
background: #131313;
height: 80px;
display:flex;
justify-content:center ;
align-items: center;
font-size: 1.2rem;
position: sticky;
top: 0;
z-index: 1000;
}
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
margin: 0 auto;
padding: 11px 50px;
}
#navbar__logo {
background-color: #ff8177;
background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%)
background-size 100%;
-webkit-background-clip: text;
background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
display: table;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 3rem;
}
.navbar__menu {
display: flex;
align-items: center;
list-style: none;
padding: 10px -100px;
}
.navbar__item {
height: 80px;
}
.navbar__links {
color: #fff;
display: flex;
align-items: center;
justify-content: center;
width: 125px;
text-decoration: none;
height: 100%;
font-size: 1.5rem;
transition: all 0.3s ease;
}
.navbar__btn {
display: flex;
justify-content: center;
align-items: center;
padding: 4 5rem;
width: 100%
}
.Button {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
font-size: 1.5rem;
padding: 10px 20px;
height: 100%;
width: 100%;
border:none;
outline: none;
border-radius: 4px;
background: #833ab4;
background: -webkit-linear-gradient(to right, #fcb045, #fd1d1d, #833ab4);
background: linear-gradient(to right, #fcb045, #fd1d1d, #833ab4);
color: #fff;
transition: all 0.3s ease;
}
.navbar__links:hover {
color: #0d628a;
transition: all 0.3s ease;
}
.Button:hover {
color: #000000;
transition: all 0.3s ease;
}
#media screen and (max-width: 960px) {
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
padding: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll Website</title>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<!-- Navbar Section -->
<nav class="navbar">
<div class="navbar__container">
Lolipop
tion
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="navbar__menu">
<li class="navbar__item">
Home
</li>
<li class="navbar__item">
About
</li>
<li class="navbar__item">
Services
</li>
<li class="navbar__Btn">
Sign Up
</li>
</ul>
</div>
<scripts src="Modify.js"></scripts>
</nav>
</body>
</html>
I just cant know what is it that i did wrong... which is why i came here as a last resort help me pls.
AS you can already see..... i have done everything correct.... but i don't know if this this text editor bug(i'm using vs code) or its just me... help me solve these
and pls forgive me if i'm writing the wrong thing lol
well i just need the answer to this stuff pls..... THank you guys
The tag to link a script is <script> not <scripts>
Please use script instead of scripts.it won't work and I suggest you to use sublime text 3 or Notepad ++ with vs code like me. It can save you from many headaches. :)
There are a few syntax errors with code.
HTML
<scripts src=""></scripts> is not valid HTML. You must <script src=""></script>
Relocate script to bottom of HTML just before the closing <\body>. Remove from just before closing </nav>
Javascript
To create a function you can:
Expression: const mobileMenu = function() { // code goes here }
Declaration: function mobileMenu() { // code goes here }
Arrow: const mobileMenu = () => { // code goes here }. While this is valid code you can not use it as a callback within the event listener as is. Running this function as is will attempt to look for classList on the window object which doesn't exist. You would need instead use const mobileMenu = (e) => { e.currentTarget.classList.toggle('active') }
The event listener is attached to the wrong element. Listen for click event on .navbar__item not .navbar__menu. You will also need to use querySelectorAll('.navbar__item') instead of querySelector('.navbar__item') in order to select all elements.
Lastly, you'll need to cycle through each element using a forEach().
CSS
There isn't a closing bracket that closes out your media query.
Presently there are no declared styles for .active and #mobile__menu
const menu = document.querySelector("#mobile-menu");
const menulinks = document.querySelectorAll(".navbar__item");
// Display Mobile Menu
function mobileMenu() {
this.classList.toggle("active");
}
menu.addEventListener('click', mobileMenu)
menulinks.forEach((link) => link.addEventListener("click", mobileMenu));
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "Kumbh sans", sans-serif;
scroll-behavior: smooth;
}
.navbar {
background: #131313;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
position: sticky;
top: 0;
z-index: 1000;
}
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
margin: 0 auto;
padding: 11px 50px;
}
#navbar__logo {
background-color: #ff8177;
background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%)
background-size 100%;
-webkit-background-clip: text;
background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
display: table;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 3rem;
}
.navbar__menu {
display: flex;
align-items: center;
list-style: none;
padding: 10px -100px;
}
.navbar__item {
height: 80px;
}
.navbar__links {
color: #fff;
display: flex;
align-items: center;
justify-content: center;
width: 125px;
text-decoration: none;
height: 100%;
font-size: 1.5rem;
transition: all 0.3s ease;
}
.navbar__btn {
display: flex;
justify-content: center;
align-items: center;
padding: 4 5rem;
width: 100%;
}
.Button {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
font-size: 1.5rem;
padding: 10px 20px;
height: 100%;
width: 100%;
border: none;
outline: none;
border-radius: 4px;
background: #833ab4;
background: -webkit-linear-gradient(to right, #fcb045, #fd1d1d, #833ab4);
background: linear-gradient(to right, #fcb045, #fd1d1d, #833ab4);
color: #fff;
transition: all 0.3s ease;
}
.navbar__links:hover {
color: #0d628a;
transition: all 0.3s ease;
}
.Button:hover {
color: #000000;
transition: all 0.3s ease;
}
#media screen and (max-width: 960px) {
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
padding: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<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 rel="stylesheet" href="./main.css" />
<title>Static Template</title>
</head>
<body>
<!-- Navbar Section -->
<nav class="navbar">
<div class="navbar__container">
Lolipop
tion
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="navbar__menu">
<li class="navbar__item">
Home
</li>
<li class="navbar__item">
About
</li>
<li class="navbar__item">
<a href="#services" class="navbar__links" id="services-page"
>Services</a
>
</li>
<li class="navbar__Btn">
Sign Up
</li>
</ul>
</div>
</nav>
<script src="./Modify.js"></script>
</body>
</html>
I'm having a problem with my code and can't figure it out. I'm writing my own website and can't get my buttons to go to the center of the page. I tried almost everything I think but it always goes to about 30% or 70% for some reason... The website is not fully responsive for now I will work on that later. What's wrong with my code? What can I do to fix it next time? Thanks for any ideas!
function showHide() {
var navList = document.getElementById("nav-lists");
if (navList.className == '_Menus') {
navList.classList.add("_Menus-show");
} else {
navList.classList.remove("_Menus-show");
}
const body = document.querySelector('body')
const twitter = document.querySelector('.twitter')
twitter.addEventListener("mouseover", function () {
body.classList.add('linked')
},false)
twitter.addEventListener("mouseout", function () {
body.classList.remove('linked')
}, false)
}
#font-face {
font-family: 'familiar_probold';
src: url('fonts/FamiliarPro/familiar_pro-bold-webfont.woff2') format('woff2'),
url('fonts/FamiliarPro/familiar_pro-bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'uni_sansheavy_caps';
src: url('fonts/UniSansHeavy/uni_sans_heavy-webfont.woff2') format('woff2'),
url('fonts/UniSansHeavy/uni_sans_heavy-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'source_sans_problack';
src: url('fonts/SourceSans/sourcesanspro-black-webfont.woff2') format('woff2'),
url('fonts/SourceSans/sourcesanspro-black-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
*{
margin: 0;
padding: 0;
}
*,
*::before,
*::after {
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
background-color: #f7f7f7;
font-family: sans-serif;
}
img {
width: 100%;
height: auto;
}
.navbar {
width: 100%;
background-color: #000;
}
.container {
max-width: 1140px;
margin: 0 auto;
height: 60px;
display: flex;
flex-wrap: wrap;
}
._Logo {
overflow: hidden;
text-align: center;
flex-basis: 230px;
}
._Logo img {
height: 100% !important;
width: 150px !important;
}
._Menus ul {
display: flex;
list-style: none;
padding: 0;
margin: 0;
flex-wrap: wrap;
}
._Menus ul li a {
display: block;
padding: 0 10px;
height: 60px;
line-height: 60px;
text-decoration: none;
color: #FFF;
outline: none;
font-family: 'uni_sansheavy_caps';
}
._Menus ul li a:hover {
background-color: #FFF;
color: #000;
}
._Iconbar {
display: none;
background-color: #000;
}
.menu-bar {
width: 45px;
align-self: center;
cursor: pointer;
}
.icon-bar {
height: 3px;
width: 100%;
background: #FFF;
margin: 7px 0;
display: block;
border-radius: 2px;
}
.toppadding{
padding-top: 0;
}
.topbackround{
width: 100%;
height: auto;
position: relative;
text-align: center;
color: white;
}
.sloganlefttextfirst{
position: absolute;
top: 20%;
left: 5%;
font-family: 'familiar_probold';
font-size: 200%;
color: grey;
}
.sloganlefttextsecond{
position: absolute;
top: 25%;
left: 5%;
font-family: 'uni_sansheavy_caps';
font-size: 500%;
}
.sloganlefttextthird{
position: absolute;
top: 35%;
left: 5%;
font-family: 'uni_sansheavy_caps';
font-size: 500%;
color: #DCC98E;
border-bottom: 6px solid #DCC98E;
padding-bottom: 3px;
}
.howitworkslefttextfirst a{
position: absolute;
top: 51%;
left: 5%;
font-family: 'familiar_probold';
font-size: 200%;
color: #B9CDBE;
border-bottom: 3px solid #B9CDBE;
padding-bottom: 3px;
text-decoration: none;
}
.howitworkslefttextsecond{
position: absolute;
top: 57%;
left: 5%;
font-family: 'Arial';
font-size: 200%;
color: white;
}
hr{
color: black;
background-color: black;
height: 8px;
border: none;
}
.midbackground{
background-color: #1B1C1E;
padding-bottom: 100px;
}
.tutorial{
padding-top: 3%;
padding-bottom: 3%;
text-align: center;
left: 50%;
font-family: 'uni_sansheavy_caps';
color: #DCC98E;
font-size: 350%;
width: 100%;
}
.tutorial p{
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
left: 50%;
font-family: 'Arial';
color: white;
font-size: 50%;
width: 100%;
}
.circles{
margin: 0 auto;
}
.circles > div {
overflow: hidden;
float: left;
width: auto;
height: auto;
position: relative;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
background: #1B1C1E;
}
.circles > div > div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
font-family: 'uni_sansheavy_caps';
font-size: 400%;
color: grey;
}
.circles > div > div > div {
display: table;
width: 100%;
height: 100%;
}
.circles > div > div > div > div {
display: table-cell;
text-align: center;
vertical-align: middle;
}
#media (max-width: 320px)
{
.circles > div {padding: 50%;}
}
#media (min-width: 321px) and (max-width: 800px)
{
.circles > div {padding: 25%;}
}
#media (min-width: 801px)
{
.circles{width:800px}
.circles > div {padding: 12.5%;}
}
.circlescontent{
margin: 0 auto;
}
.circlescontent > div {
overflow:hidden;
float:left;
width:auto;
height:auto;
position: relative;
background: #1B1C1E;
}
.circlescontent > div > div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
font-family: 'familiar_probold';
font-size: 250%;
color: grey;
}
.circlescontent > div > div > div {
display: table;
width: 100%;
height: 100%;
}
.circlescontent > div > div > div > div {
display: table-cell;
text-align: center;
vertical-align: middle;
}
#media (max-width: 320px)
{
.circlescontent > div {padding: 50%;}
}
#media (min-width: 321px) and (max-width: 800px)
{
.circlescontent > div {padding: 25%;}
}
#media (min-width: 801px)
{
.circlescontent{width:800px}
.circlescontent > div {padding: 12.5%;}
}
.statement{
padding-top: 25%;
padding-bottom: 3%;
text-align: center;
left: 50%;
font-family: 'uni_sansheavy_caps';
color: #DCC98E;
font-size: 350%;
width: 100%;
}
.statement p{
padding-top: 20px;
padding-bottom: 0;
text-align: center;
left: 50%;
font-family: 'familiar_probold';
color: white;
font-size: 50%;
width: 100%;
}
.statementfinal{
padding-top: 0;
padding-bottom: 3%;
text-align: center;
left: 50%;
font-family: 'uni_sansheavy_caps';
color: #DCC98E;
font-size: 350%;
width: 100%;
} /*HERE*/
.buttonbkg{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 90vh;
}
.button {
width: 320px;
max-width: 100%;
overflow: hidden;
position: relative;
transform: translatez(0);
text-decoration: none;
box-sizing: border-box;
font-size: 130%;
font-weight: normal;
font-family: 'familiar_probold';
color: #B9CDBE;
box-shadow: 0 9px 18px rgba(0,0,0,0.2);
display: inline-block;
left: 50%;
margin: 3%;
align-content: center;
}
.steam{
text-align: center;
border-radius: 50px;
padding: 26px;
color: white;
background: #BD3381;
transition: all 0.2s ease-out 0s;
display: inline-block;
align-content: center;
}
.gradient {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
bottom: auto;
margin: auto;
z-index: -1;
background: radial-gradient(90px circle at top center, rgba(238,88,63,.8) 30%, rgba(255,255,255,0));
transition: all 0s ease-out 0s;
transform: translatex(-140px);
animation: 18s linear 0s infinite move;
display: inline-block;
align-content: center;
}
#keyframes move {
0% {
transform: translatex(-140px);
}
25% {
transform: translatex(140px);
opacity: 0.3;
}
50% {
transform: translatex(140px);
opacity: 1;
background: radial-gradient(90px circle at bottom center, rgba(238,88,63,.5) 30%, rgba(255,255,255,0));
}
75% {
transform: translatex(-140px);
opacity: 0.3;
}
100% {
opacity: 1;
transform: translatex(-140px);
background: radial-gradient(90px circle at top center, rgba(238,88,63,.5) 30%, rgba(255,255,255,0));
}
}
#media (max-width: 900px) {
._Logo {
height: 60px;
}
._Menus {
flex: 100%;
background: #333;
height: 0;
overflow: hidden;
}
._Menus ul{
flex-direction: column;
}
._Menus ul li a {
height: 40px;
font-size: 14px;
text-transform: uppercase;
line-height: 40px;
}
._Menus ul li a:hover {
background-color: #81d742;
color: #FFF;
}
.container {
justify-content: space-between;
}
._Iconbar {
display: flex;
margin-right: 10px;
}
._Menus-show {
height: auto;
}
.brandimage{
display: none;
}
#media (max-width: 600px) {
._Logo {
height: 60px;
}
._Menus {
flex: 100%;
background: #333;
height: 0;
overflow: hidden;
}
._Menus ul{
flex-direction: column;
}
._Menus ul li a {
height: 40px;
font-size: 14px;
text-transform: uppercase;
line-height: 40px;
}
._Menus ul li a:hover {
background-color: #81d742;
color: #FFF;
}
.container {
justify-content: space-between;
}
._Iconbar {
display: flex;
margin-right: 10px;
}
._Menus-show {
height: auto;
}
.brandimage{
display: none;
}
}}
/*
#0C0028
#1D5EC3
#181A1B
*/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Reff Skins</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS responsive navigation menu</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS responsive navigation menu</title>
</head>
<body>
<nav class="navbar">
<div class="container">
<section class="_Logo"><img src="images/brand.png" alt="REFF SKINS"></section>
<section class="_Iconbar">
<span class="menu-bar" onclick="showHide()">
<i class="icon-bar"></i>
<i class="icon-bar"></i>
<i class="icon-bar"></i>
</span>
</section>
<section class="_Menus" id="nav-lists">
<ul>
<li>ABOUT</li>
<li>HOW IT WORKS</li>
<li>FAQ</li>
<li>AVAILABLE SKINS</li>
<li>SIGN IN THROUGH STEAM</li>
</ul>
</section>
</div>
</nav>
<div class="toppadding"></div>
<div class="topbackround">
<img class="topbackround" src="images/awpasiimov.jpeg">
<div class="sloganlefttextfirst">WEBSITE WITH TRULY FREE SKINS</div>
<div class="sloganlefttextsecond">LOW ON SKINS?</div>
<div class="sloganlefttextthird">TIME TO GET NEW FREE!</div>
<div class="howitworkslefttextfirst">HOW IS THIS WORKING?</div>
<div class="howitworkslefttextsecond">check how it works page or visit our YouTube</div>
<!--<button class="btn1">HOW IT WORKS</button></div>
<button class="btn2">SKINS</button></div>
<button class="btn3">SIGN IN WITH STEAM</button></div>-->
</div>
<hr></hr>
<div class="midbackground">
<div class="tutorial">HOW CAN I DO IT?<p>If you want your new skins complete the four easy steps.</p></div>
<div class="circles">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
1.
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circles">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
2.
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circles">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
3.
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circles">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
4.
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circlescontent">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
SIGN IN WITH STEAM
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circlescontent">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
DO THE REFERR PROCESS
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circlescontent">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
SELECT WANTED SKINS
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circlescontent">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
GET YOUR SKINS
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="statement">IT'S THAT EASY<p>NO DEPOSITS, NO PAYMENT METHODS, NO RISKY GAMBLING, NO SKINS HOLDING</p></div>
<div class="statementfinal">WE SAID NO TO CATCHES!</div>
<div class="buttunbkg">
<span class="gradient"></span>SIGN IN WITH STEAM
<span class="gradient"></span>AVAILABLE SKINS
<span class="gradient"></span>HOW IT WORKS
</div>
</div>
</body>
</html>
Seems like you've got it half using flex, here's an answer sticking to it.
Firstly, you spelt buttonbkg wrong. Add flex-direction: column to it. Then like others said you will want to get rid of the left: 50%. On your .steam add your flex, and center align/justify.
.buttonbkg{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 90vh;
}
.button {
width: 320px;
max-width: 100%;
overflow: hidden;
position: relative;
transform: translatez(0);
text-decoration: none;
box-sizing: border-box;
font-size: 130%;
font-weight: normal;
font-family: 'familiar_probold';
color: #B9CDBE;
box-shadow: 0 9px 18px rgba(0,0,0,0.2);
display: inline-block;
margin: 3%;
align-content: center;
}
.steam{
text-align: center;
border-radius: 50px;
padding: 26px;
color: white;
background: #BD3381;
transition: all 0.2s ease-out 0s;
display: flex;
justify-content: center;
align-items: center;
}
You need to add this to your button selector:
.button {
transform: translateX(-50%);
}
On your .button class you have left: 50%;, remove it. Also add margin: 3% auto
On you .steam class change display: inline-block; to display: block;
margin: 3% auto
3% -> top/bottom margin
auto -> left/right margin, auto will make left an right margin the same
Other solution would be to change your transform: translatez(0); to transform: translateX(-50%);, but I think transform is like shooting with a shotgun at a fly.