I am making a personal website and I am having issues with my sticky navbar. When the site loads the navbar is intended to go on top of section #home but it generates a white space for itself and it's supposed to take the background image of section #home/be on top of it and on top of every other section on the website (SEE PICTURE)
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Setting Website Settings -->
<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>Mark6712</title>
<meta name="description" content="Mark6712's personal website.">
<meta name="keywords" content="Mark6712, Programming, C, C++, Software, Personal">
<meta name="robots" content="noindex, nofollow">
<meta name="author" content="Mark6712">
<!-- Setting the Favicons -->
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="192x192" href="/assets/favicon/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<link rel="mask-icon" href="/assets/favicon/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/assets/favicon/favicon.ico">
<meta name="apple-mobile-web-app-title" content="Mark6712">
<meta name="application-name" content="Mark6712">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-TileImage" content="/assets/favicon/mstile-144x144.png">
<meta name="msapplication-config" content="/assets/favicon/browserconfig.xml">
<meta name="theme-color" content="#44444c">
<!-- Importing CSS/JS -->
<link rel="stylesheet" href="/assets/stylesheets/navbar.css">
<link rel="stylesheet" href="/assets/stylesheets/main.css">
<script src="/assets/scripts/navbar.js" defer></script>
</head>
<body>
<nav class="navbar">
<a class="nav-logo" href="#">Mark6712</a>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="nav-links">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
<main>
<section id="home">
<h1>Home</h1>
<p>This is the home page.</p>
</section>
<section id="about">
<h1>About</h1>
<p>This is the about page.</p>
</section>
</main>
<footer>
</footer>
</body>
</html>
navbar.css
#import url('https://fonts.googleapis.com/css?family=Heebo&display=swap');
#import url('https://fonts.googleapis.com/css?family=Proxima+Nova&display=swap');
.navbar {
z-index: 100;
font-family: 'Heebo', sans-serif;
display: flex;
position: sticky;
top: 1vh;
justify-content: space-between;
align-items: center;
border-radius: 20px;
background-color: rgba(80, 80, 80, 0.50);
backdrop-filter: saturate(180%) blur(20px);
color: white;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
margin: 0;
padding: 0;
}
.nav-logo {
position: relative;
font-family: 'Proxima Nova', 'Segoe UI', sans-serif;
font-size: 1.5rem;
font-weight: bold;
margin: .5rem;
left: .7rem;
text-decoration: none;
color: white;
}
.nav-links {
height: 100%;
z-index: 99;
}
.nav-links ul {
display: flex;
margin: 0;
padding: 0;
}
.nav-links li {
list-style: none;
}
.nav-links li a {
display: block;
text-decoration: none;
color: white;
padding: 1rem;
}
.nav-links li:hover {
background-color: #555;
border-radius: 20px;
}
.toggle-button {
position: absolute;
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 95%;
background-color: white;
border-radius: 10px;
margin: 8%;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
}
#media (max-width: 800px) {
.navbar {
flex-direction: column;
align-items: flex-start;
background-color: rgba(80, 80, 80, 0.50);
backdrop-filter: saturate(180%) blur(20px);
}
.toggle-button {
display: flex;
}
.nav-links {
display: none;
width: 100%;
}
.nav-links ul {
width: 100%;
flex-direction: column;
background-color: rgba(81, 81, 81, 0.50);
}
.nav-links ul li {
text-align: center;
}
.nav-links ul li a {
padding: .5rem 1rem;
}
.nav-links.active {
display: flex;
}
}
main.css
* {
box-sizing: border-box;
z-index: 1;
}
html, body {
scroll-behavior: smooth;
overflow-x: hidden;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
z-index: 1;
}
section {
min-height: 100vh;
z-index: 1;
}
#home {
height: 100vh;
width: 100%;
color: aliceblue;
background-image: url("../images/background.png");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
navbar.js
const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('nav-links')[0]
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})
navbarLinks.addEventListener('click', () => {
navbarLinks.classList.remove('active')
})
You can solve this by using the float property and setting the width of the navbar to 100%.
.navbar {
width: 100%; /* new line */
float: right; /* new line */
clear: both; /* new line */
z-index: 100;
font-family: 'Heebo', sans-serif;
display: flex;
position: sticky;
top: 1vh;
justify-content: space-between;
align-items: center;
border-radius: 20px;
background-color: rgba(80, 80, 80, 0.5);
backdrop-filter: saturate(180%) blur(20px);
color: white;
border-radius: 20px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
scroll-behavior: smooth;
height: 100%;
width: 100%;
z-index: 1;
position: relative;
}
section {
min-height: 100vh;
z-index: 1;
}
#home {
top: 0;
min-height: 100vh;
width: 100%;
color: rgb(22, 29, 36);
background-image: url('../images/background.png');
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: antiquewhite;
}
.navbar {
z-index: 100;
font-family: 'Heebo', sans-serif;
display: flex;
position: sticky;
top: 1vh;
justify-content: space-between;
align-items: center;
border-radius: 20px;
background-color: rgba(80, 80, 80, 0.5);
backdrop-filter: saturate(180%) blur(20px);
color: white;
border-radius: 20px;
width: 100%; /* new line */
float: right; /* new line */
clear: both; /* new line */
}
.nav-logo {
position: relative;
font-family: 'Proxima Nova', 'Segoe UI', sans-serif;
font-size: 1.5rem;
font-weight: bold;
margin: 0.5rem;
left: 0.7rem;
text-decoration: none;
color: white;
}
.nav-links {
height: 100%;
z-index: 99;
}
.nav-links ul {
display: flex;
margin: 0;
padding: 0;
}
.nav-links li {
list-style: none;
}
.nav-links li a {
display: block;
text-decoration: none;
color: white;
padding: 1rem;
}
.nav-links li:hover {
background-color: #555;
border-radius: 20px;
}
.toggle-button {
position: absolute;
top: 0.75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 95%;
background-color: white;
border-radius: 10px;
margin: 8%;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
}
<nav class="navbar">
<a class="nav-logo" href="#">Mark6712</a>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="nav-links">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
<main>
<section id="home">
<h1>Home</h1>
<p>This is the home page.</p>
</section>
<section id="about">
<h1>About</h1>
<p>This is the about page.</p>
</section>
</main>
Related
Anyone who make is toggle menu. I am trying a long time i am unable to make this toggle menu below are the my html file and css and attach pic create same this. i want to create border radius like this picture for mobile screen.enter image description here
Below are my code pasted anyone can do this. I am very thankful to you
*{
margin: 0;
padding: 0;
font-family: sans-serif;
box-sizing: border-box;
}
.hero{
width: 100%;
min-height: 100vh;
background: #eceaff;
color: #525252;
}
nav{
padding: 20px 10%;
align-items: center;
justify-content: space-between;
position: relative;
}
.user-pic{
padding: 15px;
float: right;
border-radius: 50rem;
cursor: pointer;
background-color: white;
border-radius: 50rem;
}
nav ul{
width: 100%;
text-align: right;
}
nav ul li{
display: inline-block;
list-style: none;
margin: 10px 20px;
}
nav ul li a{
color: white;
text-decoration: none;
}
nav ul li a:hover{
color: yellow;
}
.sub-menu-link{
background-color: white;
border-radius: 50rem;
}
.sub-menu-wrap{
position: absolute;
top: 100%;
right: 10%;
width: 320px;
max-height: 0px;
overflow: hidden;
}
.sub-menu-wrap.open-menu{
max-height: 400px;
margin-top: 30px;
}
.sub{
background: rgb(245, 7, 7);
padding: 20px;
width: 65%;
margin: 10px 0.5px 0px;
border-bottom-right-radius: 2rem;
opacity: 1;
}
.sub-menu{
background: rgb(245, 7, 7);
padding: 20px;
margin: 0px 0.5px 40px 0.5px;
border-bottom-right-radius: 1rem;
border-bottom-left-radius: 1rem;
border-top-left-radius: 1rem;
}
.user-info{
display: flex;
align-items: center;
}
.user-info h3{
font-weight: bold;
}
.user-info span{
width: 60px;
border-radius: 50%;
margin-right: 15px;
}
.sub-menu-link{
display: flex;
align-items: center;
text-decoration: none;
color: #525252;
margin: 12px 0;
}
.sub-menu-link p{
width: 100%;
}
.sub-menu-link img{
width: 40px;
background: #e5e5e5;
border-radius: 50%;
padding: 8px;
margin-right: 15px;
}
.sub-menu-link span{
font-size: 22px;
transition: transform 0.5s;
}
.sub-menu-link:hover span{
transform: translate(5px);
}
.sub-menu-link:hover p{
font-weight: 600;
}
<!DOCTYPE html>
<!-- Creadted by Coding Pakistan Youtube Channel -->
<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> Menu</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="hero">
<nav >
<div class="p">
<div onclick="toggleMenu()" class="user-pic">
<span >CK</span>
</div></div>
<div class="sub-menu-wrap" id="subMenu">
<div class="sub">
</div>
<div class="sub-menu">
<a href="#" class="sub-menu-link">
<img src="images/profile.png">
<p>User Profile</p>
</a>
<a href="#" class="sub-menu-link">
<img src="images/help.png">
<p>Privacy and Safety</p>
</a>
<a href="#" class="sub-menu-link">
<img src="images/setting.png">
<p>Settings</p>
</a>
<a href="#" class="sub-menu-link">
<img src="images/logout.png">
<p>Sign Out</p>
</a>
</div>
</div>
</nav>
</div>
<script>
let subMenu = document.getElementById("subMenu");
function toggleMenu(){
subMenu.classList.toggle("open-menu");
}
</script>
</body>
</html>
Try this:
*{
margin: 0;
padding: 0;
font-family: sans-serif;
box-sizing: border-box;
}
.hero{
width: 100%;
min-height: 100vh;
background: #eceaff;
color: #525252;
}
nav{
padding: 20px 10%;
align-items: center;
justify-content: space-between;
position: relative;
}
.user-pic{
padding: 15px;
float: right;
border-radius: 50rem;
cursor: pointer;
background-color: white;
border-radius: 50rem;
border: 15px solid rgb(245, 7, 7);
box-shadow: 0 0 0 15px rgb(245 7 7);
}
nav ul{
width: 100%;
text-align: right;
}
nav ul li{
display: inline-block;
list-style: none;
margin: 10px 20px;
}
nav ul li a{
color: white;
text-decoration: none;
}
nav ul li a:hover{
color: yellow;
}
.sub-menu-link{
background-color: white;
border-radius: 50rem;
}
.sub-menu-wrap{
position: absolute;
top: 100%;
right: 9%;
width: 320px;
max-height: 0px;
overflow: hidden;
}
.sub-menu-wrap.open-menu{
max-height: 400px;
margin-top: 44px;
}
.sub{
background: rgb(245, 7, 7);
padding: 20px;
width: 65%;
margin: 10px 0.5px 0px;
border-bottom-right-radius: 2rem;
opacity: 1;
}
.sub-menu{
background: rgb(245, 7, 7);
padding: 20px;
margin: 0px 0.5px 40px 0.5px;
border-bottom-right-radius: 1rem;
border-bottom-left-radius: 1rem;
border-top-left-radius: 1rem;
}
.user-info{
display: flex;
align-items: center;
}
.user-info h3{
font-weight: bold;
}
.user-info span{
width: 60px;
border-radius: 50%;
margin-right: 15px;
}
.sub-menu-link{
display: flex;
align-items: center;
text-decoration: none;
color: #525252;
margin: 12px 0;
}
.sub-menu-link p{
width: 100%;
}
.sub-menu-link img{
width: 40px;
background: #e5e5e5;
border-radius: 50%;
padding: 8px;
margin-right: 15px;
}
.sub-menu-link span{
font-size: 22px;
transition: transform 0.5s;
}
.sub-menu-link:hover span{
transform: translate(5px);
}
.sub-menu-link:hover p{
font-weight: 600;
}
<!DOCTYPE html>
<!-- Creadted by Coding Pakistan Youtube Channel -->
<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> Menu</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="hero">
<nav >
<div class="p">
<div onclick="toggleMenu()" class="user-pic">
<span >CK</span>
</div></div>
<div class="sub-menu-wrap" id="subMenu">
<div class="sub-menu">
<a href="#" class="sub-menu-link">
<img src="images/profile.png">
<p>User Profile</p>
</a>
<a href="#" class="sub-menu-link">
<img src="images/help.png">
<p>Privacy and Safety</p>
</a>
<a href="#" class="sub-menu-link">
<img src="images/setting.png">
<p>Settings</p>
</a>
<a href="#" class="sub-menu-link">
<img src="images/logout.png">
<p>Sign Out</p>
</a>
</div>
</div>
</nav>
</div>
<script>
let subMenu = document.getElementById("subMenu");
function toggleMenu(){
subMenu.classList.toggle("open-menu");
}
</script>
</body>
</html>
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>
I'm new here and I hope someone can help me.
I started learning programming 1 week ago and I started practicing by creating a website.
All good until mobile responsive part comes along.
I can't get the mobile menu to work with JS.
I've tried many different things. I also tried jQuery too but nothing worked.
I'm feeling very dumb and I hope I can get help.
Thank you very much!
(sorry if my English is bad; I'm still learning)
const btn_mobile = document.getElementsByClassName('.hamburger');
const menu = document.getElementsByClassName('.menu');
btn_mobile.addEventListener('click', function () {
menu.classList.toggle('.active');
})
/*Base Style*/
body{font-family: 'Inter', sans-serif; font-size: 16px;}
a{
text-decoration: none;
}
h1, h2, h3, h4, h5, p{
color: white; padding-bottom: 30px;
}
.big-text{font-size: 70px; font-weight: 900;}
.med-text{font-size: 40px;}
.normal-text{font-size: 20px;}
.small-text{font-size: 14px;}
.intro-text{text-transform: uppercase; font-size: 20px; font-weight: bold;}
.button{
padding: 15px 17px;
background: rgb(85, 85, 226);
color: white;
display:inline-block;
border-radius: 4px;
text-align: center;
}
#media (max-width: 768px){
.big-text{font-size: 40px;}
}
/*HEADER*/
.header{
width: 100%;
position: absolute;
top: 0;
padding: 15px;
display: flex;
max-width: 1350px;
left: 50%;
transform: translateX(-50%);
}
.logo{
}
.hamburger{display: none; }
.menu{
width: 100%;
}
/*align-items aggiusta verticale
jusify-content aggiusta orizontale
*/
.menu li{
display: inline-block;
}
.menu li a{
padding: 10px 20px;
color: white;
display: block;
}
.cta{
display: flex;
align-items: center;
}
#media screen and (max-width: 768px){
.cta{display: none;}
.header{
background: black;
}
.hamburger{
display: block;
height: 30px;
width: 30px;
position: absolute;
top: 40px;
right: 30px;
cursor: pointer;
}
.hamburger span{
background: white;
height: 3px;
width: 100%;
display: block;
margin-bottom: 5px;
}
.menu{ display: flex;
padding-top: 30px;
top: 0;
right: 100%;
position: absolute;
background: black;
height: 100vh;
width: 100%;
align-items: center;
justify-content: center;
flex-direction: column;
}
.menu li {
display: flex;
background-color: red;
height: 40px;
width: 140px;
margin: 20px;
text-align: center;
align-items: center;
justify-content: center;
border-radius: 20px;
}
.menu.active{
right: 0%;
}
.logo{
width: 100px;
height: 100px;
}
.logo img{
width: 100%;
height: auto;
}
}
/*! Hero section */
.hero{
background: url(bg-test.jpg) no-repeat center center;
background-size: cover;
height: 100vh;
display: flex; width: 100%; align-items: center;
}
.hero__content{
width: 100%;
max-width: 1350px;
margin: 0 auto;
padding: 30px;
}
#media (max-width: 768px){
}
*,
*:before,
*:after{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<!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>Praise Amogus</title>
</head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" integrity="sha512-NmLkDIU1C/C88wi324HBc+S2kLhi08PN5GDeUVVVC/BVt/9Izdsc9SVeVfA1UZbY3sHUlDSyRXhCzHfr6hmPPw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#300;400;700;900&display=swap" rel="stylesheet">
<body>
<div class="header">
<div class="logo">
<img src="logo3.png" alt="">
</div>
<ul class="menu">
<li>Home</li>
<li>Contact</li>
<li>About us</li>
</ul>
<div class= "cta">
Button
</div>
</div>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
<!--hero e contenuti-->
<div class="hero">
<div class="hero__content">
<p class="intro-text">Testo Introduttivo</p>
<h1 class="big-text">Titolo</h1>
Button 2
</div>
</div>
<script>src = script.js </script>
</body>
</html>
getElementsByClassName function returns an array. You should add [0] to get the element.
Also you have mistake with adding script to your page. Here is the right variant:
<script type="text/javascript" src="path-to-javascript-file.js"></script>
I was wondering how I could center the picture and keep the height of the div.
I want to move "the picture" down but it did not work... it also moved my webpage name down a bit too.
Here is my current code:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
font-family: 'Poppins', sans-serif;
}
.wrapper {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 1px;
}
/* GO UNDER efc*/
.section{
height: 100vh;
max-width: 100vw;
display: flex;
}
.goUnder::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateZ(-1px) scale(2);
background-size: cover;
z-index: -1;
}
.image1::after{
background-image: url("../images/bg.jpg");
background-color: #1b1b1b;
position: center;
}
.static {
background: #D5C49A;
}/* NAVBAR */
.navbar{
position: fixed;
width: 100%;
z-index: 2;
padding: 2rem 0;
transition: all 0.3s ease;
}
.content{
padding: 0 20rem;
}
.navbar.sticky{
background: #1b1b1b;
padding: 10px 0;
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1);
}
.navbar .content{
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a{
color: #fff;
font-size: 2rem;
font-weight: 600;
text-decoration: none;
}
.logo-img{
width: 5rem;
height:auto;
line-height: -1;
}
#logAndText{
display:block;
margin:auto;
}
.navbar .menu-list{
display: inline-flex;
}
.menu-list li{
list-style: none;
}
.menu-list li a{
color: #fff;
font-size: 1.2rem;
font-weight: 500;
margin-left: 2rem;
text-decoration: none;
transition: all 0.3s ease;
}
<!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">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#500&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/f05f025bf3.js" crossorigin="anonymous"></script>
<title>GameXcom</title>
</head>
<body>
<div class="wrapper">
<div class="section goUnder image1 center">
<!--nav-->
<nav class="navbar">
<div class="content">
<div id="logoAndText">
<div class="logo">
<img src="../images/logo.png" class="logo-img">
GameXcom
</div>
</div>
<ul class="menu-list">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Features</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>
<div class="section static">
<h1>Static</h1>
</div>
</div>
</body>
</html>
It is just for large screens right know.
I would aprecciate any help :)
You can add that code to align the image and logo text in the center of div element!
.logo {
display: flex;
justify-content: center;
align-items: center;
max-width: 80%;
}
Also, you can change the max-width about the distance of the logo image and the logo text.
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
font-family: 'Poppins', sans-serif;
}
.wrapper {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 1px;
}
/* GO UNDER efc*/
.section{
height: 100vh;
max-width: 100vw;
display: flex;
}
.goUnder::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateZ(-1px) scale(2);
background-size: cover;
z-index: -1;
}
.image1::after{
background-image: url("../images/bg.jpg");
background-color: #1b1b1b;
position: center;
}
.static {
background: #D5C49A;
}/* NAVBAR */
.navbar{
position: fixed;
width: 100%;
z-index: 2;
padding: 2rem 0;
transition: all 0.3s ease;
}
.content{
padding: 0 20rem;
}
.navbar.sticky{
background: #1b1b1b;
padding: 10px 0;
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1);
}
.navbar .content{
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a{
color: #fff;
font-size: 2rem;
font-weight: 600;
text-decoration: none;
}
.logo {
display: flex;
justify-content: center;
align-items: center;
max-width: 80%;
}
.logo-img{
width: 5rem;
height:auto;
line-height: -1;
}
#logAndText{
display:block;
margin:auto;
}
.navbar .menu-list{
display: inline-flex;
}
.menu-list li{
list-style: none;
}
.menu-list li a{
color: #fff;
font-size: 1.2rem;
font-weight: 500;
margin-left: 2rem;
text-decoration: none;
transition: all 0.3s ease;
}
<!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">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#500&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/f05f025bf3.js" crossorigin="anonymous"></script>
<title>GameXcom</title>
</head>
<body>
<div class="wrapper">
<div class="section goUnder image1 center">
<!--nav-->
<nav class="navbar">
<div class="content">
<div id="logoAndText">
<div class="logo">
<img src="../images/logo.png" class="logo-img">
GameXcom
</div>
</div>
<ul class="menu-list">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Features</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>
<div class="section static">
<h1>Static</h1>
</div>
</div>
</body>
</html>
And without flex box, you can add vertical-align:center to the div holding the logotype (both image and brand name) and give the image some top padding, as follows:
<div id="logoAndText" style="text-align: center;"></div>
<div class="logo" style="padding-top:2vh;"></div>
<!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">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#500&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/f05f025bf3.js" crossorigin="anonymous"></script>
<title>GameXcom</title>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
font-family: 'Poppins', sans-serif;
}
.wrapper {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 1px;
}
/* GO UNDER efc*/
.section{
height: 100vh;
max-width: 100vw;
display: flex;
}
.goUnder::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateZ(-1px) scale(2);
background-size: cover;
z-index: -1;
}
.image1::after{
background-image: url("../images/bg.jpg");
background-color: #1b1b1b;
position: center;
}
.static {
background: #D5C49A;
}/* NAVBAR */
.navbar{
position: fixed;
width: 100%;
z-index: 2;
padding: 2rem 0;
transition: all 0.3s ease;
}
.content{
padding: 0 20rem;
}
.navbar.sticky{
background: #1b1b1b;
padding: 10px 0;
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1);
}
.navbar .content{
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a{
color: #fff;
font-size: 2rem;
font-weight: 600;
text-decoration: none;
}
.logo-img{
width: 5rem;
height:auto;
line-height: -1;
}
#logAndText{
display:block;
margin:auto;
}
.navbar .menu-list{
display: inline-flex;
}
.menu-list li{
list-style: none;
}
.menu-list li a{
color: #fff;
font-size: 1.2rem;
font-weight: 500;
margin-left: 2rem;
text-decoration: none;
transition: all 0.3s ease;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="section goUnder image1 center">
<!--nav-->
<nav class="navbar">
<div class="content">
<div id="logoAndText" style="text-align: center;">
<div class="logo" style="padding-top:2vh;">
<img src="../images/logo.png" class="logo-img">
GameXcom
</div>
</div>
<ul class="menu-list">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Features</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>
<div class="section static">
<h1>Static</h1>
</div>
</div>
</body>
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.