This question already has answers here:
Why does this CSS margin-top style not work?
(14 answers)
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 6 months ago.
I'm trying to create a website with navbar that is position is fixed then a main section that has 100vh, that is the only content that I have but the webpage is too tall although my web is 100vh height only so it doesn't make any sense why it has scroll.
#import url('https://fonts.googleapis.com/css2?family=Barlow&display=swap');
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
nav {
position: fixed;
padding: 1rem 0;
width: 100%;
}
nav .navbar-container {
display: flex;
width: 90%;
margin: 0 auto;
}
nav .navbar-brand {
font-family: 'Barlow', sans-serif;
color: #212529;
font-size: 2.5rem;
text-decoration: none;
padding-top: 5px;
margin-right: 20px;
}
nav .navbar-links {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
nav .navbar-links li {
display: inline-block;
margin-right: 10px;
}
nav .navbar-links li a {
color: #212529;
display: block;
text-align: center;
padding: 20px 7px;
text-decoration: none;
font-size: 1rem;
line-height: 1rem;
font-family: 'Barlow', sans-serif;
}
.dropdown .dropbtn {
font-size: 1rem;
outline: none;
background-color: inherit;
height: 100%;
font-family: 'Barlow', sans-serif;
margin: 0;
}
nav .dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
}
nav .dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
nav .dropdown-content a:hover {
background-color: #ddd;
}
nav .dropdown:hover .dropdown-content {
display: block;
}
.main-section {
height: 100vh;
background-color: #eeeeee;
}
.main-container {
height: 100%;
width: 90%;
margin: 0 auto;
position: relative;
}
.main-content {
position: relative;
top: 50%;
transform: translateY(-50%);
width: fit-content;
}
.main-content h1 {
font-family: 'Barlow', sans-serif;
margin-bottom: 10px;
font-size: 2rem !important;
}
.main-content p {
margin-top: 0;
font-family: 'Barlow', sans-serif;
}
.main-content .link-group a {
display: inline-block;
font-weight: 400;
line-height: 1.5;
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
padding: .375rem .75rem;
font-size: 1rem;
border-radius: 0;
font-family: 'Barlow', sans-serif;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.contact-link {
color: #fff;
background-color: #212529;
border: 1px solid #212529;
}
.buy-now-link {
color: #212529;
border: 1px solid #212529;
}
.buy-now-link:hover {
color: #fff;
background-color: #212529;
border-color: #212529;
}
<!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="src/css/style.css">
<title>Gizmo Twist | Home</title>
</head>
<body>
<nav>
<div class="navbar-container">
<a class="navbar-brand" href="#">GIZMOTWIST</a>
<ul class="navbar-links">
<li>
Home
</li>
<li>
<div class="dropdown">
<a class="dropbtn">Products</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</div>
</nav>
<section class="main-section">
<div class="main-container">
<div class="main-content">
<h1>PH NO.1 CUBE SHOP</h1>
<p>ITS START WITH A CROSS</p>
<div class="link-group">
<a class="contact-link" href="#">Contact Us</a>
<a class="buy-now-link" href="#">Buy Now</a>
</div>
</div>
</div>
</section>
<script src="src/js/app.js"></script>
</html>
your main container is getting a margin on top. You can use negative margin to fix it
.main-container {
height: 100%;
width: 90%;
margin: 0 auto;
position: relative;
margin-top: -30px;
}
Related
Creating a simple product landing page, I'm done with the first part of the webpage. When I try to write a new section for "Why fly with us" that ideally, a user would scroll down to from the first part, and every new element appears on top of the first part.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.nav-container {
height: 70px;
background-color: rgb(0, 221, 221);
}
.navbar {
display: grid;
grid-template-columns: 0.2fr auto 1fr;
align-items: center;
height: 80px;
width: 90%;
max-width: 1720px;
margin: 0 auto;
}
#navbar-logo {
color: white;
justify-self: start;
}
#navbar-logo {
cursor: pointer
}
.nav-menu {
display: grid;
grid-template-columns: repeat(5, auto);
list-style: none;
font-size: 1.2rem;
text-align: center;
width: 50%;
justify-self: end;
}
.nav-links {
color: white
}
.nav-links:hover {
color: #f9e506;
transition: all 0.3s ease-out;
}
.nav-links-btn {
background-color: #f9e506;
padding: 6px 16px;
border-radius: 4px;
}
.nav-links-btn:hover {
background-color: transparent;
color: white;
padding: 5px 15px;
border-radius: 4px;
border: solid 1px #f9e506;
transition: all 0.3s ease-out;
}
.container {
position: fixed;
top: 38%;
left: 32%;
text-align: center;
}
h1 {
color: white;
font-size: 5rem;
margin: 0 0 1rem;
#media (max-width: $bp-s) {
font-size: 2rem;
}
}
h2 {
color: white;
font-weight: 300;
font-size: 2.2rem;
margin: 0 0 1rem;
#media (max-width: $bp-s) {
font-size: 1.5rem;
}
}
h3 {
color: white;
font-weight: 300;
font-size: 2.5rem;
margin: 0 0 1rem;
#media (max-width: $bp-s) {
font-size: 1.5rem;
}
}
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100%;
background-image: url("61766.jpg");
background-repeat: no-repeat;
background-size: cover;
font-family: 'Heebo', sans-serif;
font-size: 100%;
line-height: 1.45;
}
.btn {
width: 300px;
height: 80px;
border: none;
color: aqua;
background-color: #04d9ff;
border-radius: 4px;
box-shadow: inset 0 0 0 0 #f9e506;
transition: ease-out 0.3s;
font-size: 2rem;
outline: none;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: white;
}
.btn:hover {
box-shadow: inset 300px 0 0 0 #f9e506;
cursor: pointer;
color: #000;
}
.description {
background-color: aliceblue;
}
<!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>iTravel Agency</title>
<link rel="stylesheet" href="style.css"/>
<script src="script.js"></script>
</head>
<body>
<header>
<div class="nav-container">
<nav class="navbar">
<h3 id="navbar-logo">iTravel</h3>
<div class="menu-toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="nav-menu">
<li>Home</li>
<li>Flights</li>
<li>Hotels</li>
<li>My Bookings</li>
<li>Log In</li>
</ul>
</nav>
</div>
<div class="container">
<h1>iTravel</h1>
<h2>Travelling has never been easier</h2>
<button class="btn">Book Flights Now</button>
</div>
</header>
<div>
<section class="description">
<h4>Why fly with us?</h4>
<p>A travel agency like ours offers a one-stop solution for all your travel needs. From finding the perfect destination to planning..
</p>
</section>
</div>
</body>
</html>
I thought I might've failed to close a HTML tag but I've checked thoroughly and that's not the case. I've tried putting the next part in a div, I've also tried using the section tag but both attempts yielded the same results. I inspected the CSS, especially the html and body selectors, and even tweaked some of the values but to no avail. I suspect I'm missing a very minute detail and would appreciate a keener more experienced eye could help.
I think this might be what you were trying to accomplish. Basically, if you wrap each of your "sections" in an absolute positioned container (I used section) and then within each section have a fixed position container, you can achieve a parallax scroll effect. Assuming each section is 100vh, the trick is that each container needs to have its top property set to 100vh + the top property of the previous section (so the first one is 0, second is 100vh, third is 200vh...). Additionally, each successive section needs a higher z-index.
Run the snippet below and open it in full screen mode to test it out.
/* GLOBAL STYLES */
:root {
--navBarHeight: 3.5rem;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
height: 100%;
}
body {
height: 100%;
background-image: url("61766.jpg");
background-repeat: no-repeat;
background-size: cover;
font-family: 'Heebo', sans-serif;
font-size: 100%;
line-height: 1.45;
}
h1 {
font-size: 5rem;
}
h2 {
font-weight: 300;
font-size: 2.2rem;
}
h3 {
font-weight: 300;
font-size: 2.5rem;
}
a {
color: inherit;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: white;
}
/* NAVBAR STYLES */
.nav-container {
color: white;
background-color: rgb(0, 221, 221);
position: fixed;
width: 100%;
z-index: 1000;
height: var(--navBarHeight);
padding: 0 1rem;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
#navbar-logo {
cursor: pointer;
}
.nav-menu {
display: flex;
margin: 0;
padding: 0;
list-style: none;
gap: .5rem;
}
.nav-links:hover {
color: #f9e506;
transition: all 0.3s ease-out;
}
.nav-links-btn {
background-color: #f9e506;
padding: 6px 16px;
border-radius: 4px;
}
.nav-links-btn:hover {
background-color: transparent;
color: white;
padding: 5px 15px;
border-radius: 4px;
border: solid 1px #f9e506;
transition: all 0.3s ease-out;
}
/* MAIN STYLES: PARALLAX SECTIONS */
main {
position: relative;
}
section {
text-align: center;
position: absolute;
width: 100%;
height: 100vh;
overflow: hidden;
clip: rect(0, auto, auto, 0);
padding: 1rem;
box-shadow: inset 0 1px 2rem hsl(0 0% 0% / .05);
background-color: white;
}
.fixed {
overflow: hidden;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding-top: calc(1rem + var(--navBarHeight));
}
section:nth-child(1) {
top: 0;
z-index: 1;
}
section:nth-child(2) {
top: 100vh;
z-index: 2;
}
section:nth-child(3) {
top: 200vh;
z-index: 3;
}
section:nth-child(4) {
top: 300vh;
z-index: 4;
}
.booknow {
background-color: white;
}
.description {
background-color: lightcyan;
}
.findDeals {
background-color: white;
}
.explore {
background-color: lightyellow;
}
.btn {
width: 300px;
height: 80px;
border: none;
color: aqua;
background-color: #04d9ff;
border-radius: 4px;
box-shadow: inset 0 0 0 0 #f9e506;
transition: ease-out 0.3s;
font-size: 2rem;
outline: none;
}
.btn:hover {
box-shadow: inset 300px 0 0 0 #f9e506;
cursor: pointer;
color: #000;
}
<header>
<div class="nav-container">
<nav class="navbar">
<h3 id="navbar-logo">iTravel</h3>
<div class="menu-toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="nav-menu">
<li>Home</li>
<li>Flights</li>
<li>Hotels</li>
<li>My Bookings</li>
<li>Log In</li>
</ul>
</nav>
</div>
</header>
<main>
<section class="booknow">
<div class="fixed">
<h1>iTravel</h1>
<h2>Travelling has never been easier</h2>
<button class="btn">Book Flights Now</button>
</div>
</section>
<section class="description">
<div class="fixed">
<h3>Why fly with us?</h3>
<p>A travel agency like ours offers a one-stop solution for all your travel needs. From finding the perfect destination to planning...</p>
</div>
</section>
<section class="findDeals">
<div class="fixed">
<h3>Check out these deals!</h3>
</div>
</section>
<section class="explore">
<div class="fixed">
<h3>Explore destinations</h3>
</div>
</section>
</main>
The main problem here is the positioning used for the first element (.container). With position: absolute & position: fixed the elements are removed from the normal flow of the document.
In other words they take no space during layout calculation and therefore are ignored while placing elements that are in the normal document flow.
I was just creating website with html and CSS with a responsive navigation bar and hamburger menu
and which has some content as well in the body of page
but after including contents inside the page the hamburger menu isn't showing
its transition are only you can see
i just wanted the hamburger menu to be shown without disturbing the contents of this page
code
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background-color: #2f2f42;
}
nav {
display: flex;
height: 90px;
width: 100%;
align-items: center;
justify-content: space-between;
padding: 0 50px 0 100px;
flex-wrap: wrap;
}
nav .logo {
font-size: 20px;
font-weight: bold;
color: teal;
}
nav ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
nav ul li {
margin: 0 5px;
}
nav ul li a {
color: rgb(92, 156, 92);
text-decoration: none;
font-size: 18px;
font-weight: 500;
padding: 8px 15px;
border-radius: 5px;
letter-spacing: 1px;
transition: all 0.3s ease;
}
nav ul li a.active,
nav ul li a:hover {
color: teal;
background-color: white;
}
nav .menu-btn i {
color: #fff;
font-size: 22px;
cursor: pointer;
display: none;
}
input[type="checkbox"] {
display: none;
}
#media (max-width: 1000px) {
nav {
padding: 0 40px 0 50px;
}
}
#media (max-width: 920px) {
nav .menu-btn i {
display: block;
}
#click:checked~.menu-btn i:before {
content: "\f00d";
}
nav ul {
position: fixed;
top: 80px;
left: -100%;
height: 100vh;
width: 100%;
text-align: center;
display: block;
transition: all 0.3s ease;
}
#click:checked~ul {
left: 0;
}
nav ul li {
width: 100%;
margin: 40px 0;
}
nav ul li a {
width: 100%;
margin-left: -100%;
display: block;
font-size: 20px;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#click:checked~ul li a {
margin-left: 0px;
}
nav ul li a.active,
nav ul li a:hover {
background: none;
color: teal;
}
}
.content {
position: relative;
background-color: #131314;
color: whitesmoke;
border: 5px solid grey;
border-radius: 12px;
width: auto;
height: 50rem;
margin-top: 1vw;
margin-left: 4vw;
margin-right: 4vw;
font-weight: bolder;
}
#media (max-width: 920px) {
.content {
display: block;
}
}
#media (max-width: 920px) {
.content #bor,
.det,
.clk {
display: block;
}
}
.bor {
justify-content: center;
text-align: center;
border-bottom: 0.7vw solid white;
}
.det {
display: inline-block;
margin-left: 1vw;
text-align: left;
border-bottom: 0.6vw solid whitesmoke;
}
.clk {
float: right;
width: fit-content;
height: fit-content;
margin-right: 1vw;
}
h2 {
box-sizing: border-box;
padding: 0.6vw;
margin: 0.8vw 0.8vw 0.8vw 0.8vw;
background-color: rgb(64, 80, 113);
text-align: left
}
#exp {
padding: 0.8vw;
margin: 0.8vw 0.8vw 0.8vw 1.9vw;
text-align: left;
}
footer {
background-color: rgb(104, 99, 25);
color: black;
margin: 15px;
padding: 15px;
border-radius: 8px;
}
#foo {
text-align: center;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navigation Menu</title>
</head>
<body>
<nav>
<div class="logo">Logo img</div>
<input type="checkbox" id="click">
<label for="click" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Services</li>
<li>About</li>
</ul>
</nav>
<div class="content">
<p class="bor"> this is content heading <br>
</p><br>
<span class="det">this is content side</span> <button class="clk">Watch</button><br><br>
<span class="det">this is content side</span><button class="clk">Watch</button><br><br><br>
<h2>this is demo</h2>
<p id="exp">this is content end</p>
</div>
<div id="foo">
<footer>
<p>Copyright © company 2022<br><br> All Rights Reserved</p>
</footer>
</div>
</body>
</html>
Simply add a z-index: 9999; to your nav ul and will see that.
It is hidden probably because it is out of the overflow of the parent block.
Try to add a background-color: #2f2f42; to your ul and job should be done.
DEMO
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background-color: #2f2f42;
}
nav {
display: flex;
height: 90px;
width: 100%;
align-items: center;
justify-content: space-between;
padding: 0 50px 0 100px;
flex-wrap: wrap;
}
nav .logo {
font-size: 20px;
font-weight: bold;
color: teal;
}
nav ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
nav ul li {
margin: 0 5px;
}
nav ul li a {
color: rgb(92, 156, 92);
text-decoration: none;
font-size: 18px;
font-weight: 500;
padding: 8px 15px;
border-radius: 5px;
letter-spacing: 1px;
transition: all 0.3s ease;
}
nav ul li a.active,
nav ul li a:hover {
color: teal;
background-color: white;
}
nav .menu-btn i {
color: #fff;
font-size: 22px;
cursor: pointer;
display: none;
}
input[type="checkbox"] {
display: none;
}
#media (max-width: 1000px) {
nav {
padding: 0 40px 0 50px;
}
}
#media (max-width: 920px) {
nav .menu-btn i {
display: block;
}
#click:checked~.menu-btn i:before {
content: "\f00d";
}
nav ul {
position: fixed;
top: 80px;
left: -100%;
z-index: 9999; /** ADDED **/
height: 100vh;
width: 100%;
text-align: center;
display: block;
transition: all 0.3s ease;
background-color: #2f2f42; /** ADDED **/
}
#click:checked~ul {
left: 0;
}
nav ul li {
width: 100%;
margin: 40px 0;
}
nav ul li a {
width: 100%;
margin-left: -100%;
display: block;
font-size: 20px;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#click:checked~ul li a {
margin-left: 0px;
}
nav ul li a.active,
nav ul li a:hover {
background: none;
color: teal;
}
}
.content {
position: relative;
background-color: #131314;
color: whitesmoke;
border: 5px solid grey;
border-radius: 12px;
width: auto;
height: 50rem;
margin-top: 1vw;
margin-left: 4vw;
margin-right: 4vw;
font-weight: bolder;
}
#media (max-width: 920px) {
.content {
display: block;
}
}
#media (max-width: 920px) {
.content #bor,
.det,
.clk {
display: block;
}
}
.bor {
justify-content: center;
text-align: center;
border-bottom: 0.7vw solid white;
}
.det {
display: inline-block;
margin-left: 1vw;
text-align: left;
border-bottom: 0.6vw solid whitesmoke;
}
.clk {
float: right;
width: fit-content;
height: fit-content;
margin-right: 1vw;
}
h2 {
box-sizing: border-box;
padding: 0.6vw;
margin: 0.8vw 0.8vw 0.8vw 0.8vw;
background-color: rgb(64, 80, 113);
text-align: left
}
#exp {
padding: 0.8vw;
margin: 0.8vw 0.8vw 0.8vw 1.9vw;
text-align: left;
}
footer {
background-color: rgb(104, 99, 25);
color: black;
margin: 15px;
padding: 15px;
border-radius: 8px;
}
#foo {
text-align: center;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navigation Menu</title>
</head>
<body>
<nav>
<div class="logo">Logo img</div>
<input type="checkbox" id="click">
<label for="click" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Services</li>
<li>About</li>
</ul>
</nav>
<div class="content">
<p class="bor"> this is content heading <br>
</p><br>
<span class="det">this is content side</span> <button class="clk">Watch</button><br><br>
<span class="det">this is content side</span><button class="clk">Watch</button><br><br><br>
<h2>this is demo</h2>
<p id="exp">this is content end</p>
</div>
<div id="foo">
<footer>
<p>Copyright © company 2022<br><br> All Rights Reserved</p>
</footer>
</div>
</body>
</html>
I am currently trying to make a website. However, the problem that I am getting is that when I minimize the browser, Yes, it is being responsive, but the text is going over the other components on the website and I am unsure how to work around this issue as I am quite stumped at this error.
Image for more clarification:
Web error
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- font awesome cdn link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="https://unpkg.com/swiper#7/swiper-bundle.min.css" />
<link rel="stylesheet" href="jason.css">
</head>
<body>
<nav>
<div class="logo">Revolutionary Fitness</div>
<ul>
<div class="items">
<li>Home</li>
<li>Classes</li>
<li>Products</li>
<li>Login</li>
<li>Feedback</li>
</div>
</ul>
</nav>
<div class="background">
<div class="overlay">
<h3>Classes</h3>
<p>Insert Something Here...</p>
</div>
</div>
<div class="main">
<h1>Classes, coaches and community</h1>
<div class="main text">
<p>At Virgin Active, we do health and fitness differently. We have expertly crafted exercise experiences
that are the perfect blend of intelligent programming and feel-good movement. We've got everything from
Yoga to HIIT, so you can move your body any
way you want.
</p>
</div>
</div>
<section class="no.1" id="no.1">
<div class="section">
<img src="Yoga.jpg" alt="Yoga">
<div class="ClassText">
<h1>Yoga</h1>
<p>
Choose from Classes with dynamism,energy and athleticism, to an authentic and peaceful experience.
<br><br>
Classes include: Align,Flow and Calm SkyPark Yoga
<br><br>
Sign Up<span> to book this class</span>
</p>
</div>
</div>
</section>
<footer class="footer">
<div class="social">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-whatsapp"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
<ul class="list">
<li>About Us</li>
<li>Contact Us</li>
<li>FAQs</li>
</ul>
<p class="copyright">
<small>©2022 Revolutionary Fitness</small>
</p>
</footer>
</body>
</html>
Css:
#import url("https://fonts.googleapis.com/css2?family=Nunito:wght#200;300;400;600&display=swap");
* {
font-family: 'Nunito', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
background: #1b1b1b;
}
nav:after {
content: '';
clear: both;
display: table;
}
nav .logo {
float: left;
color: white;
font-size: 27px;
line-height: 70px;
padding-left: 60px;
}
nav ul {
display: flex;
justify-content: center;
align-items: center;
list-style: none;
float: right;
margin-right: 40px;
}
nav ul li {
display: inline-block;
background: #1b1b1b;
margin: 0 5px;
}
nav ul li a {
color: white;
text-decoration: none;
line-height: 70px;
font-size: 18px;
padding: 8px 15px;
}
nav ul li a:hover {
color: cyan;
}
nav ul ul li a:hover {
color: cyan;
box-shadow: none;
}
nav ul ul {
position: absolute;
top: 90px;
opacity: 0;
visibility: hidden;
transition: top .3s;
}
.background {
background-color: #212529;
width: 100%;
height: 200px;
position: relative;
/* USE FLEXBOX */
display: flex;
align-items: center;
justify-content: flex-start;
/* ADD SOME PADDING FOR BETTER UI */
padding-inline: 16px; /* LEFT and Right */
}
.overlay {
height: 100%;
color: white;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
position: relative;
}
.overlay h3 {
margin-bottom: 20px;
color: crimson;
font-size: 20px;
}
.overlay p {
font-size: 35px;
}
.main h1 {
display: flex;
text-align: center;
justify-content: center;
margin-top: 20px;
font-size: 50px;
}
.text {
width: 50%;
height: 50px;
padding-top: 20px;
white-space: initial;
margin: 0 auto;
word-wrap: break-word;
}
body {
margin: 0;
font-family: sans-serif;
}
.section {
background-color: #F5F5F5;
display: flex;
justify-content: space-between;
padding: 40px;
width: 80%;
margin-top: 50px;
float: left;
}
.section img {
height: 250px;
}
.section h1 {
margin-left: 100px;
color: black;
}
.section p {
margin-left: 100px;
width: 55%;
height: 50px;
white-space: initial;
margin-left: 100px;
margin-top: 20px;
word-wrap: break-word;
}
.footer {
background-color: #000;
padding: 40px;
clear: both;
}
.footer .social {
text-align: center;
padding-bottom: 25px;
color: #4b4c4d;
}
.footer .social a {
display: inline-block;
height: 40px;
width: 40px;
background: #424242;
margin: 0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: #ffffff;
transition: all 0.5s ease;
}
.footer .social a:hover {
color: #24262b;
background-color: #ffffff;
}
.footer ul {
margin-top: 0;
padding: 0;
list-style: none;
font-size: 18px;
line-height: 1.6;
margin-bottom: 0;
text-align: center;
}
.footer ul li a {
color: #fff;
text-decoration: none;
}
.footer ul li {
display: inline-block;
padding: 0 15px;
}
.footer .copyright {
margin-top: 15px;
text-align: center;
font-size: 20px;
color: #fff;
}
you can use css media query create responsive web page.
#media only screen and (min-width: 768px) {
.overlay h3 {
font-size: 16px;
}
.overlay p {
font-size: 25px;
}
}
#media only screen and (min-width: 1200px) {
.overlay h3 {
font-size: 22px;
}
.overlay p {
font-size: 40px;
}
}
Another way that is not recommended using viewport width and height
.overlay p {
font-size: 1.5vw;
}
So I am new to web development and was trying to practice by making a portfolio for myself but I ran into a slight issue. It seems that when a set margin-top to a divider, my navigation bar shifts a bit to the right.
So for some reason, when I apply "margin-top: 300px;" to the ".header" class, my navigation bar shifts to the right a bit.
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&display=swap');
* {
font-family: 'Poppins', 'sans-serif';
padding: 0px;
margin: 0px;
box-sizing: border-box;
scroll-padding-top: 1rem;
scroll-behavior: smooth;
list-style: none;
text-decoration: none;
}
body {
animation: fadeInAnimation ease 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
#keyframes fadeInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
align-items: center;
padding: 5px 20px 5px 20px;
z-index: 100;
background-color: white;
margin: 10px 25px 10px 10px;
cursor: pointer;
}
.nav-header {
color: var(--text-color);
}
.nav-header h2 {
font-weight: 500;
margin: 0;
padding: 0;
}
nav {
flex: 1;
text-align: right;
}
nav ul {
display: inline-block;
list-style-type: none;
}
nav ul li {
display: inline-block;
margin-right: 20px;
font-size: 18px;
font-weight: 500;
}
nav ul li a {
color: var(--text-color);
transition-duration: 0.7s;
}
nav ul li a:hover {
color: var(--text-highlight)
}
nav ul li a:active {
color: var(--text-active);
}
nav ul li a span {
color: var(--text-active);
}
:root {
--text-color: #000000;
--text-highlight: #D3D3D3;
--text-active: #6b84d1;
}
.container {
max-width: 1300px;
margin: auto;
padding-left: 25px;
padding-right: 25px;
}
.header {
text-align: center;
margin-top: 300px;
;
}
.header h1 {
color: rgb(255, 100, 0);
font-size: 64px;
}
.header p {
font-weight: 500;
font-size: 36px;
}
.header hr {
margin-top: 225px;
}
<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>Kelvin Kuoch | Portfolio</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/d4a6ce6cea.js" crossorigin="anonymous"></script>
<script>
function scrollToTop() {
window.scrollTo(0, 0);
}
</script>
</head>
<body>
<div class="container">
<div class="navbar">
<a class="nav-header">
<h2 onclick="scrollToTop()">Kelvin Kuoch</h2>
</a>
<nav>
<ul>
<li><a><span onclick="scrollToTop()" class="homeBtn">Home</a></span>
</li>
<li>Work</li>
<li>About</li>
</ul>
</nav>
<hr id="nav-div">
</div>
<div class="header">
<h1>Hello!</h1>
<h2>I'm Kelvin, a <br> highschool student <br> based in Australia.</h2>
<hr>
</div>
<div class="mid-container" id="my-work">
<h1>My Work</h1>
</div>
</div>
</body>
I think there is problem with your .navbar class; when I remove the extra margin it showing well:
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
align-items: center;
padding: 5px 20px 5px 20px;
z-index: 100;
background-color: white;
margin: 10px 25px 10px 0px;
cursor: pointer;
}
Before removing the margin:
After removing it is fine now:
But I suggest you to use Bootstrap navigation which are fully responsive.
I'm wondering why my id="subnavigation" won't center vertical, I was using top: xxpx; but since most monitors are different, I have to get it in the vertical center for every monitor.
I tried using:
justify-content: center
align-items: center
line-height: normal
vertical align-middle & also top: 50%,
but it won't move into the right spot, any recommendations ?
HTML:
<!DOCTYPE html>
<html>
<head>
<title>FootDiver!</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style/style.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Shadows+Into+Light"
rel="stylesheet">
</head>
<body>
<header>
<nav id="mainnavigation">
<ul>
<li>Startseite</li>
<li>Über uns</li>
<li>Join Us!
<ul>
<li>LogIn</li>
<li>Registrierung</li>
</ul>
</li>
<li>Forum</li>
<li>FAQ</li>
<li>Newsletter</li>
</ul>
</nav>
</header>
<div id="subnavigation">
<nav id="sub">
<ul>
<li>Olympia</li>
<li>Beef&Beats</li>
<li>Gantero</li>
<li>La Roma</li>
<li>Wok Paradis</li>
</ul>
</nav>
</div>
<footer>
<nav id="foot">
<ul>
<li>Impressum</li>
<li>Datenschutz</li>
<li>AGB</li>
<li>Kontakt</li>
<li>Social Media</li>
<li>Intern</li>
</ul>
</nav>
</footer>
<div id="main">
<h1>Herzlich Wilkommen!</h1>
</div>
</body>
</html>
CSS: (from line 95 to 116)
body, html {
background: #F4A460;
margin: 0;
padding: 0;
font-size: 62.5%;
}
#media screen and (min-width: 1200px) {
html {
font-size: 63%;
}
}
header {
background: #8A4B08;
position: fixed;
top: 0;
width: 100%;
text-align: center;
transition: 200ms all;
height: 7rem;
}
header nav#normal {
color: #000000;
display: inline-block;
}
header nav#normal ul {
margin: 0;
padding: 0;
float: left;
list-style: none;
position: relative;
transition: all 300ms;
}
header nav#normal ul li {
margin: 0;
padding: 0;
float: left;
list-style: none;
position: relative;
transition: all 300ms;
}
header nav#normal ul li a {
display: inline-block;
padding: 2.17rem;
float: left;
min-width: 12rem;
text-align: center;
font-size: 2rem;
color: #000000;
margin: 0 1px 0 0;
text-decoration: none;
background: #deb887;
font-weight: 300;
transition: all 300ms;
font-family: 'Source Sans Pro', sans-serif;
}
header nav#normal ul li:hover > a {
background: #FFD39B;
}
header nav#normal ul li ul {
overflow: hidden;
position: absolute;
top: 100%;
left: 0;
width: 100%;
transition: 300ms all;
max-height: 0;
}
header nav#normal ul li:hover > ul {
max-height: 900px;
}
header nav#normal ul li ul li {
border-bottom: 1px solid #8A4B08;
}
div#subnavigation {
background: #8A4B08;
position: fixed;
top: 0;
width: 166px;
text-align: center;
transition: 200ms all;
height: 1200px;
}
div#subnavigation nav#sub {
display: inline-block;
}
div#subnavigation nav#sub ul {
margin: auto;
padding: 0;
float: left;
list-style: none;
position: relative;
top: 375px;
transition: all 300ms;
}
div#subnavigation nav#sub ul li {
margin: 0;
padding: 0;
float: left;
list-style: none;
position: relative;
transition: all 300ms;
}
div#subnavigation nav#sub ul li a {
display: inline-block;
padding: 2.17rem;
float: left;
min-width: 12rem;
text-align: center;
font-size: 2rem;
color: #000000;
margin: 0 1px 0 0;
text-decoration: none;
background: #deb887;
font-weight: 300;
transition: all 300ms;
font-family: 'Source Sans Pro', sans-serif;
border-bottom: 1px solid #8A4B08;
vertical-align: middle;
}
div#subnavigation nav#sub ul li:hover > a {
background: #FFD39B;
}
footer {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 7rem;
background-color: #8A4B08;
text-align: center;
}
footer nav#foot {
color: #000000;
display: inline-block;
}
footer nav#foot ul {
margin: 0;
padding: 0;
float: left;
list-style: none;
position: relative;
transition: all 300ms;
}
footer nav#foot ul li {
margin: 0;
padding: 0;
float: left;
list-style: none;
position: relative;
transition: all 300ms;
}
footer nav#foot ul li a {
display: inline-block;
padding: 2.17rem;
float: left;
min-width: 12rem;
text-align: center;
font-size: 2rem;
color: #000000;
margin: 0 1px 0 0;
text-decoration: none;
background: #deb887;
font-weight: 300;
transition: all 300ms;
font-family: 'Source Sans Pro', sans-serif;
}
footer nav#foot ul li:hover > a {
background: #FFD39B;
}
div#main {
text-align: left;
margin-left: 25rem;
margin-top: 15rem;
}
div#main h1 {
font-size: 6rem;
font-family: 'Shadows Into Light', cursive;
}
Try adding
display: flex;
align-items: center;
to the parent of the element you want to center vertically. justify-content: center only works when you use flex
Example