I have some issues, when I put some paragraph or anything like that... the navbar covered up. can someone help me what actually wrong with my code? thanks...
this is my html Code
<!DOCTYPE html>
<html>
<head>
<title>SA-MR</title>
<link rel="stylesheet" type="text/css" href="css/SAMRnavbar.css">
<meta charset="utf-8">
</head>
<body>
<!-- Navbar -->
<nav>
<div class="wrap">
<div class="title">
<div class="kotakpersegi">
<a href="">
<img class="logo" src="img/logo.png" width="180" height="50">
</a>
</div>
</div>
<div class="tblmenubox">
<div class="togel tblmenu">
</div>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Contact</li>
<li>Service</li>
<li>Fiture</li>
<li>Maps</li>
</ul>
</div>
</div>
</nav>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(".togel.tblmenu").click(function () {
$(".menu").toggleClass("sh");
});
</script>
<!-- Navbar -->
</body>
</html>
this my CSS code.
body {
margin: 0;
background: #eff2f7;
}
a {
left: -50;
text-decoration: none;
color: white;
display: block;
transition: 0.3s;
font-size: 20px
}
a:hover {
transition: 0.3s;
}
nav {
position: fixed;
top: 0;
left: 20px;
right: 0;
background: #1e77b0;
font-family: Palatino Linotype;
}
.title {
display: inline-block;
float: left;
line-height: 50px;
}
.menu {
display: inline-block;
float: left;
}
.menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu ul li {
display: inline-block;
}
.menu ul li a {
padding: 0 50px;
display: block;
line-height: 50px;
}
.menu li:hover{
background-color: #009cff;
}
.wrap{
width: 95%;
margin: 0 auto;
}
.tblmenubox {
display: inline-block;
float: right;
line-height: 50px;
}
.tblmenu {
display: block;
position: absolute;
width: 25px;
height: 25px;
background: #1e77b0;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
}
.tblmenubox{
display: none;
visibility: hidden;
}
.kotakpersegi {
display: block;
position: absolute;
left: -40px;
width: 250px;
height: 50px;
background: #009cff;
transform: translateY(-50%);
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
-o- transform: skew(30deg);
transform: skew(30deg)
}
.logo {
position: absolute;
left: 50px;
}
#media screen and (max-width:1000px){
.kotakpersegi {
width: 150%;
}
.logo {
position: absolute;
float: center;
left: 25%;
}
.menu{
display: none;
}
.tblmenubox{
display: block;
visibility: visible;
}
.menu.sh {
display: block;
position: absolute;
top: 50px;
background: #1e77b0;
width: 100%;
left: 0;
}
.menu a:hover {
color: #eff2f7;
background: #009cff;
}
.menu ul li {
display: block;
text-align: center;
}
}
I have been try to add some padding top to 65px like another but, i doesn't work. i hope i can found the solution, thanks guys...
The problem is that position: fixed, just like position: absolute, pulls the element out of the document flow, so the area it takes up no longer occupies any space. You can see this in the example below, where the first paragraph is occluded by the <nav />:
$(".togel.tblmenu").click(function() {
$(".menu").toggleClass("sh");
});
body {
margin: 0;
background: #eff2f7;
}
a {
left: -50;
text-decoration: none;
color: white;
display: block;
transition: 0.3s;
font-size: 20px
}
a:hover {
transition: 0.3s;
}
nav {
position: fixed;
top: 0;
left: 20px;
right: 0;
background: #1e77b0;
font-family: Palatino Linotype;
}
.title {
display: inline-block;
float: left;
line-height: 50px;
}
.menu {
display: inline-block;
float: left;
}
.menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu ul li {
display: inline-block;
}
.menu ul li a {
padding: 0 50px;
display: block;
line-height: 50px;
}
.menu li:hover {
background-color: #009cff;
}
.wrap {
width: 95%;
margin: 0 auto;
}
.tblmenubox {
display: inline-block;
float: right;
line-height: 50px;
}
.tblmenu {
display: block;
position: absolute;
width: 25px;
height: 25px;
background: #1e77b0;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
}
.tblmenubox {
display: none;
visibility: hidden;
}
.kotakpersegi {
display: block;
position: absolute;
left: -40px;
width: 250px;
height: 50px;
background: #009cff;
transform: translateY(-50%);
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
-o- transform: skew(30deg);
transform: skew(30deg)
}
.logo {
position: absolute;
left: 50px;
}
#media screen and (max-width:1000px) {
.kotakpersegi {
width: 150%;
}
.logo {
position: absolute;
float: center;
left: 25%;
}
.menu {
display: none;
}
.tblmenubox {
display: block;
visibility: visible;
}
.menu.sh {
display: block;
position: absolute;
top: 50px;
background: #1e77b0;
width: 100%;
left: 0;
}
.menu a:hover {
color: #eff2f7;
background: #009cff;
}
.menu ul li {
display: block;
text-align: center;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>SA-MR</title>
<link rel="stylesheet" type="text/css" href="css/SAMRnavbar.css">
<meta charset="utf-8">
</head>
<body>
<!-- Navbar -->
<nav>
<div class="wrap">
<div class="title">
<div class="kotakpersegi">
<a href="">
<img class="logo" src="img/logo.png" width="180" height="50">
</a>
</div>
</div>
<div class="tblmenubox">
<div class="togel tblmenu">
</div>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Contact</li>
<li>Service</li>
<li>Fiture</li>
<li>Maps</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<div>
<p>ONE: The quick brown fox jumped over the lazy dog.</p>
<p>TWO: Mary's violet eyes made John stay up nights proposing.</p>
<p>THREE: Roy G Biv</p>
<p>FOUR: Please Excuse My Dear Aunt Sally</p>
</div>
</body>
</html>
If the position: fixed approach is your desired approach, you could put a wrapper around all content that follows it, and give it a margin-top that is the same height of the <nav /> (if this is a known, fixed quantity):
$(".togel.tblmenu").click(function() {
$(".menu").toggleClass("sh");
});
body {
margin: 0;
background: #eff2f7;
}
a {
left: -50;
text-decoration: none;
color: white;
display: block;
transition: 0.3s;
font-size: 20px
}
a:hover {
transition: 0.3s;
}
nav {
position: fixed;
top: 0;
left: 20px;
right: 0;
background: #1e77b0;
font-family: Palatino Linotype;
}
.title {
display: inline-block;
float: left;
line-height: 50px;
}
.menu {
display: inline-block;
float: left;
}
.menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu ul li {
display: inline-block;
}
.menu ul li a {
padding: 0 50px;
display: block;
line-height: 50px;
}
.menu li:hover {
background-color: #009cff;
}
.wrap {
width: 95%;
margin: 0 auto;
}
.tblmenubox {
display: inline-block;
float: right;
line-height: 50px;
}
.tblmenu {
display: block;
position: absolute;
width: 25px;
height: 25px;
background: #1e77b0;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
}
.tblmenubox {
display: none;
visibility: hidden;
}
.kotakpersegi {
display: block;
position: absolute;
left: -40px;
width: 250px;
height: 50px;
background: #009cff;
transform: translateY(-50%);
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
-o- transform: skew(30deg);
transform: skew(30deg)
}
.logo {
position: absolute;
left: 50px;
}
.content-wrapper { /* added a top margin */
margin-top: 50px; /* We know this is the height because it is applied specifically in CSS */
}
#media screen and (max-width:1000px) {
.kotakpersegi {
width: 150%;
}
.logo {
position: absolute;
float: center;
left: 25%;
}
.menu {
display: none;
}
.tblmenubox {
display: block;
visibility: visible;
}
.menu.sh {
display: block;
position: absolute;
top: 50px;
background: #1e77b0;
width: 100%;
left: 0;
}
.menu a:hover {
color: #eff2f7;
background: #009cff;
}
.menu ul li {
display: block;
text-align: center;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>SA-MR</title>
<link rel="stylesheet" type="text/css" href="css/SAMRnavbar.css">
<meta charset="utf-8">
</head>
<body>
<!-- Navbar -->
<nav>
<div class="wrap">
<div class="title">
<div class="kotakpersegi">
<a href="">
<img class="logo" src="img/logo.png" width="180" height="50">
</a>
</div>
</div>
<div class="tblmenubox">
<div class="togel tblmenu">
</div>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Contact</li>
<li>Service</li>
<li>Fiture</li>
<li>Maps</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<div class="content-wrapper">
<p>ONE: The quick brown fox jumped over the lazy dog.</p>
<p>TWO: Mary's violet eyes made John stay up nights proposing.</p>
<p>THREE: Roy G Biv</p>
<p>FOUR: Please Excuse My Dear Aunt Sally</p>
<p>FIVE</p>
<p>SIX</p>
<p>SEVEN</p>
<p>EIGHT</p>
<p>NINE</p>
<p>TEN</p>
<p>ELEVEN</p>
<p>TWELVE</p>
<p>FOURTEEN (FOR LUCK)</p>
</div>
</body>
</html>
As you can see, the content still scrolls fine behind the <nav />. There are other ways to achieve this, using flex or grid, but for the position: fixed approach this will work.
Related
I have any issue, i have been make some footer and when i test my new footer, the Footer covered the content and navbar. i still figure it out how to solve this problem. hope i can get some answer at here...
$(".togel.tblmenu").click(function () {
$(".menu").toggleClass("sh");
});
body {
min-height: 400px;
margin-bottom: 100px;
clear: both;
background: #eff2f7;
}
a {
left: -50;
text-decoration: none;
color: white;
display: block;
transition: 0.3s;
font-size: 20px
}
a:hover {
transition: 0.3s;
}
nav {
position: fixed;
top: 0;
left: 20px;
right: 0;
background: #1e77b0;
font-family: Palatino Linotype;
}
.title {
display: inline-block;
float: left;
line-height: 50px;
}
.menu {
display: inline-block;
float: left;
}
.menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu ul li {
display: inline-block;
}
.menu ul li a {
padding: 0 50px;
display: block;
line-height: 50px;
}
.menu li:hover {
background-color: #009cff;
}
.wrap {
width: 95%;
margin: 0 auto;
}
.tblmenubox {
display: inline-block;
float: right;
line-height: 50px;
}
.tblmenu {
display: block;
position: absolute;
width: 25px;
height: 25px;
background: #1e77b0;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
}
.tblmenubox {
display: none;
visibility: hidden;
}
.kotakpersegi {
display: block;
position: absolute;
left: -40px;
width: 250px;
height: 50px;
background: #009cff;
transform: translateY(-50%);
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
-o- transform: skew(30deg);
transform: skew(30deg)
}
.logo {
position: absolute;
left: 50px;
}
#media screen and (max-width:1000px) {
.kotakpersegi {
width: 150%;
}
.logo {
position: absolute;
float: center;
left: 25%;
}
.menu {
display: none;
}
.tblmenubox {
display: block;
visibility: visible;
}
.menu.sh {
display: block;
position: absolute;
top: 50px;
background: #1e77b0;
width: 100%;
left: 0;
}
.menu a:hover {
color: #eff2f7;
background: #009cff;
}
.menu ul li {
display: block;
text-align: center;
}
}
/*navbar code*/
.footer-bottom {
text-align: center;
background-color: #1e77b0;
width: 100%;
position: relative;
bottom: 50%;
}
.Footer-header h3 {
font-family: 'Roboto Condensed', sans-serif;
color: white;
margin: 20px;
text-align: left;
}
.Footer-Sponsored img {
height: 128px;
margin: 10px;
}
hr {
margin: 20px;
border: 0.5px solid lightblue;
}
.hr1 {
margin: 40px;
}
.Footer-deep {
margin: 30px;
}
.Footer-deep img {
height: 30px;
margin: 10px;
}
.Footer-deep h3 {
color: white;
font-family: 'Garamond', sans-serif;
font-size: 100%;
}
.content-wrapper { /* added a top margin */
margin-top: 50px; /* We know this is the height because it is applied specifically in CSS */
padding: 30px;
}
.content-wrapper h1 {
font-family: Palatino Linotype;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- font -->
<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=Roboto+Condensed:ital,wght#1,300&display=swap" rel="stylesheet">
<!-- Navbar -->
<nav>
<div class="wrap">
<div class="title">
<div class="kotakpersegi">
<a href="">
<img class="logo" src="img/logo.png" width="180" height="50">
</a>
</div>
</div>
<div class="tblmenubox">
<div class="togel tblmenu">
</div>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Contact</li>
<li>Service</li>
<li>Fiture</li>
<li>Maps</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<div class="content-wrapper">
<h1>San Andreas Motor Racing Grand Prix</h1>
</div>
<!-- content stop here -->
<footer class="footer-bottom">
<div class="Footer-header">
<h2>San Andreas Motor Racing</h2>
<hr class="Light-line">
<h3>Sponsored By</h3>
</div>
<div class="Footer-Sponsored">
<img src="Sponsored/1.jpg">
<img src="Sponsored/2.png">
<img src="Sponsored/3.jpg">
</div>
<hr class="hr1">
<div class="Footer-deep">
<img src="img/logo.png" align="left">
<h3 align="right">San Andreas Motor Racing Championship</h3>
</div>
</footer>
i have tried to change the position to relative absolute or whatever but it make me found another problem. maybee some one can help me to fix this problem, please.... i have been try to solve his problem by googling for a day and still doesn't have any clue about this problem...
Just add z-index:10 to nav css style
body {
min-height: 400px;
margin-bottom: 100px;
clear: both;
background: #eff2f7;
}
a {
left: -50;
text-decoration: none;
color: white;
display: block;
transition: 0.3s;
font-size: 20px
}
a:hover {
transition: 0.3s;
}
nav {
position: fixed;
top: 0;
left: 20px;
right: 0;
background: #1e77b0;
font-family: Palatino Linotype;
z-index:10;
}
.title {
display: inline-block;
float: left;
line-height: 50px;
}
.menu {
display: inline-block;
float: left;
}
.menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu ul li {
display: inline-block;
}
.menu ul li a {
padding: 0 50px;
display: block;
line-height: 50px;
}
.menu li:hover {
background-color: #009cff;
}
.wrap {
width: 95%;
margin: 0 auto;
}
.tblmenubox {
display: inline-block;
float: right;
line-height: 50px;
}
.tblmenu {
display: block;
position: absolute;
width: 25px;
height: 25px;
background: #1e77b0;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
}
.tblmenubox {
display: none;
visibility: hidden;
}
.kotakpersegi {
display: block;
position: absolute;
left: -40px;
width: 250px;
height: 50px;
background: #009cff;
transform: translateY(-50%);
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
-o- transform: skew(30deg);
transform: skew(30deg)
}
.logo {
position: absolute;
left: 50px;
}
#media screen and (max-width:1000px) {
.kotakpersegi {
width: 150%;
}
.logo {
position: absolute;
float: center;
left: 25%;
}
.menu {
display: none;
}
.tblmenubox {
display: block;
visibility: visible;
}
.menu.sh {
display: block;
position: absolute;
top: 50px;
background: #1e77b0;
width: 100%;
left: 0;
}
.menu a:hover {
color: #eff2f7;
background: #009cff;
}
.menu ul li {
display: block;
text-align: center;
}
}
/*navbar code*/
.footer-bottom {
text-align: center;
background-color: #1e77b0;
width: 100%;
position: relative;
bottom: 50%;
}
.Footer-header h3 {
font-family: 'Roboto Condensed', sans-serif;
color: white;
margin: 20px;
text-align: left;
}
.Footer-Sponsored img {
height: 128px;
margin: 10px;
}
hr {
margin: 20px;
border: 0.5px solid lightblue;
}
.hr1 {
margin: 40px;
}
.Footer-deep {
margin: 30px;
}
.Footer-deep img {
height: 30px;
margin: 10px;
}
.Footer-deep h3 {
color: white;
font-family: 'Garamond', sans-serif;
font-size: 100%;
}
.content-wrapper { /* added a top margin */
margin-top: 50px; /* We know this is the height because it is applied specifically in CSS */
padding: 30px;
}
.content-wrapper h1 {
font-family: Palatino Linotype;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>SA-MR</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS document -->
<link rel="stylesheet" type="text/css" href="css/SAMRnavbar.css">
<meta charset="utf-8">
<!-- font -->
<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=Roboto+Condensed:ital,wght#1,300&display=swap" rel="stylesheet">
</head>
<body>
<!-- Navbar -->
<nav>
<div class="wrap">
<div class="title">
<div class="kotakpersegi">
<a href="">
<img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/1175px-Test-Logo.svg.png" width="180" height="50">
</a>
</div>
</div>
<div class="tblmenubox">
<div class="togel tblmenu">
</div>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Contact</li>
<li>Service</li>
<li>Fiture</li>
<li>Maps</li>
</ul>
</div>
</div>
</nav>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(".togel.tblmenu").click(function () {
$(".menu").toggleClass("sh");
});
</script>
<!-- Navbar -->
<div class="content-wrapper">
<h1>San Andreas Motor Racing Grand Prix</h1>
</div>
<!-- content stop here -->
<footer class="footer-bottom">
<div class="Footer-header">
<h2>San Andreas Motor Racing</h2>
<hr class="Light-line">
<h3>Sponsored By</h3>
</div>
<div class="Footer-Sponsored">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/1175px-Test-Logo.svg.png">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/1175px-Test-Logo.svg.png">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/1175px-Test-Logo.svg.png">
</div>
<hr class="hr1">
<div class="Footer-deep">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/1175px-Test-Logo.svg.png" align="left">
<h3 align="right">San Andreas Motor Racing Championship</h3>
</div>
</footer>
</body>
</html>
This can be resolved by adding 'z-index: -1;' to your footer-bottom class.
Learn more about z-indexing here
In the most basic cases, HTML pages can be considered two-dimensional, because text, images, and other elements are arranged on the page without overlapping. In this case, there is a single rendering flow, and all elements are aware of the space taken by others. The z-index attribute lets you adjust the order of the layering of objects when rendering content.
In addition to their horizontal and vertical positions, boxes lie along a "z-axis" and are formatted one on top of the other. Z-axis positions are particularly relevant when boxes overlap visually.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index
You should change the z-order of your elements.
Set z-index of footer less than z-index of the navbar (enough set z-index: -1 for footer)
More info:
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
Good day guys,
As you can see in the image they are stick to each other in desktop view, however on the real code I wasn't been able to do it, I tried to use the overflow but the result is not what I expected. Heres my code https://jsfiddle.net/Jury/0bqpLw1h/1/.. Thank you so much for your help
<body>
<div class="body">
<header>
<div class="menu-toggle" id="hamburger">
<i class="fas fa-bars"></i>
</div>
<div class="overlay"></div>
<nav>
<img src="img/logo2.png" alt="Logo" class="logo">
<ul>
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<div class="menu">
Contact
Info
</div>
</nav>
</header>
<div class="content">
<h1 class="possible">Everything is Possible</h1>
<div class="circle">
</div>
</div>
<div class="about">
<h1>Helow</h1>
</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 10px;
}
a {
text-decoration: none;
}
.body {
height: 100vh;
background-image: linear-gradient(
rgba(0, 31, 63, 0.958),
rgba(0, 31, 63, 0.958) )
,url(img/bgmain.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.overlay{
background-color: rgba(0,0,0,.95);
position: fixed;
right: 0;
left: 0;
top: 0;
bottom: 0;
transition: opacity 650ms;
transform: scale(0);
opacity: 0;
display: none;
}
/* Hamburger Menu */
.menu-toggle {
position: fixed;
top: 2.5rem;
right: 2.5rem;
color: #eeeeee;
font-size: 3rem;
cursor: pointer;
z-index: 1000;
display: none;
}
/* End of Hamburger Menu */
/* Navagation Link */
header {
font-family: "Raleway", sans-serif;
position: relative;
width: 100%;
height: 10rem;
z-index: 2;
}
nav {
/* padding-top: 5rem; */
display: flex;
height: 100%;
justify-content: space-between;
align-items: center;
text-transform: uppercase;
font-size: 1.4rem;
}
nav img {
height: 7rem;
margin: 0 0 0 12rem;
}
nav ul {
display: flex;
}
nav ul li {
list-style: none;
}
nav ul li a {
font-weight: 900;
font-size: 1.4rem;
padding: 1rem 0;
margin: 0 1rem;
position: relative;
color: #eee;
}
.menu {
margin: 0 12rem 0 0;
}
.menu a {
font-size: 1rem;
margin: 0 .1rem;
outline: none;
}
.menu a:last-child{
margin-right: 0;
}
nav ul li a::before,
nav ul li a::after {
content: '';
position: absolute;
width: 100%;
height: 2px;
background-color: #f4511e;
left: 0;
transform: scaleX(0);
transition: all .5s;
}
nav ul li a::before{
top: 0;
transform-origin: left;
}
nav ul li a::after{
bottom: 0;
transform-origin: right;
}
nav ul li a:hover::before,
nav ul li a:hover::after{
transform: scaleX(1);
}
.btn {
border: none;
border-radius: 30px;
background-color: #f4511e;
color: #fff;
font-size: 1rem;
font-weight: bold;
text-align: center;
padding: 9px;
width: 70px;
text-transform: uppercase;
}
.btninfo{
padding: 9px 19px;
}
/* End of Navagation Menu */
/* Content of the Website */
/* .content {
height: 100vh;
overflow: hidden;
} */
.possible {
color: #fff;
text-align: center;
letter-spacing: 10px;
text-transform: uppercase;
padding-top: 6rem;
font-family: "Coiny", sans-serif;
font-size: 3.2rem;
}
.circle {
position: absolute;
border-radius: 50%;
width: 100%;
height: 50rem;
background-color: #6CA9A5;
z-index: 1;
margin: 0;
margin-top: -75%;
}
.about {
height: 100vh;
width:100%;
background-color: crimson;
z-index: 3;
position:absolute;
/*bottom : 0;*/
}
/* Media Queries for tablet and mobile */
#media screen and (max-width: 990px) {
.menu-toggle {
display: block;
}
nav {
display: none;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
height: 100vh;
text-align: center;
}
nav ul {
flex-direction: column;
}
nav ul li {
margin-top: 5rem;
}
nav ul li a {
margin 0;
font-size: 3rem;
}
nav ul li:first-child{
margin-top: 0;
}
.overlay.menu-open,
nav.menu-open{
display: flex;
transform: scale(1);
opacity: 1;
}
nav img {
height: 15rem;
margin: 0;
}
.menu {
margin-right: 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 href="https://fonts.googleapis.com/css?family=Raleway|Coiny|Roboto|Montserrat" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
<link rel="stylesheet" href="style.css">
<title>Jury Gregorio - Welcome</title>
</head>
<body>
<div class="body">
<header>
<div class="menu-toggle" id="hamburger">
<i class="fas fa-bars"></i>
</div>
<div class="overlay"></div>
<nav>
<img src="img/logo2.png" alt="Logo" class="logo">
<ul>
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<div class="menu">
Contact
Info
</div>
</nav>
</header>
<div class="content">
<h1 class="possible">Everything is Possible</h1>
<div class="circle">
</div>
</div>
<div class="about">
<h1>Helow</h1>
</div>
</div>
<script>
var open = document.getElementById('hamburger');
var changeIcon = true;
open.addEventListener("click", function(){
var overlay = document.querySelector('.overlay');
var nav = document.querySelector('nav');
var icon = document.querySelector('.menu-toggle i');
overlay.classList.toggle("menu-open");
nav.classList.toggle("menu-open");
if (changeIcon) {
icon.classList.remove("fa-bars");
icon.classList.add("fa-times");
changeIcon = false;
}
else {
icon.classList.remove("fa-times");
icon.classList.add("fa-bars");
changeIcon = true;
}
});
</script>
</body>
</html>
Small changes in the css can make the image like look. Just make a small change in .about. and this will work. output of the below code
.about {
position: absolute;
height: 100vh;
background-color: crimson;
z-index: 3;
width: 100%;
margin-top: -270px;
}
I have made some changes along with some brief explanation to the CSS file, in particular, the .content and .circle selector. Best viewed in desktop environment.
Fiddle
Just add this style before your media query also you check it on this fiddle https://jsfiddle.net/v8r463je/
.about {
position: absolute;
height: 100vh;
background-color: crimson;
z-index: 3;
width: 100%;
margin-top: -270px;
}
.content{
background-color: #0b2947;
}
/* Media Queries for tablet and mobile */
Output here
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 10px;
}
a {
text-decoration: none;
}
.body {
height: 100vh;
background-image: linear-gradient(
rgba(0, 31, 63, 0.958),
rgba(0, 31, 63, 0.958) )
,url(img/bgmain.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.overlay{
background-color: rgba(0,0,0,.95);
position: fixed;
right: 0;
left: 0;
top: 0;
bottom: 0;
transition: opacity 650ms;
transform: scale(0);
opacity: 0;
display: none;
}
/* Hamburger Menu */
.menu-toggle {
position: fixed;
top: 2.5rem;
right: 2.5rem;
color: #eeeeee;
font-size: 3rem;
cursor: pointer;
z-index: 1000;
display: none;
}
/* End of Hamburger Menu */
/* Navagation Link */
header {
font-family: "Raleway", sans-serif;
position: relative;
width: 100%;
height: 10rem;
z-index: 2;
}
nav {
/* padding-top: 5rem; */
display: flex;
height: 100%;
justify-content: space-between;
align-items: center;
text-transform: uppercase;
font-size: 1.4rem;
}
nav img {
height: 7rem;
margin: 0 0 0 12rem;
}
nav ul {
display: flex;
}
nav ul li {
list-style: none;
}
nav ul li a {
font-weight: 900;
font-size: 1.4rem;
padding: 1rem 0;
margin: 0 1rem;
position: relative;
color: #eee;
}
.menu {
margin: 0 12rem 0 0;
}
.menu a {
font-size: 1rem;
margin: 0 .1rem;
outline: none;
}
.menu a:last-child{
margin-right: 0;
}
nav ul li a::before,
nav ul li a::after {
content: '';
position: absolute;
width: 100%;
height: 2px;
background-color: #f4511e;
left: 0;
transform: scaleX(0);
transition: all .5s;
}
nav ul li a::before{
top: 0;
transform-origin: left;
}
nav ul li a::after{
bottom: 0;
transform-origin: right;
}
nav ul li a:hover::before,
nav ul li a:hover::after{
transform: scaleX(1);
}
.btn {
border: none;
border-radius: 30px;
background-color: #f4511e;
color: #fff;
font-size: 1rem;
font-weight: bold;
text-align: center;
padding: 9px;
width: 70px;
text-transform: uppercase;
}
.btninfo{
padding: 9px 19px;
}
/* End of Navagation Menu */
/* Content of the Website */
/* .content {
height: 100vh;
overflow: hidden;
} */
.possible {
color: #fff;
text-align: center;
letter-spacing: 10px;
text-transform: uppercase;
padding-top: 6rem;
font-family: "Coiny", sans-serif;
font-size: 3.2rem;
}
.circle {
position: relative;
border-radius: 50%;
width: 50rem;
height: 50rem;
background-color: #6CA9A5;
margin: 10rem auto;
z-index: 1;
}
.about {
position: absolute;
height: 100vh;
background-color: crimson;
z-index: 3;
width: 100%;
margin-top: -270px;
}
.content{
background-color: #0b2947;
}
/* Media Queries for tablet and mobile */
#media screen and (max-width: 990px) {
.menu-toggle {
display: block;
}
nav {
display: none;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
height: 100vh;
text-align: center;
}
nav ul {
flex-direction: column;
}
nav ul li {
margin-top: 5rem;
}
nav ul li a {
margin 0;
font-size: 3rem;
}
nav ul li:first-child{
margin-top: 0;
}
.overlay.menu-open,
nav.menu-open{
display: flex;
transform: scale(1);
opacity: 1;
}
nav img {
height: 15rem;
margin: 0;
}
.menu {
margin-right: 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 href="https://fonts.googleapis.com/css?family=Raleway|Coiny|Roboto|Montserrat" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
<link rel="stylesheet" href="style.css">
<title>Jury Gregorio - Welcome</title>
</head>
<body>
<div class="body">
<header>
<div class="menu-toggle" id="hamburger">
<i class="fas fa-bars"></i>
</div>
<div class="overlay"></div>
<nav>
<img src="img/logo2.png" alt="Logo" class="logo">
<ul>
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<div class="menu">
Contact
Info
</div>
</nav>
</header>
<div class="content">
<h1 class="possible">Everything is Possible</h1>
<div class="circle">
</div>
</div>
<div class="about">
<h1>Helow</h1>
</div>
</div>
<script>
var open = document.getElementById('hamburger');
var changeIcon = true;
open.addEventListener("click", function(){
var overlay = document.querySelector('.overlay');
var nav = document.querySelector('nav');
var icon = document.querySelector('.menu-toggle i');
overlay.classList.toggle("menu-open");
nav.classList.toggle("menu-open");
if (changeIcon) {
icon.classList.remove("fa-bars");
icon.classList.add("fa-times");
changeIcon = false;
}
else {
icon.classList.remove("fa-times");
icon.classList.add("fa-bars");
changeIcon = true;
}
});
</script>
</body>
</html>
So, I've started work on a navbar and it's kinda my first time doing this since it's a school project. On PC, my navbar look pretty good, the problem is with how the navbar looks on a tablet. Normally, this wouldn't be a problem, but my school is mostly tablet-centric, so I wanna make it iPad-friendly.
HTML
<html>
<head>
<title>Project Layout - Original</title>
<link rel="stylesheet" href="main.css" />
<link rel="stylesheet" href="homecontent.css" type="text/css" />
<style>
</style>
</head>
<body>
<header>
<div id="container">
<nav id="nav">
<ul>
<img src="finesselogotag.png" id="titleimage"> </img>
<li><a class="active" href="placeholder.html">Home</a></li>
<li><a class="nav" href="placeholder.html">Products</a></li>
<li><a class="nav" href="placeholder.html">Order now</a></li>
<li><a class="nav" href="placeholder.html">Games</a></li>
<li><a class="nav" href="placeholder.html">About us</a></li>
<li><a class="nav" href="placeholder.html">Presentation</a></li>
</ul>
</nav>
</div>
</header>
<div>
<p>Test text</p>
</div>
<footer>
<p class="copyright">©Copyright by DLSZ</p>
</footer>
</div>
</body>
</html>
CSS
/*to remove default margins*/
* {
margin: 0;
list-style-type: none;
background-color: #e0dbd1
}
/*to remove default margins*/
header, nav, section, article, footer {
display: block;
}
/*Css for the whole div*/
#container {
list-style: none;
font-weight: bold;
margin-bottom: 10px;
width: 100%;
text-align: center;
background-color: #1f242e;
height:49.5px;
float: left;
}
.logo {
height: 100px;
width: 200px;
float: left;
}
/*CSS for the whole div*/
/*Menu Bar*/
#nav {
float:left;
height: 50px;
text-align: center;
}
#nav ul {
float: left;
margin: 0px;
padding: 0px;
overflow: visible;
}
#nav li {
float: left;
display: block;
height: 19.5px;
}
#nav a {
float: left;
text-decoration: none;
color: #e0dbd1;
font-family: verdana;
}
#nav li a {
float: left;
display: block;
padding: 15px;
background-color: #1f242e;
text-align: center;
font-style: verdana;
}
#titlenav {
float: left;
background-color: #1f242e;
display: block;
font-family: SFAtarian;
padding: 15px;
font-size: 40px;
height: 19.5px;
color: #e0dbd1;
position: absolute;
top: -1.5%;
right: 0%;
}
#titleimage {
position: absolute;
top: -1.95%;
right: 0%;
float: left;
width: 150px;
height: 79.5px;
}
/*Menu Bar*/
section {
height: auto;
width: 1000px;
}
footer {
text-align:center;
height: 40px;
}
footer ul li{
display: inline-block;
}
footer ul li a {
color: 000000;
}
.content {
display: inline-block;
padding: 2px;
margin-left: 50px;
margin-bottom: 15px;
margin-top: 25px;
border: 2px solid black;
width: 900px;
}
.left {
float: left;
margin-right: 5px;
}
.right {
float: right;
margin-left: 5px;
}
/*FONTS*/
#font-face {
font-family: SFAtarian;
src: url(SFAtarian.ttf);
}
/*END OF FONT LIST*/
Here's what it looks like normally:
And here's what it looks like on an iPad:
Like I said, I'm kind of new to this kinda thing. Any advice on how to do this would be greatly appreciated, thanks!
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
use this tag in section,it will work.
use of viewport : The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.
Try any of these..
Bootstrap navigation:
https://www.w3schools.com/bootstrap/bootstrap_navbar.asp
W3.css navigation:
https://www.w3schools.com/w3css/w3css_navigation.asp
Check this please, here is the responsive view for your code
https://codepen.io/atulraj89/pen/QJVPJv
$('.hamberger').click(function() {
$('.hamberger-nav-bar').toggleClass('active-left');
});
/*to remove default margins*/
* {
margin: 0;
list-style-type: none;
}
/*to remove default margins*/
header, nav, section, article, footer {
display: block;
}
/*Css for the whole div*/
#container {
list-style: none;
font-weight: bold;
margin-bottom: 10px;
width: 100%;
text-align: center;
background-color: #1f242e;
height:49.5px;
float: left;
}
.logo {
height: 100px;
width: 200px;
float: left;
}
/*CSS for the whole div*/
/*Menu Bar*/
#nav {
position: relative;
float:left;
height: 50px;
text-align: center;
margin-top: 50px;
}
#nav ul {
float: left;
margin: 0px;
padding: 0px;
overflow: visible;
}
#nav li {
float: left;
display: block;
height: 19.5px;
}
#nav a {
float: left;
text-decoration: none;
color: #e0dbd1;
font-family: verdana;
}
#nav li a {
float: left;
display: block;
padding: 15px;
background-color: #1f242e;
text-align: center;
font-style: verdana;
}
#titlenav {
float: left;
background-color: #1f242e;
display: block;
font-family: SFAtarian;
padding: 15px;
font-size: 40px;
height: 19.5px;
color: #e0dbd1;
position: absolute;
top: -1.5%;
right: 0%;
}
#titleimage {
position: absolute;
top: -1.95%;
right: 0;
float: left;
width: 150px;
height: 79.5px;
}
/*Menu Bar*/
section {
height: auto;
width: 1000px;
}
footer {
text-align:center;
height: 40px;
}
footer ul li{
display: inline-block;
}
footer ul li a {
color: 000000;
}
.content {
display: inline-block;
padding: 2px;
margin-left: 50px;
margin-bottom: 15px;
margin-top: 25px;
border: 2px solid black;
width: 900px;
}
.left {
float: left;
margin-right: 5px;
}
.right {
float: right;
margin-left: 5px;
}
.hamberger {
display: none;
}
/*FONTS*/
#font-face {
font-family: SFAtarian;
src: url(SFAtarian.ttf);
}
/*END OF FONT LIST*/
/* HAMBERGER CSS */
.hamberger {
position: absolute;
top: 30px;
right: 15px;
z-index: 999999;
padding: 10px 35px 16px 0;
cursor: pointer
}
.hamberger span,
.hamberger span:before,
.hamberger span:after {
content: "";
position: absolute;
display: block;
width: 35px;
height: 3px;
border-radius: 1px;
border-color:#ffffff;
background: #ffffff;
cursor: pointer;
}
.hamberger span:before {
top: -10px;
}
.hamberger span:after {
bottom: -10px;
}
.hamberger span,
.hamberger span:before,
.hamberger span:after {
transition: all 300ms ease-in-out;
}
.hamberger.active span {
background-color: transparent
}
.hamberger.active span:before,
.hamberger.active span:after {
top: 0;
}
.hamberger.active span:before {
transform: rotate(45deg);
}
.hamberger.active span:after {
top: 10px;
transform: translatey(-10px) rotate(-45deg);
}
/* MEDIA QUERY */
#media (max-width: 991px){
.hamberger-nav-bar {
position: fixed;
left: -300px;
width: 300px;
transition: all 0.5s;
}
.hamberger-nav-bar.active-left {
left: 0;
position: relative;
}
.hamberger-nav-bar.active-left:after {
position: fixed;
content: "";
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: -1;
}
#nav {
float: none;
height: auto;
position: relative;
z-index: 99;
}
#nav ul {
width: 100%;
float: none;
}
#nav li {
float: none;
height: auto;
width: 100%;
}
#nav li a {
float: none;
}
#titleimage {
top: 0;
}
.hamberger {
float: left;
margin: 17px 0 0 10px;
position: fixed;
top: 0;
left: 20px;
display: block;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<title>Project Layout - Original</title>
<link rel="stylesheet" href="main.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="homecontent.css" type="text/css" />
</head>
<body>
<header>
<div id="container">
<div class="hamberger">
<span></span>
</div>
<nav id="nav" class="hamberger-nav-bar">
<ul>
<li><a class="active" href="placeholder.html">Home</a></li>
<li><a class="nav" href="placeholder.html">Products</a></li>
<li><a class="nav" href="placeholder.html">Order now</a></li>
<li><a class="nav" href="placeholder.html">Games</a></li>
<li><a class="nav" href="placeholder.html">About us</a></li>
<li><a class="nav" href="placeholder.html">Presentation</a></li>
</ul>
</nav>
<img src="finesselogotag.png" id="titleimage">
</div>
</header>
<div>
<p>Test text</p>
</div>
<footer>
<p class="copyright">©Copyright by DLSZ</p>
</footer>
</div>
</body>
</html>
Sea the above code.
I'm new to coding and I'm making a website. But I have a problem, it can't get it centered. I don't want it full width but a bit off the side like a box. Like you can see, there is more margin on the right than on the left, how is that possible? Is it a bug or just something that I need to add in order that it will work? Hopefully you can help me! Here is the code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: rgb(57, 57, 57);
}
header {
background-color: white;
}
header::after {
content: " ";
display: table;
clear: both;
}
.container {
width: 95%;
margin: 0 auto;
}
.logo {
float: left;
width: 250px;
height: auto;
margin-top: 10px;
margin-bottom: 10px;
}
nav {
float: right;
font-family: 'courier';
font-size: 18px;
font-weight: 300;
letter-spacing: 0.5px;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
nav ul li {
display: inline-block;
margin-left: 45px;
}
nav ul li a {
display: block;
color: black;
text-decoration: none;
padding: 17px 15px;
position: relative;
}
nav ul li a:before {
content: '';
position: absolute;
width: 100%;
height: 3px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
nav ul li a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
</style>
</head>
<body>
<header>
<div class="container">
<img class="logo" src="#">
<nav>
<ul>
<li>PROJECTEN</li>
<li>OVER</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
Generally to center something we use margin: 0 auto. Try adding that to your nav styling.
To pull your nav items to the right, I would try using flexbox (a great thing to learn if you're new to HTML/CSS).
Here's the final CSS:
nav {
width: 80%;
margin: 0 auto;
display: flex;
flex-direction: row-reverse;
font-family: 'courier';
font-size: 18px;
font-weight: 300;
letter-spacing: 0.5px;
}
The CSS you applied to .container should move to header
body {
background-color: rgb(57, 57, 57);
}
header {
background-color: white;
width: 95%;
margin: 0 auto;
}
header::after {
content: " ";
display: table;
clear: both;
}
.container {
}
.logo {
float: left;
width: 250px;
height: auto;
margin-top: 10px;
margin-bottom: 10px;
}
nav {
float: right;
font-family: 'courier';
font-size: 18px;
font-weight: 300;
letter-spacing: 0.5px;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
nav ul li {
display: inline-block;
margin-left: 45px;
}
nav ul li a {
display: block;
color: black;
text-decoration: none;
padding: 17px 15px;
position: relative;
}
nav ul li a:before {
content: '';
position: absolute;
width: 100%;
height: 3px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
nav ul li a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
<header>
<div class="container">
<img class="logo" src="#">
<nav>
<ul>
<li>PROJECTEN</li>
<li>OVER</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
</header>
Set you'r .container to position: relative; or you go like:
.container {
width: 95%;
position: absolute;
top: 0;
right: 0;
left: 0;
margin: 0 auto;}
Here is a basical menu:
http://jsbin.com/aTupIZIp/3/edit
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<ul class="nav">
<li><a>Home</a></li>
<li>
<a>Our Staff</a>
<div class="pos-fix">
<ul class="vert">
<li><a>Jon Skeet</a></li>
<li><a>Spiderman</a></li>
</ul>
</div>
</li>
<li><a>Contact Us</a></li>
</ul>
</body>
</html>
body, ul, li, a {
margin: 0;
padding: 0;
}
a {
cursor: pointer;
}
.nav {
list-style: none;
width: 100%;
display: table;
}
.nav li {
display: table-cell;
background: red;
}
.nav a {
display: block;
text-align: center;
padding: 10px;
}
.pos-fix {
position: relative;
}
.nav a:before {
content: '';
display: inline-block;
height: 30px;
width: 30px;
background: url(http://placehold.it/30x30);
float: left;
margin: -5px 0 0 0;
}
.nav a:hover {
background: black;
color: yellow;
}
.nav li:hover .vert {
display: block;
}
.vert {
display: none;
width: 100%;
position: absolute;
}
.vert li {
width: 100%;
display: block;
}
lets look at the submenu (our staff / John Skeet . Spiderman). How to set them to be 100% width and aligned to left?
So far I tried to make it width: 10000px; overflow: hidden; but horizontal scrollbars still appears. And even position: absolute; left: 0; screws all up
Your pos-fix div was causing the problem. Remove it.
FIDDLE
(Relevant) CSS
.vert {
display: none;
width: 100%;
position: absolute;
top: 40px;
left:0;
}
.vert li {
width: 100%;
display: block;
text-align: left;
}
.vert a {
text-align: left;
}
.vert a:before {
margin-right: 10px;
}
Do this:
ul.nav .pos-fix {
left: 0;
margin: 0;
position: absolute;
right: 0;
}