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.
Related
My drop down navigation in the 1st and 2nd media queries just cover the hero image instead of pushing the hero image down, also the width of the drop down is suspiciously small. I have a working example on a different website I made, but I can't figure the difference that causes it to break on this one. I hope someone knows what is causing this and/or how to fix it. Here is the code:
*{
font-family: 'Zilla Slab';
}
nav ul li a {
margin-left: 5%;
text-decoration: none;
color: rgb(219,183,86);
font-weight: bold;
}
nav ul li {
display: inline;
list-style-type: none;
width: 100%;
margin-bottom: 20%;
}
nav {
position: absolute;
top: 70px;
right: 2px;
width: 550px;
height: 10px;
}
#hamburger, label {
display: none;
}
h1{
color: rgb(219,183,86);
}
.infobox {
width: 35%;
float: left;
margin: 2%;
}
.button {
width: 180px;
height: 180px;
}
.button a{
text-decoration: none;
font-weight: bold;
font-size: 1.4em;
color: rgb(219,183,86);
}
.button a p{
position: relative;
top: -25px;
}
.button img{
width: 120px;
height: 120px;
}
#buttons{
float: left;
margin-left: 5%;
}
#header{
text-align: center;
position: absolute;
top: -10px;
left: 2px;
width: 550px;
height: 10px;
}
#logo{
float: left;
width: 240px;
height: 175px;
position: absolute;
right: 315px;
}
#logoname{
font-size: 35px;
color: rgb(219,183,86);
font-weight: bold;
position: relative;
top: 35px;
left: 130px;
}
#content{
text-align: center;
width: 100%;
margin: auto;
}
#hero{
margin: 0;
width: 100%;
margin-top: 180px;
}
#footer{
clear: both;
float: none;
font-style: italic;
text-align: center;
margin-bottom: 2%;
color: ;
}
#media screen and (max-width: 1088px) and (min-width: 705px){
#buttons{
float: none;
clear: both;
width: 100%;
margin-left: 1%;
}
.button{
text-align: center;
display: inline-block;
}
/* Menu Items */
/* Menu Items */
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
padding: 1%;
box-sizing: border-box;
margin-bottom: 10px;
}
nav ul li a {
text-decoration: none;
}
/* Show Hamburger */
label {
display: block;
position: absolute;
top: -45px;
right: 20px;
color: white;
color: rgb(219,183,86);
font-style: normal;
font-size: 3.5em;
padding: 3%;
font-weight: bold;
}
/* Break down menu items into vertical */
nav ul li {
display: block;
}
nav ul li {
border-top: solid grey 1px;
}
/* Toggle show/hide menu on checkbox click */
nav ul {
display: none;
}
nav input:checked ~ ul {
display: block;
}
.infobox {
width: 46%;
}
}
#media screen and (max-width: 704px) {
.infobox {
width: 96%;
}
#buttons{
float: none;
display: block;
clear: both;
margin-left: 33%;
}
#logo{
float: left;
width: 160px;
height: 110px;
right: 390px;
}
#logoname{
font-size: 20px;
color: rgb(219,183,86);
font-weight: bold;
position: relative;
top: 20px;
left: -10px;
}
/* Menu Items */
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
padding: 1%;
box-sizing: border-box;
margin-bottom: 10px;
}
nav ul li a {
text-decoration: none;
}
/* Show Hamburger */
label {
display: block;
position: absolute;
top: -80px;
right: 20px;
color: white;
color: rgb(219,183,86);
font-style: normal;
font-size: 3.5em;
padding: 3%;
font-weight: bold;
}
/* Break down menu items into vertical */
nav ul li {
display: block;
}
nav ul li {
border-top: solid grey 1px;
}
/* Toggle show/hide menu on checkbox click */
nav ul {
display: none;
}
nav input:checked ~ ul {
display: block;
}
#hero{
margin-top: 110px;
}
}
<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=Zilla+Slab&display=swap" rel="stylesheet">
<div id="container">
<div id="header"><img id="logo" src="https://cdn.discordapp.com/attachments/644747093558165514/974882993036472370/logo.png" alt="logo" /><p id="logoname">Bizzy B's TUMBLEBUS</p></div>
<nav>
<label for="hamburger">☰</label>
<input type="checkbox" id="hamburger"/>
<ul>
<li>Home</li>
<li>About</li>
<li>Parties</li>
<li>Policies</li>
<li>Inside</li>
<li>Contact</li>
</ul>
</nav>
<div id="content">
<img id="hero" src="https://cdn.discordapp.com/attachments/644747093558165514/974882992591884348/hero.png" alt="hero" />
<h1>Welcome to the TUMBLEBUS </h1>
<div class="infobox">
<p> The TUMBLEBUS is a full sized school bus that has been converted into a safe and fun child sized
gym bringing fitness and fun to your children.
The TUMBLEBUS is equipped with tumbling and climbing equipment including monkey bars, trampoline, bars,
beam, vault, zip line, rings, slide and lots more!
</p>
</div>
<div class="infobox">
<p>We are excited that you
have decided to take the time
to tumble through to learn
about TUMBLEBUS. We have a
unique and fun way to keep your
little ones happy and fit. We would
love to come to your child's daycare,
school, birthday or special event.
Please contact us to learn more about how we can buzz the fun to your little one!
</p>
</div>
<div id="buttons">
<div class="button"><img src="https://cdn.discordapp.com/attachments/644747093558165514/974882993955041290/enroll.png" alt="enroll" /><p>Enroll</p></div>
<div class="button"><img src="https://cdn.discordapp.com/attachments/644747093558165514/974882993661427742/pay.png" alt="pay" /><p>Pay</p></div>
<div class="button"><img src="https://cdn.discordapp.com/attachments/644747093558165514/974882993430732810/order.png" alt="order" /><p>Order</p></div>
</div>
<div id="footer">
<p>TUMBLEBUS<br/>
11230 Triple Crown Drive<br/>
Flint TX 75762
</p>
</div>
</div>
</div>
I guess The problem is caused by position : absolute
try to delete position : absolute or add position :relativeto your nav .
Tell me what happens
Update : the problem was caused by #header{ position : absolute ; }
Removing it solved the problem.
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.
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
I'm trying to center the text in my navbar and my social links too, but I just can't. I've searched on google, tried everything, it doesn't work. I'm a beginner btw. I've tried every solution I've found on google for about 1hr and all I did is getting mad. damn
I don't get it. In the snippet everything works fine, it is centered as I want. But in my PC, it looks like this: pic
Can you explain to me why does it happen?
//Header
#header {
position: absolute;
top: 0;
}
//bara navigatie
#bara {
width: 100%;
margin: 0;
}
#bara-wrap {
position: absolute;
top: 0;
width: 100%;
background: #111111;
}
.butoane ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.butoane li {
float: left;
font-weight: bold;
margin-right: 4em;
font-size: 1em;
}
.butoane li a {
display: block;
color: white;
text-decoration: none;
}
.logo {
width: 11em;
margin-left: 45em;
float: left;
}
.social {
color: white;
float: right;
display: inline-block;
font-weight: bold;
}
<header id="header" style="opacity: 1; top: 0px;">
<div id="bara-wrap">
<img src="img/logo.png" alt="LOGO" class="logo" />
<nav id="bara">
<ul class="butoane">
<li>home</li>
<li>about</li>
<li>skills</li>
<li>contact</li>
</ul>
</nav>
<ul class="social">
<li class="facebook">facebook</li>
</ul>
</div>
</header>
Remove the butoane class and copy the posted right now css file and paste it into your css file....
//Header
#header {
position: absolute;
top: 0;
}
//bara navigatie
#bara {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
#bara-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 70px;
background: #111111;
}
img{
margin-top: 25px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
ul li {
margin-top: 25px;
float: left;
font-weight: bold;
margin-right: 4em;
font-size: 1em;
}
li a {
display: block;
color: white;
text-decoration: none;
}
.logo {
width: 11em;
margin-left: 100px;
float: left;
}
.social {
position: absolute;
right: 20%;
top: 0;
color: white;
float: right;
display: inline-block;
font-weight: bold;
}
use this one i made some changes in your html and css.
html
<header id="header" style="opacity: 1; top: 0px;">
<div id="bara-wrap">
<img src="img/logo.png" alt="LOGO" class="logo" />
<nav id="bara">
<ul class="butoane">
<li>home</li>
<li>about</li>
<li>skills</li>
<li>contact</li>
</ul>
<ul class="social">
<li class="facebook">facebook</li>
</ul>
</nav>
</div>
</header>
css
#header {
position: absolute;
top: 0;
}
//bara navigatie
#bara {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
#bara-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 70px;
background: #111111;
}
.butoane ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.butoane li {
float: left;
font-weight: bold;
margin-right: 4em;
font-size: 1em;
}
.butoane li a {
display: block;
color: white;
text-decoration: none;
}
.logo {
width: 11em;
margin-left: 100px;
float: left;
}
.social {
position: absolute;
right: 20%;
top: 0;
color: white;
float: right;
display: inline-block;
font-weight: bold;
}
I'm having issues with my dropdown navigation for just this page. The response times on the navigation are extremely slow, and the dropdown menu will show momentarily on hover, but quickly disappears. I'm unsure if it has to do with the main element below, or not. If you have any insight or help, it would be great. I'm a graphic major, not web, so this isn't my forte.
body{
background-color: white;
}
#page-wrapper{
margin-left: auto;
margin-right: auto;
width: 960px;
height: auto;
background-image: url(Images/brick-wall-2209991.jpg);
background-repeat: repeat-y;
}
li {
text-align: center;
display: inline;
}
a {
text-decoration: none;
}
.span01,.span02,.span03,.span04,.span05,.span06,.span07,.span08,.span09,.span10,.span11,.span12
{
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
}
.first-child{
margin-left: 0;
}
.last-child{
margin-right: 0;
}
.span01 {
width: 60px;
}
.span02 {
width: 140px;
}
.span03 {
width: 220px;
}
.span04 {
width: 300px;
}
.span05 {
width: 380px;
}
.span06 {
width: 460px;
}
.span07 {
width: 540px;
}
.span08 {
width: 620px;
}
.span09 {
width: 700px;
}
.span10 {
width: 780px;
}
.span11 {
width: 860px;
}
.span12 {
width: 940px;
}
.reset{
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0px;
}
.header {height: 115px;
background-color: #1e241b;
width: 960px;
}
/********Navigation********/
ul { margin-right: 20px;}
li {text-align: center;
display: inline;
font-family: 'Josefin Sans', sans-serif;
font-size: 14pt;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 1px;
color: #d98a79;
}
li a:link {color: #d98a79;}
li a:visited {
color: #d98a79;
}
li a:hover {
text-decoration-color: white;
color: white;
}
li a:active {
color: white;
}
nav {text-align: center;
padding-left: 110px;
margin-top: 30px;
float: right;
margin-right: 70px;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
position: relative;
text-align: left;
}
nav ul ul li a {
padding-top: 15px;
margin-top: 0px;
padding-bottom: 15px;
margin-left: -10px;
margin-right: 15px;
text-align: left;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background-color: #1e241b;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li a{
display: block;
padding: 10px 8px;
}
.bar {height: 190px;
background-color: rgba(0,0,0,0.75);
position: relative;
margin-top: 20px;
}
h1 {
font-family: 'Josefin Sans', sans-serif;
text-align: right;
text-transform: uppercase;
color: white;
font-size: 90pt;
position: relative;
top:-140px;
left: -40px;
margin-bottom: -140px;
}
<html>
<head>
<meta charset="UTF-8">
<title>Sous Vide - About</title>
<link href="secondary.css" rel="stylesheet" type="text/css">
<style>
#import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
#import url('https://fonts.googleapis.com/css?family=Barlow+Semi+Condensed');
</style>
</head>
<body>
<div id="page-wrapper">
<header class="span12 header first-child last-child">
<nav class="span12">
<ul>
<li>Home</li>
<li>About Us
<ul>
<li>About Us</li>
<li>FAQ</li>
</ul>
</li>
<li>Menus
<ul>
<li>Seasonal Menu</li>
<li>Breakfast Menu</li>
<li>Lunch Menu</li>
</ul>
</li>
<li>Catering</li>
<li>Gallery</li>
<li>Locations</li>
</ul>
</nav>
</header>
<div class="reset"></div>
<main class="bar span12"></main>
<h1>About Us</h1>
<div class="reset"></div>
You should put the h1 element to a div container and style it with CSS.
Example:
<div id="DIVNAME">
<h1>About Us</h1>
</div>
in css:
#DIVNAME { height: 100px; width 100px; }
hi try this: it will work
h1{
clear:both;
}