When I activate the navigational bar by clicking the selected icon, the page glitches out and puts the navbar dropdown with spacing on the left. So it is not taking the whole screen. Furthermore, when clicking the dropdown icon the navbar is pushed down.
I have tried debugging and commenting out sections to find out where it is glitching out. However this has not managed to fix the problem
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bruno 'sPizzeria</title>
<meta name="description" content="A pizzeria website">
<meta name="keywords" content="pizza, australia, Bruno Pizzeria">
<meta name="author" content="Joshua Piper StuID: 102678001">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./css/stylesheet.css" rel="stylesheet" media="screen and (min-width: 601px)"/>
<link href="./css/mobile.css" rel="stylesheet" media="screen and (max-width: 600px)"/>
</head>
<body>
<header>
<div class="header--main">
<h1 class="header--title">Bruno's Pizzaria</h1>
</div>
</header>
<!-- The navbar must be in main or the new position: sticky will not apply-->
<nav>
<label id="label-toggle" for="toggle">☰</label>
<input type="checkbox" id="toggle"/>
<div class="menu">
<ul>
<li><a class="current" href="index.html">Home</a></li>
<li><a href="register.html">Registration</a> </li>
<li> <a href="order.html">Order</a></li>
<li> <a href="features.html" class="active">Features</a></li>
</ul>
</div>
</nav>
<main>
<h1>Haha lol, there are no features... pretty sad right?</h1>
</main>
</body>
</html>
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:400,600i,700&display=swap');
body {
background-color: #f1f1f1;
padding: 0;
margin: 0;
height: 5000px;
width: 100%;
}
.header--main {
display: none;
}
.current {
background-color: white;
color: #484848;
}
.wrapper {
align-items: center;
width: 100%;
}
form p label {
display: inline-block;
text-align: left;
width: 80px;
}
/*WORK ON THIS */
.form--title {
font-family: arial, helvetica;
font-size: 2em;
}
.errMsg {
color: #d50000;
margin-bottom: 20px;
padding: 0px;
font-size: 2em;
transition: all 0.5s ease;
}
#showInformation {
margin-right: 10px;
}
#additionalInformation, #showAddress, #creditSection, #visaInput, #masterInput, #americanInput {
display: none;
margin: 0 auto;
}
input[type=submit], input[type=reset] {
background-color: #00C5BE;
border: 10%;
color: #fff;
font-size: 16px;
cursor: pointer;
padding: 10px 50px;
text-transform: uppercase;
letter-spacing: 5px;
border-radius: 45px;
width: 60%;
font-weight: bold;
margin: 20px 0px;
}
input[type=submit]:hover, input[type=reset]:hover {
filter: brightness(120%);
}
input[type="radio"] {
width: 20px;
height: 20px;
}
main {
font-family: arial, sans-serif;
font-size: 1em;
}
#label-toggle {
font-size: 2em;
line-height: 70px;
cursor: pointer;
position: relative;
left: 20px;
float: left;
}
.menu {
text-align: center;
width: 100%;
display: none;
}
.menu a {
display: block;
border-bottom: 2px solid #333;
clear: both;
background-color: #af508e;
text-decoration: none;
line-height: 70px;
color: #fff;
font-size: 2em;
}
.menu ul {
list-style-type: none;
}
#toggle:checked + .menu {
display: block;
}
nav {
width: 100%;
height: 70px;
background-color: #44433c;
position: sticky;
position: -webkit-sticky; /* put navbar here*/
top: 0%;
}
nav ul li a:hover {
background-color: white;
color: #484848;
}
#toggle {
display: none;
}
#label-toggle {
display: block;
}
.slogan {
display: none;
}
The whole navbar is glitching out and not taking the whole page
Aucun commentaire:
Enregistrer un commentaire