Issue
I was following a YouTube tutorial on how to make a responsive navigation bar on HTML using CSS and it was all going great until I tried to add text on the center of the screen and it appeared off to the left side of my screen (only when the window resolution was higher than 952px wide).I am quite new to CSS and everything I've tried to fix it can't seem to work.The code is below
* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
body {
font-family: montserrat;
}
nav {
background: #0082e6;
height: 80px;
width: 100%;
}
label.logo {
color: white;
font-size: 35px;
line-height: 80px;
padding: 100px;
font-weight: bold;
}
nav ul {
float: right;
margin-right: 20px;
}
nav ul li {
display: inline-block;
line-height: 80px;
margin: 0 5px;
}
nav ul li a {
color: white;
font-size: 17px;
padding: 7px 13px;
border-radius: 3px;
text-transform: uppercase;
}
a.active,
a:hover {
background: #1b9bff;
transition: .5s;
}
.checkbtn {
font-size: 30px;
color: white;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check {
display: none;
}
@media (max-width: 952px) {
label.logo {
font-size: 30px;
padding-left: 50px;
}
nav ul li a {
font-size: 16px;
}
}
@media (max-width: 858px) {
.checkbtn {
display: block;
}
ul {
position: fixed;
width: 100%;
height: 100vh;
background: #2c3e50;
top: 80px;
left: -100%;
text-align: center;
transition: all .5s;
}
nav ul li {
display: block;
}
nav ul li a {
font-size: 20px;
}
a:hover,
a.active {
background: none;
color: #0082e6;
}
#check:checked~ul {
left: 0;
}
}
section {
background: url(bg1.jpeg) no-repeat;
background-size: cover;
height: calc(100vh - 80px);
opacity: 20%;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<meta charset="utf-8">
<meta name="viewport" content="width=device-widht,initial-sclae=1.0">
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/.js" crossorigin="anonymous"></script>
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
<label class="logo">Air</label>
<ul>
<li><a href='home.html'>Home</a></li>
<li><a href='About.html'>About</a></li>
<li><a href='Flights.html'>Flights</a></li>
<li><a href='Contact.html'>Contact</a></li>
</ul>
</nav>
<section>
<h1 style="text-align:center;">test</h1>
</section>
Solution
Adding section { border: 1px solid transparent; }
also solves the problem.
See the snippet below.
* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
body {
font-family: montserrat;
}
nav {
background: #0082e6;
height: 80px;
width: 100%;
}
label.logo {
color: white;
font-size: 35px;
line-height: 80px;
padding: 100px;
font-weight: bold;
}
nav ul {
float: right;
margin-right: 20px;
}
nav ul li {
display: inline-block;
line-height: 80px;
margin: 0 5px;
}
nav ul li a {
color: white;
font-size: 17px;
padding: 7px 13px;
border-radius: 3px;
text-transform: uppercase;
}
a.active,
a:hover {
background: #1b9bff;
transition: .5s;
}
.checkbtn {
font-size: 30px;
color: white;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check {
display: none;
}
@media (max-width: 952px) {
label.logo {
font-size: 30px;
padding-left: 50px;
}
nav ul li a {
font-size: 16px;
}
}
@media (max-width: 858px) {
.checkbtn {
display: block;
}
ul {
position: fixed;
width: 100%;
height: 100vh;
background: #2c3e50;
top: 80px;
left: -100%;
text-align: center;
transition: all .5s;
}
nav ul li {
display: block;
}
nav ul li a {
font-size: 20px;
}
a:hover,
a.active {
background: none;
color: #0082e6;
}
#check:checked~ul {
left: 0;
}
}
section {
background: url(bg1.jpeg) no-repeat;
background-size: cover;
height: calc(100vh - 80px);
opacity: 20%;
border: 1px solid transparent;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<meta charset="utf-8">
<title>
Air
</title>
<meta name="viewport" content="width=device-widht,initial-sclae=1.0">
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/.js" crossorigin="anonymous"></script>
</head>
<body>
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
<label class="logo">Air</label>
<ul>
<li><a href='home.html'>Home</a></li>
<li><a href='About.html'>About</a></li>
<li><a href='Flights.html'>Flights</a></li>
<li><a href='Contact.html'>Contact</a></li>
</ul>
</nav>
<section>
<h1 style="text-align:center;">test</h1>
</section>
</body>
</html>
Answered By - Cervus camelopardalis
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.