The problem I am having is that I have a margin or a container somewhere that is creating an unwanted scroll bar horizontally on the bottom of my webpages. I am using my contact page since it is my page with the least amount of content, even though I am having the issue across all of my other 5 pages linked on this website. I know it will be something simple and would love an extra pair of eyes who could maybe shed some light onto where the issue is. Thanks in advance. Please let me know if there is anything else I can provide for further details. Thanks in advance.
<!doctype html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<title>index.html</title>
<link href="css/style.css" rel="stylesheet" type="text/css"><link rel="preconnect"
href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lora:wght#500&display=swap" rel="stylesheet">
</head>
<div class="IMGLogo">
<img src="images/RJL photography_Logo.svg" alt="LOGO" width="370.026" height="65.492" ></div>
<div id="wrapper">
<nav role="navigation">
<div id="menuToggle">
<!--
A fake / hidden checkbox is used as click reciever,
so you can use the :checked selector on it.
-->
<input type="checkbox" />
<!--
Some spans to act as a hamburger.
They are acting like a real hamburger,
not that McDonalds stuff.
-->
<span></span>
<span></span>
<span></span>
<!--
Too bad the menu has to be inside of the button
-->
<ul id="menu">
<li>Home</li>
<li>Projects</li>
<li>Lofts</li>
<li>Balcony/Rooftop</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>
<div>
<main>
<br>
<br><h1>Contact</h1>
<p class="pbox"> The folks at RJL Photography are eager to make your moments last a lifetime. Inquire
below.</p>
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css">
<div class="card">
<img src="images/New/Contact/RyanBio.JPG" alt="Ryan Bio" style="width:100%">
<h1>Ryan Luber</h1>
<p class="title">CEO & Founder, RJL Photography</p>
<p>Frederick, MD</p>
<p>443-222-3333</p>
<p>RJLPhoto#RJLP.COM</p>
<i class="fa fa-dribbble"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-facebook"></i>
</div>
<br>
<div class="container">
<form action="action_page.php">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label for="pnumber">Phone Number</label>
<input type="text"
id="pnumber"
name="phonenumber"
placeholder="Your phone number..">
<label for="country">Country</label>
<select id="country" name="country">
<option value="usa">USA</option>
<option value="canada">Canada</option>
</select>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Description of your desired Photoshoot."
style="height:200px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
</main>
<!--wrapper--></div>
<footer>© RJLPhotography 2020 </footer>
</html>
wrapper {
margin: auto;
width: 100%;
}
body {
align-content: center;
margin-top: 0;
margin-left: 30;
margin-bottom: 0;
}
article {
background-image: url("../images/BAR.svg");
width: 82%;
padding: 20px;
position: relative;
background-repeat: no-repeat;
background-position: center;
}
h1 {
font-family: 'Lora', serif;
}
h2 {
height: 10em;
display: flex;
align-items: center;
justify-content: center;
margin-left: -200px;
}
/* Container holding the image and the text */
.container {
position: relative;
}
/* Bottom right text */
.text-block {
position: absolute;
bottom: 20px;
right: 20px;
background-color: black;
color: white;
padding-left: 20px;
padding-right: 20px;
}
body {
margin: 20px;
position: relative;
/* make it look decent enough */
background: white;
color: gray;
}
.IMGLogo {
margin: 0 0 0 0;
width: 370.026px;
height: 65.492px;
position: absolute;
left: 40px;
top: -40px;
}
p.pbox {
margin-left: 400px;
margin-right: 400px;
text-align: center;
font-size: 20px;
font-weight: bold;
}
img {
/*display: block;
object-fit:cover;
*/
width: 80%;
height: 90%;
margin-top: 80px;
margin-right: 80px;
margin-left: 0;
margin-bottom: 80px;
max-width: 1000px;
border-radius: 8px;
}
.center {
/*display: block;*/
margin-left: auto;
margin-right: auto;
width: 76%;
}
main {
padding-left: 65px;
position: static;
margin-top: 40px;
width: 100%;
}
#BARcenter {
width: 60%;
height: 100%;
position: relative;
top: -100px;
left: 60px;
z-index: 50;
}
#BARcenter img {
width: 40%;
height: 40%;
}
#menuToggle {
display: block;
position: relative;
top: 130px;
left: 30px;
z-index: 100;
-webkit-user-select: none;
user-select: none;
right: auto;
}
#menuToggle a {
text-decoration: none;
color: white;
transition: color 0.3s ease;
}
#menuToggle a:hover {
color: tomato;
}
#menuToggle input {
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
/* hide this */
z-index: 2;
/* and place it over the hamburger */
-webkit-touch-callout: none;
}
/*
* Just a quick hamburger
*/
#menuToggle span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #cdcdcd;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease;
}
#menuToggle span:first-child {
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2) {
transform-origin: 0% 100%;
}
/*
* Transform all the slices of hamburger
* into a crossmark.
*/
#menuToggle input:checked~span {
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #232323;
}
/*
* But let's hide the middle one.
*/
#menuToggle input:checked~span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
/*
* Ohyeah and the last one should go the other direction
*/
#menuToggle input:checked~span:nth-last-child(2) {
transform: rotate(-45deg) translate(0, -1px);
}
/*
* Make this absolute positioned
* at the top left of the screen
*/
#menu {
position: absolute;
width: 300px;
margin: -100px 0 0 -50px;
padding: 50px;
padding-top: 125px;
opacity: 1;
background-color: rgba(0, 0, 0, 0.5)!important;
list-style-type: none;
-webkit-font-smoothing: antialiased;
/* to stop flickering of text in safari */
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}
#menu li {
padding: 10px 0;
font-size: 22px;
}
/*
* And let's slide it in from the left
*/
#menuToggle input:checked~ul {
transform: none;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
}
.title {
color: black;
font-size: 18px;
}
button {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
a {
text-decoration: none;
font-size: 22px;
color: black;
}
button:hover,
a:hover {
opacity: 0.4;
}
/* Style inputs with type="text", select elements and textareas */
input[type=text],
select,
textarea {
width: 100%;
/* Full width */
padding: 12px;
/* Some padding */
border: 1px solid #ccc;
/* Gray border */
border-radius: 4px;
/* Rounded borders */
box-sizing: border-box;
/* Make sure that padding and width stays in place */
margin-top: 6px;
/* Add a top margin */
margin-bottom: 16px;
/* Bottom margin */
resize: vertical/* Allow the user to vertically resize the textarea (not horizontally) */
}
/* Style the submit button with a specific background color etc */
input[type=submit] {
background-color: black;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
background-color: gray;
}
/* Add a background color and some padding around the form */
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
footer {
text-align: center;
}
#myBtn {
display: none;
/* Hidden by default */
position: fixed;
/* Fixed/sticky position */
bottom: 0px;
/* Place the button at the bottom of the page */
left: 30px;
/* Place the button 30px from the right */
z-index: 99;
/* Make sure it does not overlap */
border: none;
/* Remove borders */
outline: none;
/* Remove outline */
background-color: black;
/* Set a background color */
color: white;
/* Text color */
cursor: pointer;
/* Add a mouse pointer on hover */
padding: 25px;
/* Some padding */
border-radius: 10px;
/* Rounded corners */
font-size: 18px;
/* Increase font size */
}
#myBtn:hover {
background-color: #555;
/* Add a dark-grey background on hover */
}
On your main tag remove
padding-left: 65px;
and on your MenuToggle remove
left: 30px;
That fixes your issue of having an horizontal scroll bar.
You will then have to have a play about with your hamburger menu and contact text.
Try using position absolute rather than relative on your menuToggle.
Related
I am not a html or css developer but I need to create a one of html page. It looks fairly right only I want work a few things out.
My first issue is that I cant remove the light grey box around my embeded image, I'm of the understanding this is my padding but even with it set to 0px as well as the borer and margin set to 0px I have had no luck?
The second issue I have is that when used on a smartphone the logo, textboxes and button condense toward eachother and overlap... the cause of this is tyhe keyboad that pops up the solution iscompleatly unknowen to me.
the code is as follows:
.ApplicationLogo {
position: absolute;
top: 27%;
left: 50%;
width: 120px;
height: 120px;
margin-left: -60px;
/* Half the width */
margin-top: -60px;
/* Half the height */
content: no-repeat;
background-image: url('data:image/png;base64,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');
}
.LoginField {
position: absolute;
top: 50%;
left: 50%;
width: 350px;
height: 600px;
margin-left: -175px;
/* Half the width */
margin-top: -300px;
/* Half the height */
border-radius: 25px;
opacity: 0.5;
background-color: #D3D3D3;
}
.UsernameTextbox {
position: absolute;
top: 45%;
left: 50%;
width: 285px;
height: 50px;
margin-left: -148px;
/* Half the width */
margin-top: -25px;
/* Half the height */
background-color: #ffffff;
/* Font Styling */
font-size: 18px;
text-align: center;
color: #A9A9A9;
/* Textbox Boarder Styling */
border: 3px solid #A9A9A9;
border-radius: 10px;
}
.UsernameTextbox:hover {
/* Font Styling */
font-size: 18px;
text-align: center;
color: #ff8000;
}
.UsernameTextbox:hover::placeholder {
color: transparent;
}
.PasswordTextbox {
position: absolute;
top: 57%;
left: 50%;
width: 285px;
height: 50px;
margin-left: -148px;
/* Half the width */
margin-top: -25px;
/* Half the height */
background-color: #ffffff;
/* Font Styling */
font-size: 18px;
text-align: center;
color: #A9A9A9;
/* Textbox Boarder Styling */
border: 3px solid #A9A9A9;
border-radius: 10px;
}
.PasswordTextbox:hover::placeholder {
background-color: #ffffff;
color: transparent;
}
.PasswordTextbox:hover {
/* Font Styling */
font-size: 18px;
text-align: center;
background-color: #ffffff;
color: #ff8000;
}
.PasswordTextbox:hover::placeholder {
color: transparent;
}
.LoginButton {
position: absolute;
top: 75%;
left: 50%;
width: 295px;
height: 50px;
margin-left: -148px;
/* Half the width */
margin-top: -25px;
/* Half the height */
background-color: #4CAF50;
/* Font Styling */
font-size: 18px;
text-align: center;
color: white;
/* Textbox Boarder Styling */
border: 3px solid #A9A9A9;
border-radius: 10px;
}
.LoginButton:hover {
background-color: #45a049;
}
.CopyrightFooter {
position: absolute;
top: 97%;
left: 50%;
width: 350px;
height: 50px;
margin-left: -175px;
/* Half the width */
/* Font Styling */
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #A9A9A9;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body id="BackgroundImage">
<div class="LoginField"></div>
<img class="ApplicationLogo" />
<form method="POST" action="Confirm_Login">
<div class="LogInControlls">
<input class="UsernameTextbox" type="text" name="MYUSERNAME" placeholder="Username" required><br>
<input class="PasswordTextbox" type="password" name="MYPASSWORD" placeholder="Password" required><br>
<input class="LoginButton" type="submit" value="Login">
</div>
</form>
<div class="CopyrightFooter">van Tuyl Systems copyright © 2021</div>
</body>
</html>
I just downloaded an HTML and CSS template online and want to modify the code to adjust the hamburger menu icon to the right and have the menu slide from the right side but I had no idea about which part I should change
I have attached a screenshot of the interface below for reference. Thanks!
/*menu*/
#menuToggle
{
display: block;
position: relative;
top: 50px;
left: 50px;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
#menuToggle a
{
text-decoration: none;
color: #232323;
transition: color 0.3s ease;
}
#menuToggle a:hover
{
color: tomato;
}
#menuToggle input
{
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0; /* hide this */
z-index: 2; /* and place it over the hamburger */
-webkit-touch-callout: none;
}
/*
* Just a quick hamburger
*/
#menuToggle span
{
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #cdcdcd;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.55s ease;
}
#menuToggle span:first-child
{
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2)
{
transform-origin: 0% 100%;
}
/*
* Transform all the slices of hamburger
* into a crossmark.
*/
#menuToggle input:checked ~ span
{
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #ffffff;
}
/*
* But let's hide the middle one.
*/
#menuToggle input:checked ~ span:nth-last-child(3)
{
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
/*
* Ohyeah and the last one should go the other direction
*/
#menuToggle input:checked ~ span:nth-last-child(2)
{
transform: rotate(-45deg) translate(0, -1px);
}
/*
* Make this absolute positioned
* at the top left of the screen
*/
#menu
{
position: absolute;
width: 300px;
margin: -100px 0 0 -50px;
padding: 50px;
padding-top: 125px;
background: #ededed;
list-style-type: none;
-webkit-font-smoothing: antialiased;
/* to stop flickering of text in safari */
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
#menu li
{
padding: 10px 0;
font-size: 22px;
}
/*
* And let's slide it in from the left
*/
#menuToggle input:checked ~ ul
{
transform: none;
}
/*----------------------------------menu----------------------------*/
.section {
position: relative;
height: 100vh;
}
.section .section-center {
position: absolute;
top: 50%;
left: 0;
right: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
#booking {
font-family: 'Montserrat', sans-serif;
background-image: url('../img/dog.jpeg');
background-size: cover;
background-position: center;
}
#booking::before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background: rgba(143, 215, 230, 0.6);
}
.booking-form {
background-color: #fff;
padding: 60px 20px;
-webkit-box-shadow: 0px 5px 20px -5px rgba(0, 0, 0, 0.3);
box-shadow: 0px 5px 20px -5px rgba(0, 0, 0, 0.3);
border-radius: 4px;
}
.booking-form .form-group {
position: relative;
margin-bottom: 30px;
}
.booking-form .form-control {
background-color: #ebecee;
border-radius: 4px;
border: none;
height: 40px;
-webkit-box-shadow: none;
box-shadow: none;
color: #3e485c;
font-size: 14x;
}
.booking-form .form-control::-webkit-input-placeholder {
color: rgba(62, 72, 92, 0.3);
}
.booking-form .form-control:-ms-input-placeholder {
color: rgba(62, 72, 92, 0.3);
}
.booking-form .form-control::placeholder {
color: rgba(62, 72, 92, 0.3);
}
.booking-form input[type="date"].form-control:invalid {
color: rgba(62, 72, 92, 0.3);
}
.booking-form select.form-control {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.booking-form select.form-control+.select-arrow {
position: absolute;
right: 0px;
bottom: 4px;
width: 40px;
line-height: 32px;
height: 32px;
text-align: center;
pointer-events: none;
color: rgba(62, 72, 92, 0.3);
font-size: 14px;
}
.booking-form select.form-control+.select-arrow:after {
content: '\279C';
display: block;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.booking-form .form-label {
display: inline-block;
color: #3e485c;
font-weight: 700;
margin-bottom: 6px;
margin-left: 7px;
}
.booking-form .submit-btn {
display: inline-block;
color: #fff;
background-color: #1e62d8;
font-weight: 700;
padding: 14px 30px;
border-radius: 4px;
border: none;
-webkit-transition: 0.2s all;
transition: 0.2s all;
}
.booking-form .submit-btn:hover,
.booking-form .submit-btn:focus {
opacity: 0.9;
}
.booking-cta {
margin-top: 80px;
margin-bottom: 30px;
}
.booking-cta h1 {
font-size: 52px;
text-transform: uppercase;
color: #fff;
font-weight: 700;
}
.booking-cta p {
font-size: 20px;
color: rgba(255, 255, 255, 0.8);
}
footer {
position: relative;
height: 0px;
width: 100%;
background-color: #333333;
}
p.copyright {
position: absolute;
width: 100%;
color: #fff;
line-height: 40px;
font-size: 0.7em;
text-align: center;
bottom:0;
}
HTML Code:
<nav role="navigation">
<div id="menuToggle">
<!--
A fake / hidden checkbox is used as click reciever,
so you can use the :checked selector on it.
-->
<input type="checkbox" />
<!--
Some spans to act as a hamburger.
They are acting like a real hamburger,
not that McDonalds stuff.
-->
<span></span>
<span></span>
<span></span>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Info</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div id="booking" class="section">
<div class="section-center">
<div class="container">
<div class="row">
<div class="col-md-7 col-md-push-5">
<div class="booking-cta">
<h1>Bring Your Pet to Work</h1>
<p>Caring and Loving Pet service
</p>
</div>
</div>
<div class="col-md-4 col-md-pull-7">
<div class="booking-form">
<form>
<div class="form-group">
<span class="form-label">Where do you work? </span>
<input class="form-control" type="text" placeholder="Enter an address or zipcode">
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<span class="form-label">Drop off</span>
<input class="form-control" type="date" required>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<span class="form-label">Pick up</span>
<input class="form-control" type="date" required>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<span class="form-label">Pet?</span>
<select class="form-control">
<option>Cat</option>
<option>Dog</option>
<option>Others</option>
</select>
<span class="select-arrow"></span>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<span class="form-label">Service</span>
<select class="form-control">
<option>Day Care</option>
<option>Boarding</option>
<option>Sitting</option>
</select>
<span class="select-arrow"></span>
</div>
</div>
</div>
<div class="form-btn">
<button class="submit-btn">Check availability</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
//about the white space try set the margin-top of the body at 0;
//about the the hamberger icon try this:
nav {
display:flex;
flex-direction: flex-end; }
To move the hamburger to the right side, make sure your #menuToggle position is fixed or absolute, then removeleft: 50px; and add right: 50px; and if you want more top space you can increase top attribute value, ex: top: 100px; or top: 0; if you don't want any top space.
I've commented the CSS bellow, in case you were wondering what i've changed.
Here is the CSS code you should use: (I've tested it and it's working for me)
#menuToggle {
display: block;
position: fixed;
top: 50px; /** NOTE: decrease The pixels if want less space */
right: 50px;/** NOTE: Change This line */
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
#menuToggle a {
text-decoration: none;
color: #232323;
transition: color 0.3s ease;
}
#menuToggle a:hover {
color: tomato;
}
#menuToggle input {
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
/* hide this */
z-index: 2;
/* and place it over the hamburger */
-webkit-touch-callout: none;
}
/*
* Just a quick hamburger
*/
#menuToggle span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #cdcdcd;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
opacity 0.55s ease;
}
#menuToggle span:first-child {
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2) {
transform-origin: 0% 100%;
}
/*
* Transform all the slices of hamburger
* into a crossmark.
*/
#menuToggle input:checked~span {
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #ffffff;
}
/*
* But let's hide the middle one.
*/
#menuToggle input:checked~span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
/*
* Ohyeah and the last one should go the other direction
*/
#menuToggle input:checked~span:nth-last-child(2) {
transform: rotate(-45deg) translate(0, -1px);
}
/*
* Make this absolute positioned
* at the top left of the screen
*/
#menu {
position: absolute;
width: 300px;
margin: -100px 0 0;/** NOTE: Change this line */
padding: 50px;
padding-top: 125px;
right: -50px; /*NOTE: Add this line */
background: #ededed;
list-style-type: none;
-webkit-font-smoothing: antialiased;
/* to stop flickering of text in safari */
transform-origin: 0% 0%;
transform: translateX(100%);/** NOTE: Change this line */
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}
#menu li {
padding: 10px 0;
font-size: 22px;
}
/*
* And let's slide it in from the left
*/
#menuToggle input:checked~ul {
transform: none;
}
/*----------------------------------menu----------------------------*/
I want to change (a) tag to (li). When i do it css animation stop working. Why? It is not first time when i change (a) tag to (li) but i never have problem like this. Of course you need to do manipulations in css but this time i can not solve this problem. How can i change it?
<div class="panel" id="slice">
<div class="panel__content">
Close me.
</div>
</div>
<div class="menu">
<a class="menu__link" href="#slice" data-hover="Slice">Slice</a>
</div>
.menu {
position: fixed;
width: 100vw;
pointer-events: none;
margin-top: 10vh;
text-align: center;
z-index: 2; }
.menu__link {
display: inline-block;
text-decoration: none;
border: 2px solid #263238;
color: #263238;
pointer-events: auto;
line-height: 40px;
position: relative;
padding: 0 50px;
box-sizing: border-box;
margin: 0;
user-select: none;
overflow: hidden;
border-radius: 50px;
.panel {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
z-index: 999;
color: #000;
box-sizing: border-box;
background-color: #ECEFF1; }
.panel__content {
opacity: 0;
will-change: margin-top;
transition: all 700ms;
transition-delay: 600ms;
padding: 100px 200px;
margin-top: -5%; }
.panel:target .panel__content {
opacity: 1;
margin-top: 0; }
.panel#slice {
background-color: #E53935;
transition: all 800ms cubic-bezier(0.190, 1.000, 0.560, 1.000);
transform: translate3d( 0, -100%, 0 ); }
.panel#slice:target {
transform: translate3d( 0, 0, 0 ); }
You'd have to restyle the unordered list for spacing, but maybe instead of outright replacing your menu's <a> elements with <li>, you could include the <a> elements in the resulting list items.
This would preserve all the :target functionality and give you the list (for semantics?).
EDIT: Of course, this won't do at all if your menu just can not consist of anything but <li>.
/* basic style definition */
/* •••••••••••••••••••••••••••••••• */
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: 'Roboto Slab', serif;
}
h1 {
margin: 0;
user-select: none;
text-align: center;
font-weight: 300;
}
p,
{
font-weight: 300;
color: #546E7A;
user-select: none;
text-align: center;
margin: 0;
}
a {
text-align: center;
text-decoration: none;
color: #FFF;
}
/* Navigation menu */
/* •••••••••••••••••••••••••••••••• */
.menu {
position: fixed;
width: 100vw;
pointer-events: none;
margin-top: 10vh;
text-align: center;
z-index: 2;
}
/* Menu link item */
.menu__link {
display: inline-block;
text-decoration: none;
border: 2px solid #263238;
color: #263238;
pointer-events: auto;
line-height: 40px;
position: relative;
padding: 0 50px;
box-sizing: border-box;
margin: 0;
user-select: none;
overflow: hidden;
border-radius: 50px;
&::before {
content: attr(data-hover);
background-color: #263238;
color: #FFF;
position: absolute;
top: 100%;
bottom: 0;
left: 0;
transition: all 300ms cubic-bezier(0.190, 1.000, 0.560, 1.000);
right: 0;
}
&:hover::before {
top: 0;
}
}
/* Panels Style*/
/* •••••••••••••••••••••••••••••••• */
/* Common panel style */
.panel {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
z-index: 999;
color: #000;
box-sizing: border-box;
background-color: #ECEFF1;
}
/* panel content (only for animation delay after open) */
.panel__content {
opacity: 0;
will-change: margin-top;
transition: all 700ms;
transition-delay: 600ms;
padding: 100px 200px;
margin-top: -5%;
}
/* Panel content animation after open */
.panel:target .panel__content {
opacity: 1;
margin-top: 0;
}
/* Specific "Home "panel */
/* •••••••••••••••••••••••••••••••• */
.panel#home {
z-index: 1;
background: radial-gradient(ellipse at center, rgba(255, 255, 255, 1) 0%, #CFD8DC 100%);
}
/* Specific panel "Slice" */
/* •••••••••••••••••••••••••••••••• */
.panel#slice {
background-color: #E53935;
transition: all 800ms cubic-bezier(0.190, 1.000, 0.560, 1.000);
transform: translate3d( 0, -100%, 0);
}
.panel#slice:target {
transform: translate3d( 0, 0, 0);
}
/* Specific panel "Fade" effect */
/* •••••••••••••••••••••••••••••••• */
.panel#fade {
background-color: #00C853;
opacity: 0;
transition: all 800ms;
pointer-events: none;
}
.panel#fade:target {
opacity: 1;
pointer-events: auto;
}
<!-- Home Panel -->
<div class="panel" id="home">
<h1>Pure CSS panels</h1>
<p>by Mattia Astorino</p>
</div>
<div class="panel" id="slice">
<div class="panel__content">
<a href="#home">
Close me.
</a>
</div>
</div>
<div class="panel" id="fade">
<div class="panel__content">
Close me.
</div>
</div>
<!-- Navigation -->
<div class="menu">
<ul>
<li>
<a class="menu__link" href="#slice" data-hover="Slice">Slice</a>
</li>
<li>
<a class="menu__link" href="#fade" data-hover="Fade">Fade</a>
</li>
</ul>
</div>
I'm a student in the process of coding a website for a school project. My level is very beginner (coding is extremely difficult for me) so my apologies if my question is very amateur. I'm creating a site that will display a collection of postcards. I'm trying to get my dropdown menu to work, however on some pages it seems to function, while other pages it doesn't (mainly the pages that have a carousel on them). I will post my code (HTML + CSS below) but my layout is a body container, then top and bottom containers. The carousel (in the bottom container) is where photos of my postcard collection would go, while the drop down menu is in the top container. The dropdown menu isn't functioning properly and the styling isn't totally on point (the "MENU" text will not display in the typeface I need). The carousel works perfectly fine though on the same page.
HTML
<!--Developed by Matthew Nielsen-->
<!DOCTYPE html>
<title>Carousel Collection</title>
<html>
<head>
<meta name="Mattew Nielsen" content="Collection Interface">
<link rel="stylesheet" type="text/css" href="../css/carouselStyle.css">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Neuton|Raleway" rel="stylesheet">
</head>
<body>
<div class="bodyContainer">
<div class="topcontainer">
<div class="dropdown">
<button class="dropbtn">MENU</button>
<div class="dropdown-content">
Home
Continents
About
</div>
</div>
<div class="bottomContainer">
<div class="carousel">
<div class="carousel-inner">
<input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked">
<div class="carousel-item">
<img src="/images/AS1.jpg">
</div>
<input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden="">
<div class="carousel-item">
<img src="/images/AS2.jpg">
</div>
<input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden="">
<div class="carousel-item">
<img src="/images/AS3.jpg">
</div>
<label for="carousel-3" class="carousel-control prev control-1">‹</label>
<label for="carousel-2" class="carousel-control next control-1">›</label>
<label for="carousel-1" class="carousel-control prev control-2">‹</label>
<label for="carousel-3" class="carousel-control next control-2">›</label>
<label for="carousel-2" class="carousel-control prev control-3">‹</label>
<label for="carousel-1" class="carousel-control next control-3">›</label>
<ol class="carousel-indicators">
<li>
<label for="carousel-1" class="carousel-bullet">•</label>
</li>
<li>
<label for="carousel-2" class="carousel-bullet">•</label>
</li>
<li>
<label for="carousel-3" class="carousel-bullet">•</label>
</li>
</ol>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
/* carouselStyle.css */
/*Developed by Matthew Nielsen*/
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
.bodyContainer {
height: 100%;
width: 100%;
background-image: url(/images/message.JPG);
opacity: .5;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
z-index: -1;
}
/* Top Container + Nav Bar */
.topContainer {
height: 50%;
width: 100%
}
.navbar {
overflow: hidden;
background-color: gray;
}
.navbar a {
float: left;
font-family: Raleway;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* Bottom Container + Carousel */
.bottomContainer {
height: 50%;
width: 100%
}
.carousel {
position: relative;
align-content: center;
box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.64);
margin-top: 26px;
}
.carousel-inner {
position: relative;
align-content: center;
overflow: hidden;
width: 100%;
}
.carousel-open:checked+.carousel-item {
position: static;
align-content: center;
opacity: 100;
}
.carousel-item {
position: absolute;
opacity: 0;
-webkit-transition: opacity 0.6s ease-out;
transition: opacity 0.6s ease-out;
}
.carousel-item img {
display: block;
align-content: center;
height: auto;
max-width: 100%;
}
.carousel-control {
background: rgba(0, 0, 0, 0.28);
border-radius: 50%;
color: #fff;
cursor: pointer;
display: none;
font-size: 40px;
height: 40px;
line-height: 35px;
position: absolute;
top: 50%;
-webkit-transform: translate(0, -50%);
cursor: pointer;
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
text-align: center;
width: 40px;
z-index: 10;
}
.carousel-control.prev {
left: 2%;
}
.carousel-control.next {
right: 2%;
}
.carousel-control:hover {
background: rgba(0, 0, 0, 0.8);
color: #aaaaaa;
}
#carousel-1:checked~.control-1,
#carousel-2:checked~.control-2,
#carousel-3:checked~.control-3 {
display: block;
}
.carousel-indicators {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
bottom: 2%;
left: 0;
right: 0;
text-align: center;
z-index: 10;
}
.carousel-indicators li {
display: inline-block;
margin: 0 5px;
}
.carousel-bullet {
color: #fff;
cursor: pointer;
display: block;
font-size: 35px;
}
.carousel-bullet:hover {
color: #aaaaaa;
}
#carousel-1:checked~.control-1~.carousel-indicators li:nth-child(1) .carousel-bullet,
#carousel-2:checked~.control-2~.carousel-indicators li:nth-child(2) .carousel-bullet,
#carousel-3:checked~.control-3~.carousel-indicators li:nth-child(3) .carousel-bullet {
color: #428bca;
}
/*
#title {
width: 100%;
position: absolute;
padding: 0px;
margin: 0px auto;
text-align: center;
font-size: 27px;
color: rgba(255, 255, 255, 1);
font-family: 'Open Sans', sans-serif;
z-index: 9999;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33), -1px 0px 2px rgba(255, 255, 255, 0);
} */
I am curious if anyone that views this might see any glaring problems or have recommendations on how to fix this?
Thank you
Your drop-down nav is actually working great! If you comment out .bottomcontainer you can see that it works properly upon hovering, and all links seem to be clickable.
The trouble is with your positioning of the carousel:
.carousel {
position: relative; /* remove this */
align-content: center;
box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.64);
margin-top: 26px;
}
Right now, with position: relative; your carousel is covering the site. You can't technically hover over the nav behind it, even though you can see it. It's unnecessary to use relative in the snippet you've provided. Remove that line of code and you'll find that formatting doesn't change, the nav bar works properly, and your carousel still works.
Some further information on position: ; can be found at CSS Tricks.
A further suggestion from my own design guidelines, I recommend that you separate the divs for a top and bottom container like this:
<div class="bodyContainer">
<div class="topcontainer">
/* nav stuff */
</div>
<div class="bottomContainer">
/* carousel stuff */
</div>
</div>
It will clean up the inherited style the bottom container might accidentally steal from your nav bar and less involved elements will help you troubleshoot those style troubles you were having. It will also help you to visualize your site with two separate elements working alongside each other.
Finally, you'll want to close all style traits with a semi-colon (;) in places like this. I noticed a few of these throughout your code. It is compiling fine, but it will cause confusion when you try to add another line.
.topContainer {
height: 50%;
width: 100% /* <--- here */
}
.wrap {
background-color: #393939;
height: inherit;
}
/*-----------------------header---------------------------------------------------------*/
.header-inner {
background-color: #393939;
width: 100%;
height: 70px;
/* [disabled]display: flex; */
position: fixed;
top: 0;
}
.pclogo {
display: none;
}
.tabletlogo {
display: none;
}
.line {
display: none;
}
a .mobilelogo {
width: 215px;
height: auto;
margin-top: 10px;
display: block;
margin-right: auto;
margin-left: auto;
cursor: pointer;
}
/*doesn't show the navigation bar*/
.navbar {
display: none
}
/*---------------------hamburger-----------------------*/
.hamburger {
display: block;
position: absolute;
top: 10px;
right: 3.3%;
cursor: pointer;
float: right;
z-index: 4/*important!!! humburger menu comes on the top of side menu*/
}
.bar1,
.bar2,
.bar3 {
width: 26px;
height: 3px;
/* Original 5px*/
margin: 8px 0;
/* Original 6px*/
transition: 0.6s;
background-color: white;
border-radius: 3px;
}
/* Rotate first bar */
.change .bar1 {
-webkit-transform: translate(0px, 5.5px) rotate(-45deg);
/*move →0px ↓5.5px(hight of bar/2+margin/2) and lotate ↺45°*/
transform: translate(0px, 5.5px) rotate(-45deg);
background-color: rgba(207, 207, 207, 1.00);
}
/* Fade out the second bar */
/*.change .bar2 {
opacity: 0;
}*/
/* Rotate last bar */
.change .bar3 {
-webkit-transform: translate(0px, -5.5px) rotate(45deg);
transform: translate(0px, -5.5px) rotate(45deg);
background-color: rgba(207, 207, 207, 1.00);
}
/*---dropdown menu---*/
.dropdown {
height: 100%;
width: 0;
position: fixed;
z-index: 3;
/*important!!! humburger menu comes on the top of side menu*/
top: 0;
right: 0;
background-color: #393939;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
text-align: center;
}
.dropdown a {
display: none;
transition: 0.4s;
}
/*---dropdown menu withdraw---*/
.change.dropdown {
height: 100%;
width: 50%;
position: fixed;
z-index: 3;
top: 0;
right: 0;
background-color: rgba(69, 69, 69, 0.90);
/*Color Transparency of side menu*/
overflow-x: hidden;
transition: 0.6s;
padding: 68px 0 0 0;
/* control the space above "Home"*/
text-align: center;
}
/*---dropdown menu effect---*/
.change.dropdown a {
padding: 10px 5px;
font-family: 'Kozuka Gothic Pr6N';
font-size: 18px;
text-decoration: none;
color: white;
display: block;
transition: 0.3s;
border-bottom: rgba(163, 161, 161, 0.77);
}
.dropdown a::before {
-webkit-transition-duration: 0.3s;
/* Safari */
transition-duration: 0.3s;
content: attr(data-hover);
/*The attr() property inserts a specified attribute's value before or after the selected element(s).*/
}
.dropdown a:hover {
border-left: 2px solid rgba(255, 255, 255, 0.70);
border-right: 2px solid rgba(255, 255, 255, 0.70);
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
transform: scale(0.9);
color: rgba(255, 255, 255, 0.70);
}
/*---------------------hamburger---------------------------*/
/*---------------------------------------------header----------------------------------------------*/
/*----------------------------------------------Main----------------------------------------------*/
.main-inner {
min-height: 100%;
height: auto !important;
/*Cause footer to stick to bottom in IE 6*/
height: 100%;
vertical-align: bottom;
padding-top: 70px;
/*-------important!!!!!-------*/
}
.slideimage-container img {
height: inherit;
width: 100%;
/* [disabled]padding-top: 90px; */
/* [disabled]padding-bottom: 70px; */
object-fit: cover;
object-position: center;
overflow: hidden;
}
/*----------update list-----------*/
.update-container {
padding: 5px;
width: 100%;
}
.update-container table {
margin: 0 auto;
}
.update-container table tr {
color: white;
font-size: 10px;
font-family: 'Kozuka Gothic Pr6N';
text-align: left;
font-weight: thin;
padding: 5px 10px;
vertical-align: top;
}
/*----------------------------------------------Main----------------------------------------------*/
/*----------------------------------------------Footer----------------------------------------------*/
.footer-inner {
width: 100%;
/* [disabled]padding-top: 15px; */
/*space between Main and Footer*/
height: 28px;
bottom: 0;
position: fixed;
background-color: #393939;
z-index: 1;
}
.line-footer {
display: none;
/* [disabled]width: 100%; */
/* [disabled]height: 1px; */
/* [disabled]border-bottom: 1px solid white; */
/* [disabled]margin-bottom: 15px; */
/* [disabled]position: absolute; */
}
.copyright {
width: 100%;
float: right;
font-family: 'Kozuka Gothic Pr6N';
color: #ffffff;
font-size: 0.5px;
bottom: 0px;
padding: 10px 5px 0 0;
/* [disabled]margin-right: 5px; */
text-align: right;
/* [disabled]position: absolute; */
}
/*----------------------------------------------Footer----------------------------------------------*/
<body oncontextmenu="return false">
<div class="wrap">
<!-- to define the maximum width -->
<!-- Header -->
<header>
<div class="container">
<div class="header-inner">
<!-- Header Flex (logo and navbar) -->
<!-- Hamburger -->
<div class="hamburger" onclick="myFunction(this)">
<div class="bar1"></div>
<!-- <div class="bar2"></div> -->
<div class="bar3"></div>
</div>
<div id="myDIV" class="dropdown" role="navigation">
Home
News
Concept
Profile
Works
Contact
</div>
<!-- x is used to change hamburger menu, y is used to change side menu width -->
<script>
function myFunction(x) {
x.classList.toggle("change");
var y = document.getElementById("myDIV");
y.classList.toggle("change");
}
</script>
<!-- Hamburger -->
<ul class="navbar" role="navigation">
<li>Home</li>
<li>News</li>
<li>Concept</li>
<li>Profile</li>
<li>Works</li>
<li>Contact</li>
</ul>
<div class="line"></div>
</div>
</div>
</header>
<!-- Main Content -->
<main>
<div class="container">
<div class="main-inner">
</div>
</div>
<div class="container">
<div class="update-container">
</div>
</div>
</main>
<!-- End Main Content -->
<!-- Footer -->
<footer>
<div class="container">
<div class="footer-inner">
<div class="line-footer"></div>
<div class="copyright">
Copyright © 小野寺康都市設計事務所. All rights reserved.
</div>
</div>
</div>
</footer>
<!-- End Footer -->
</div>
</body>
z-index
show the footer on top of main contents under the side menu
.dropdown `{height: 100%;width: 0;position: fixed;z-index: 3;/*important!!! humburger menu comes on the top of side menu*/top: 0;right: 0;background-color: #393939;overflow-x: hidden;transition: 0.5s;padding-top: 60px;text-align: center;}`
.hamburger `{display: block;position: absolute;top: 10px;right: 3.3%;cursor: pointer;float: right;z-index: 4/*important!!! humburger menu comes on the top of side menu*/}`
.footer-inner `{width: 100%;/* [disabled]padding-top: 15px; *//*space between Main and Footer*/height: 28px;bottom: 0;position: fixed;background-color: #393939;z-index: 1;}`
Footer(z-index:1) should be showed under the side menu(z-index:3) and hamburger(z-index:4).
If I changed z-index of footer to -1, it gets the desired result, but then footer comes behind the main contents...
I want to keep footer on top of main contents under the side menu.
z-index can be tricky because it is relative to the containing z-index. A z-index is calculated for any object that is positioned (meaning relative, absolute, fixed, or sticky).
Because .header-inner is fixed, it has a calculated z-index of 0. Now, because z-index is relative to the containing z-index, your .inner-footer's z-index is relative to z-index 0, so any z-index that is nested in .header-inner will not be able to be placed on top of a block that is on top of .header-inner unless you change .header-inner's z-index to a greater value.
This ultimately means that your .inner-footer's z-index of 1 is competing vs. a z-index of 0, so it will always be placed on top unless you change the competing z-index to a value greater than 1 (change it to 2).
To make it clearer that .hamburger and .change.dropdown have nested z-index values, you can change these to 2 and 1, respectively, and they will have the same effect as they do now.
See the modified code:
.wrap {
background-color: #393939;
height: inherit;
}
/*-----------------------header---------------------------------------------------------*/
.header-inner {
background-color: #393939;
width: 100%;
height: 70px;
/* [disabled]display: flex; */
position: fixed;
z-index: 2; /* to place this on top of footer */
top: 0;
}
.pclogo {
display: none;
}
.tabletlogo {
display: none;
}
.line {
display: none;
}
a .mobilelogo {
width: 215px;
height: auto;
margin-top: 10px;
display: block;
margin-right: auto;
margin-left: auto;
cursor: pointer;
}
/*doesn't show the navigation bar*/
.navbar {
display: none
}
/*---------------------hamburger-----------------------*/
.hamburger {
display: block;
position: absolute;
top: 10px;
right: 3.3%;
cursor: pointer;
float: right;
z-index: 2 /*important!!! humburger menu comes on the top of side menu*/
}
.bar1,
.bar2,
.bar3 {
width: 26px;
height: 3px;
/* Original 5px*/
margin: 8px 0;
/* Original 6px*/
transition: 0.6s;
background-color: white;
border-radius: 3px;
}
/* Rotate first bar */
.change .bar1 {
-webkit-transform: translate(0px, 5.5px) rotate(-45deg);
/*move →0px ↓5.5px(hight of bar/2+margin/2) and lotate ↺45°*/
transform: translate(0px, 5.5px) rotate(-45deg);
background-color: rgba(207, 207, 207, 1.00);
}
/* Fade out the second bar */
/*.change .bar2 {
opacity: 0;
}*/
/* Rotate last bar */
.change .bar3 {
-webkit-transform: translate(0px, -5.5px) rotate(45deg);
transform: translate(0px, -5.5px) rotate(45deg);
background-color: rgba(207, 207, 207, 1.00);
}
/*---dropdown menu---*/
.dropdown {
height: 100%;
width: 0;
position: fixed;
z-index: 3;
/*important!!! humburger menu comes on the top of side menu*/
top: 0;
right: 0;
background-color: #393939;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
text-align: center;
}
.dropdown a {
display: none;
transition: 0.4s;
}
/*---dropdown menu withdraw---*/
.change.dropdown {
height: 100%;
width: 50%;
position: fixed;
z-index: 1; /* below hamburger */
top: 0;
right: 0;
background-color: rgba(69, 69, 69, 0.90);
/*Color Transparency of side menu*/
overflow-x: hidden;
transition: 0.6s;
padding: 68px 0 0 0;
/* control the space above "Home"*/
text-align: center;
}
/*---dropdown menu effect---*/
.change.dropdown a {
padding: 10px 5px;
font-family: 'Kozuka Gothic Pr6N';
font-size: 18px;
text-decoration: none;
color: white;
display: block;
transition: 0.3s;
border-bottom: rgba(163, 161, 161, 0.77);
}
.dropdown a::before {
-webkit-transition-duration: 0.3s;
/* Safari */
transition-duration: 0.3s;
content: attr(data-hover);
/*The attr() property inserts a specified attribute's value before or after the selected element(s).*/
}
.dropdown a:hover {
border-left: 2px solid rgba(255, 255, 255, 0.70);
border-right: 2px solid rgba(255, 255, 255, 0.70);
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
transform: scale(0.9);
color: rgba(255, 255, 255, 0.70);
}
/*---------------------hamburger---------------------------*/
/*---------------------------------------------header----------------------------------------------*/
/*----------------------------------------------Main----------------------------------------------*/
.main-inner {
min-height: 100%;
height: auto !important;
/*Cause footer to stick to bottom in IE 6*/
height: 100%;
vertical-align: bottom;
padding-top: 70px;
/*-------important!!!!!-------*/
}
.slideimage-container img {
height: inherit;
width: 100%;
/* [disabled]padding-top: 90px; */
/* [disabled]padding-bottom: 70px; */
object-fit: cover;
object-position: center;
overflow: hidden;
}
/*----------update list-----------*/
.update-container {
padding: 5px;
width: 100%;
}
.update-container table {
margin: 0 auto;
}
.update-container table tr {
color: white;
font-size: 10px;
font-family: 'Kozuka Gothic Pr6N';
text-align: left;
font-weight: thin;
padding: 5px 10px;
vertical-align: top;
}
/*----------------------------------------------Main----------------------------------------------*/
/*----------------------------------------------Footer----------------------------------------------*/
.footer-inner {
width: 100%;
/* [disabled]padding-top: 15px; */
/*space between Main and Footer*/
height: 28px;
bottom: 0;
position: fixed;
background-color: #393939;
z-index: 1;
}
.line-footer {
display: none;
/* [disabled]width: 100%; */
/* [disabled]height: 1px; */
/* [disabled]border-bottom: 1px solid white; */
/* [disabled]margin-bottom: 15px; */
/* [disabled]position: absolute; */
}
.copyright {
width: 100%;
float: right;
font-family: 'Kozuka Gothic Pr6N';
color: #ffffff;
font-size: 0.5px;
bottom: 0px;
padding: 10px 5px 0 0;
/* [disabled]margin-right: 5px; */
text-align: right;
/* [disabled]position: absolute; */
}
<body oncontextmenu="return false">
<div class="wrap">
<!-- to define the maximum width -->
<!-- Header -->
<header>
<div class="container">
<div class="header-inner">
<!-- Header Flex (logo and navbar) -->
<!-- Hamburger -->
<div class="hamburger" onclick="myFunction(this)">
<div class="bar1"></div>
<!-- <div class="bar2"></div> -->
<div class="bar3"></div>
</div>
<div id="myDIV" class="dropdown" role="navigation">
Home
News
Concept
Profile
Works
Contact
</div>
<!-- x is used to change hamburger menu, y is used to change side menu width -->
<script>
function myFunction(x) {
x.classList.toggle("change");
var y = document.getElementById("myDIV");
y.classList.toggle("change");
}
</script>
<!-- Hamburger -->
<ul class="navbar" role="navigation">
<li>Home</li>
<li>News</li>
<li>Concept</li>
<li>Profile</li>
<li>Works</li>
<li>Contact</li>
</ul>
<div class="line"></div>
</div>
</div>
</header>
<!-- Main Content -->
<main>
<div class="container">
<div class="main-inner">
</div>
</div>
<div class="container">
<div class="update-container">
</div>
</div>
</main>
<!-- End Main Content -->
<!-- Footer -->
<footer>
<div class="container">
<div class="footer-inner">
<div class="line-footer"></div>
<div class="copyright">
Copyright © 小野寺康都市設計事務所. All rights reserved.
</div>
</div>
</div>
</footer>
<!-- End Footer -->
</div>
</body>
Try adding z-index:2 to your .header-inner class and see if you get the desired result.