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 */
}
Related
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.
I am having a problem with the hero image, it always hides my dropdown menu even though I put a higher z-index on the menu. I have found a "solution" for this, I gave the hero image z-index:-1, but now my button on the hero image doesn't work. I want to have this work without any workarounds.
jsfiddle here (here the dropdown works, because #hero-img has z-index:-1, but the top button doesn't work)
https://jsfiddle.net/xLo7wcph/1/
1) please help me find a reason why the z-index > 0 doesn't work + solution for this, without using z-index:0;
2) bonus question, why the button doesn't work when I set the hero img on negative z-index even though I have btn z-index : 1;
<nav id="navbar" class="flex">
<div class="flex-1 "><img src="images/drevo2.svg"></div>
<div class="flex-2 ">falco's woodwork.</div>
<div class="flex-3 flex-element push">
domů
</div>
<div class="flex-4 flex-element">
nabídka
<div class="dropdown">
<p>motýlci</p>
<p>dekorace</p>
<p>ostatní</p>
</div>
</div>
<div class="flex-5 flex-element">
kontakt
</div>
<div class="flex-6 flex-element">
nákup
</div>
</nav>
<div id="hero-img">
<div class="text-box">
<h1>
<span class="text-box--main">objevte krásu</span>
<br>
<span class="text-box--sub">ručně tvořených výrobků</span>
<br>
</h1>
</div>
<button class="btn"><img src="images/SIPKA DOLU.svg"></button>
</div>
#navbar{
border-bottom:solid 1px black;
.dropdown{
position:absolute;
z-index: 3;
display:none;
border-top:none;
padding:1rem 2rem;
background-color: rgba(0, 0, 0, 0.801);
left:-1.8rem;
top:3.7rem;
p{
color:white;
&:hover{
border-bottom: 1px solid white;
}
}
}
.flex-element:hover .dropdown{
display:block;
z-index: 2;
}
}
#hero-img{
position: relative;
background:linear-gradient(to top, black 0%, rgba(0, 0, 0, 0.5) 0%), url("../images/hero image.jpg") no-repeat top;
height: calc(100vh - 3.8rem);/* - vyska nav baru*/
background-size: cover;
z-index: -1;
}
Removing z-index: -1; from the #hero-img and adding these lines solves your problem.
#navbar{
position: relative;
z-index: 1;
}
Initially what was happening is, position: relative on #hero-img was hiding your dropdown. because position-wise #hero-img was upper than #navbar. that's why you should also add z-index in the #navbar.
And you gave negative z-index value to appear the dropdown. when you give negative z-index to an element it will be rendered under other elements.
In this case, the #hero-img was under the body. the button won't show up when you give high z-index value because it's parent #hero-img is under the top layer.
working demo:
btn,
.btn:link,
.btn:visited {
background-color: rgba(255, 255, 255, 0);
border-style: none;
animation: btnFadeIn .5s ease-in forwards;
outline: none;
position: absolute;
bottom: 2%;
left: 50%;
transform: translateX(-50%);
z-index: 3; }
.btn:hover {
cursor: pointer; }
#navbar {
border-bottom: solid 1px black; }
#navbar .dropdown {
position: absolute;
z-index: 3;
display: none;
border-top: none;
padding: 1rem 2rem;
background-color: rgba(0, 0, 0, 0.801);
left: -1.8rem;
top: 3.7rem; }
#navbar .dropdown p {
color: white; }
#navbar .dropdown p:hover {
border-bottom: 1px solid white; }
#navbar .flex-element:hover .dropdown {
display: block;
z-index: 2; }
#navbar .flex-1 {
width: 3rem;
height: 3rem;
margin-left: .5rem;
align-self: center;
padding: .3rem;
font-size: 2rem; }
#navbar .flex-2 {
padding: .3rem;
font-size: 2rem;
margin-right: 5rem; }
#navbar .flex-2 a {
text-decoration: none;
color: black; }
#navbar .flex-element {
padding: .3rem;
font-size: 2rem;
margin-right: 5rem;
transition: all .2s ease-out;
position: relative; }
#navbar .flex-element a {
text-decoration: none;
color: black; }
#navbar .flex-element:first-child {
margin-right: 0; }
#navbar .flex-element:hover {
transform: translateY(1.5px); }
#navbar .flex-element:active {
transform: translateY(-1.5px); }
#font-face {
font-family: 'Proxima Nova';
src: url("../proxima_ssv/Proxima Nova Thin.otf") format("opentype"); }
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit; }
html {
font-size: 62.5%;
scroll-behavior: smooth; }
body {
font-family: 'Proxima Nova', sans-serif;
line-height: 1.6;
color: black;
box-sizing: border-box; }
.push {
margin-left: auto; }
.line {
background-color: #C6C6C6;
border: solid .1rem #C6C6C6;
max-width: 960px; }
#navbar{
position: relative;
z-index: 1;
}
#hero-img {
position: relative;
/*background: linear-gradient(to top, black 0%, rgba(0, 0, 0, 0.5) 0%), url("../images/hero image.jpg") no-repeat top;*/
background-color:darkgreen;
height: calc(100vh - 3.8rem);
/* - vyska nav baru*/
background-size: cover;
}
.text-box {
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, 40%);
backface-visibility: hidden;
text-transform: uppercase;
text-align: left; }
.text-box h1 {
line-height: 1; }
.text-box--main {
display: inline-block;
font-size: 4rem;
color: white;
animation: moveInLeft 1.5s ease-out; }
.text-box--sub {
display: inline-block;
color: white;
font-size: 6.5rem;
animation: moveInRight 1.5s ease-out; }
.flex {
display: flex;
flex-wrap: wrap; }
<nav id="navbar" class="flex">
<div class="flex-1 "></div>
<div class="flex-2 ">falco's woodwork.</div>
<div class="flex-3 flex-element push">
domů
</div>
<div class="flex-4 flex-element">
nabídka
<div class="dropdown">
<p>motýlci</p>
<p>dekorace</p>
<p>ostatní</p>
</div>
</div>
<div class="flex-5 flex-element">
kontakt
</div>
<div class="flex-6 flex-element">
nákup
</div>
</nav>
<div id="hero-img">
<div class="text-box">
<h1>
<span class="text-box--main">objevte krásu</span>
<br>
<span class="text-box--sub">ručně tvořených výrobků</span>
<br>
</h1>
</div>
<button class="btn">theButtonThatDoesntWork</button>
</div>
.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.
I have been trying for hours with different methods to get my navigation buttons to be mobile-responsive and collapse in a specified vertical order. I want the nav buttons to collapse in a vertical column below the two logos, once the screen size is shrunken (to around 500px). How do I fix my code to achieve this?
.container-fluid {
border: 1px solid #000000;
max-width: 1600px;
overflow: hidden;
}
.wrap {
/*background-color: yellow;*/
/*overflow: hidden;*/
}
.Logos {
width: 312px;
display: inline-block;
/*background-color: blue;*/
}
/*
.Logos img{
max-width: 300px;
height: auto;
}
*/
.nav.wrap.one {
display: inline-block;
/*background-color: green;*/
float: right;
margin-top: 25px;
}
ul.navigation {
font: bold 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
/*text-align center;*/
/*border: 1px solid green;*/
/*overflow: hidden;*/
}
.navigation li {
display: inline-block;
}
.navigation a {
background: #395870;
background: linear-gradient(#49708f, #293f50);
border-right: 1px solid rgba(0, 0, 0, .3);
color: #fff;
padding: 12px 20px;
text-decoration: none;
}
.navigation a:hover {
background: #314b0;
box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, .3);
}
.navigation li:first-child a {
border-radius: 4px 0 0 4px;
}
.navigation li:last-child a {
border-right: 0;
border-radius: 0 4px 4px 0;
}
.row.two {
background-image: url(https://s1.postimg.org/5gvbly4hin/East_Hyde_Park_Chicago_aerial_0470.jpg);
background-position: absolute;
background-size: cover;
background-repeat: no-repeat;
max-width: 100%;
height: 550px;
margin: auto;
}
.floater.box {
background-color: rgba(255, 255, 255, .40);
border-radius: 10px;
/*opacity: .45;*/
max-width: 75%;
height: 200px;
position: absolute;
top: 50%;
left: 0;
right: 0;
margin: auto;
overflow: hidden;
}
.form-search {
margin: 0 auto;
text-align: center;
font: bold 13px sans-serif;
max-width: 325px;
position: relative;
}
.form-search input {
width: 230px;
box-sizing: border-box;
border-bottom-left-radius: 2px;
border-top-left-radius: 2px;
background-color: #ffffff;
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
padding: 14px 15px 14px 40px;
border: 1px solid #b6c3cd;
;
border-right: 0;
color: #4E565C;
outline: none;
margin-top: 70px;
-webkit-appearance: none;
}
.form-search button {
border-bottom-right-radius: 2px;
border-top-right-radius: 2px;
background-color: #6caee0;
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
color: #ffffff;
padding: 15px 22px;
margin-left: -4px;
cursor: pointer;
border: none;
outline: none;
}
.form-search i {
position: absolute;
top: 15px;
left: 20px;
font-size: 16px;
color: #80A3BD;
}
/* Placeholder color */
.form-search input::-webkit-input-placeholder {
color: #879097;
}
.form-search input::-moz-placeholder {
color: #879097;
opacity: 1;
}
.form-search input:-ms-input-placeholder {
color: #879097;
}
.nav.wrap.two {
display: inline-block;
text-align: center;
width: 100%;
margin-top: 10px;
}
<div class="container-fluid">
<!-- Top Box -->
<div class="wrap">
<div class="Logos">
<img src="https://s26.postimg.org/iqkxecqnd/Coldwell_Banker-_Logo_RS1.jpg" width="150" height="82" class="img-responsive" />
<img src="https://s26.postimg.org/iqkxecqnd/Coldwell_Banker-_Logo_RS1.jpg" width="150" height="82" class="img-responsive" /> </div>
<div class="nav wrap one">
<!--navigation buttons-->
<ul class="navigation">
<li id="NAV-ONE">LOG IN</li>
<li id="NAV-TWO">BUY A HOME</li>
<li id="NAV-THREE">SELL A HOME</li>
<li id="NAV-FOUR">CONTACT US</li>
</ul>
</div>
</div>
<!-- Middle Box -->
<div class="row two">
<div>
<div class="floater box">
<form class="form-search" method="get" action="#">
<input type="search" name="search" placeholder="I am looking for..">
<button type="submit">Search</button>
<i class="fa fa-search"></i>
</form>
</div>
</div>
</div>
</div>
<!-- Bottom Box -->
<div class="row three">
<div class="nav wrap two">
<!--navigation buttons-->
<ul class="navigation">
<li id="NAV-A">MY LISTINGS</li>
<li id="NAV-B">COMMUNITIES SERVED</li>
<li id="NAV-C">PROPERTIES</li>
</ul>
</div>
</div>
</div>
Here is a link to my CodePen: https://codepen.io/IDCoder/full/rGWeEE/
CSS is all about be natural order, natural position, natural styles... what I means is that your code isn't being natural, you can see here:
.navigation li {
display: inline-block;
}
.navigation a {
padding: 12px 20px;
}
I want to focus me in those properties because here we are saying:
You <a> element that are inside this man -> <li> (<li id="NAV-ONE">LOG IN</li>), yes you! You will be bigger even if you're inside him!
Well, in real life, we can't put bigger things into smaller spaces. What happens in real life and CSS is: smaller things into bigger things.
So if we make this change:
.navigation li {
display: inline-block;
padding: 12px 20px;
}
.navigation a {
/* We changed who is bigger than who */
}
It takes a natural order (because now the spaces where .navigation a will be is bigger than him). The final code is something like this (this will wrap when you use phone):
.navigation li {
display: inline-block;
padding: 12px 20px;
background: linear-gradient(#49708f, #293f50);
background: #395870;
border-right: 1px solid rgba(0, 0, 0, .3);
}
.navigation a {
color: #fff;
text-decoration: none;
}
More
I was playing and I found this cool way to wrap when screen is small, I think it's cool:
#media all and (max-width: 500px){
ul.navigation{
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
}
}
Also, remember that when you want to make responsive design you need meta:viewport into your html's head:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
I am trying to move mobile navigation from top left corner and slide in from left side to the right side. I've tried to change position settings from left to right, but it didn't work.
I will really appreciate any help!
Code below, thank you!
#wrapper {
position: absolute;
width: auto;
min-width: 60px;
height: 100%;
overflow: hidden;
margin: 0 auto;
padding: 0;
}
label {
cursor: pointer;
}
&:focus {
outline: none;
}
.menu {
position: absolute;
top: 0;
left: 0;
background: #fff;
width: 240px;
height: 100%;
transform: translate3d(-240px, 0, 0);
transition: transform 0.35s;
}
label.menu-toggle {
position: absolute;
right: -60px;
width: 60px;
height: 60px;
line-height: 0px;
display: block;
padding: 0;
text-indent: -9999px;
background: transparent url(https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png) 50% 50% / 25px 25px no-repeat;
}
label.active {
background: transparent url(menu-cross.png) 50% 50% / 25px 25px no-repeat;
}
ul li>label {
background: url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-right-b-128.png) 95% 50% / 16px 16px no-repeat;
}
a,
label {
display: block;
text-align: left;
padding: 0 30px;
line-height: 60px;
text-decoration: none;
margin: 0 auto;
color: #000;
}
&:hover {
color: #666;
}
.menu-checkbox{
display: none;
}
.menu .menu label.menu-toggle {
background: none;
}
.menu-checkbox:checked + .menu {
transform: translate3d(0, 0, 0);
}
<div id="wrapper">
<input type="checkbox" id="menub" name="menu" class="menu-checkbox">
<div class="menu">
<label class="menu-toggle" for="menub"><span>Toggle</span></label>
<ul>
<li>
link
</li>
<li>
link
</li>
<li>
link
</li>
</ul>
</div>
</div>
<!-- #wrapper -->
I believe you have overcomplicated your task. You could simply open new project on visual studio and go from there. This would be the best option, since the result you want to achieve is most likely the same.
Now if you do want to stick to this, you must go carefully through your style code and what could be preventing the item to align on the right side.