I can not get a solution – after testing some hours. Maybe anybody can help me.
The mobile menu opens correct, but does not close when clicking the close-button or the dark background.
On all devices, Android, Windows, Mac, on every Browser it works very fine. Only on iOS (Safari), the close-function does not react.
Anybody has a solution for this problem?
Thank you very much!
#head-top-inner-right {
float: left;
padding-left: 12px;
}
#nav-container {
position: fixed;
height: 100vh;
width: 100%;
pointer-events: auto !important;
}
#nav-container .bg {
position: absolute;
top: -10px;
left: 0;
width: 100%;
height: 100% !important;
visibility: hidden;
opacity: 0;
transition: .3s;
background: #000;
}
#nav-container:focus-within .bg {
visibility: visible;
opacity: .6;
}
#nav-container * {
visibility: visible;
}
.button {
position: relative !important;
display: flex;
flex-direction: column;
justify-content: center;
-webkit-appearance: none;
border: 0;
background: #fff;
border: 1px solid #E6E6E6;
border-radius: 0;
height: 50px;
width: 30px;
padding-left: 10px;
padding-right: 10px;
margin-top: 5px;
cursor: pointer;
pointer-events: auto;
margin-left: 25px;
margin-right: 0px;
touch-action: manipulation;
-webkit-tap-highlight-color: rgba(0,0,0,0);
float: right;
}
.icon-bar {
display: block;
width: 100%;
height: 1.5px;
background: #1C5292;
transition: .3s;
cursor: pointer;
}
.icon-bar + .icon-bar {
margin-top: 5px;
}
#nav-container:focus-within .button {
pointer-events: none;
cursor: pointer;
}
#nav-container:focus-within .icon-bar:nth-of-type(1) {
transform: translate3d(0,6.5px,0) rotate(45deg);
cursor: pointer;
}
#nav-container:focus-within .icon-bar:nth-of-type(2) {
opacity: 0;
cursor: pointer;
}
#nav-container:focus-within .icon-bar:nth-of-type(3) {
transform: translate3d(0,-6.5px,0) rotate(-45deg);
cursor: pointer;
}
#head{
display: none;
}
#head-mobile{
background-color: #fff;
border-bottom: 1px solid #f5f5f5;
max-width: 100%;
height: auto;
text-align: left;
margin: 0px auto;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
overflow: hidden;
display: block;
}
#nav-content {
margin-top: -10px;
margin-left: -10px;
padding: 20px;
width: 67%;
max-width: 300px;
position: absolute;
top: 0;
left: 0;
height: 100% !important;
background: #fff;
pointer-events: auto;
-webkit-tap-highlight-color: rgba(0,0,0,0);
transform: translateX(-100%);
transition: transform .3s;
will-change: transform;
contain: content;
overflow: visible;
}
#nav-content a:link {
font-weight: 500;
font-size: 16px;
text-decoration: none;
padding-top: 10px;
padding-bottom: 10px;
margin-top: 5px;
margin-bottom: 5px;
width: 100%;
display: block;
}
#nav-content-spacer{
height: 1px;
width: 100%;
background-color: #E6E6E6;
display: block;
}
.small {
display: flex;
align-self: center;
}
.small a {
font-size: 12px;
font-weight: 400;
color: #888;
}
.small a + a {
margin-left: 15px;
}
#nav-container:focus-within #nav-content {
transform: none;
}
<style>
</style>
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="mobilemenu.css">
</head>
<body>
<div id="wrapper">
<div id="head-top">
<div id="head-top-inner">
<div id="head-top-inner-left"></div>
<div id="head-top-inner-right"></div>
</div>
</div>
<div id="head-mobile">
<div id="nav-container">
<div class="bg"></div>
<span style="margin-right: 17px !important; display: block;"><div class="button" tabindex="0">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div></span>
<div id="nav-content" tabindex="0">
<h3 class="menu-title">Navigation</h3>
1
<span id="nav-content-spacer"></span>
2
<span id="nav-content-spacer"></span>
3
<span id="nav-content-spacer"></span>
4
<span id="nav-content-spacer"></span>
5
</div>
</div>
<div id="head-inner-left">
Logo
</div>
</div>
<div id="content">
Content
</div>
</div>
</body>
</html>
Related
I have a gallery item with some image in its body. It has to display MORE link in the center of the body when I hover over gallery item (which works just fine) and display 0.5 opacity when I hover over MORE link. Even though z-index is bigger than parent's, for some reason :hover event simply does not fire. Any clue on how to fix this? My cursor: pointer also does not work.
HTML:
<div class="gallery _flex-between">
<div class="gallery__item gallery-item _flex-column-center">
<div class="gallery-item__body">
<div class="gallery-item__more-container">
<a class="gallery-item-more">More →</a>
</div>
<img src="/resources/projects/1.jpg" alt="" class="gallery__img">
</div>
<div class="gallery-item__footer">
Everlasting Summer
</div>
</div>
</div>
CSS:
._absolute-cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.gallery {
margin-top: 4em;
width: 90%;
}
.gallery-item__footer {
font-size: 1.6rem;
margin-top: 1em;
width: 100%;
border: 1px solid black;
text-align: center;
border-radius: 35px;
padding: .5em 0;
letter-spacing: 2px;
background-color: white;
transition: background-color .3s, color .3s;
}
.gallery__item {
position: relative;
width: 30%;
max-width: 600px;
}
.gallery-item__more-container {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0);
transition: background-color .3s;
border-radius: 35px;
z-index: 2;
}
.gallery-item__link {
position: absolute;
width: 100%;
height: 100%;
cursor: default;
z-index: 4;
}
.gallery-item-more {
position: relative;
z-index: 1000000000;
width: 50%;
background-color: rgba(255, 255, 255, 1);
opacity: 0;
transition: background-color .3s;
color: black;
font-weight: bold;
letter-spacing: 1px;
padding: 1em 0;
border-radius: 35px;
text-align: center;
cursor: pointer;
}
.gallery-item-more:hover {
background-color: rgba(255, 255, 255, .5);
}
.gallery-item__link:hover ~ .gallery-item__footer {
background-color: black;
color: white;
}
.gallery-item__link:hover ~ .gallery-item__body .gallery-item__more-container {
background-color: rgba(0,0,0,0.8);
}
.gallery-item__link:hover ~ .gallery-item__body .gallery-item-more {
opacity: 1;
}
.gallery-item__body {
width: 100%;
position: relative;
}
._flex-column-center {
display: flex;
flex-direction: column;
align-items: center;
}
.gallery__img {
object-position: top;
height: 25vw;
width: 100%;
border-radius: 35px;
}
Move the image before the more-button and it should work: Codepen
<div class="gallery _flex-between">
<div class="gallery__item gallery-item _flex-column-center">
<div class="gallery-item__body">
<img src="/resources/projects/1.jpg" alt="" class="gallery__img">
<div class="gallery-item__more-container">
<a class="gallery-item-more">More →</a>
</div>
</div>
<div class="gallery-item__footer">
Everlasting Summer
</div>
</div>
</div>
I'm trying to make my own website but I'm having a LOT of glitches with responsive on iphone
Look these screens:
I have and intro of my web and a menu
This works perfectly in all Windows browsers and also in Android. Which does not happen on Safari or all browsers from iphone:
The text does not appear, and the menu does not even open completely
my css:
//Navbar:
.at-front-no-feature.menu-default .navbar{
position: fixed;
}
.menu-default .navbar{
position: static;
z-index: 9;
left: 0;
right: 0;
}
CSS when i click on button:
.menu-default #navbar .navbar-collapse {
height: auto;
min-height: 100%;
position: fixed;
max-height: 70vh;
right: 0;
left: 0;
z-index: 999;
}
CSS Of links:
float: none;
list-style: none;
margin: 0;
padding-left: 0;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
text-align: center;
}
CSS of my text center (Hi my name is peter)
.home-content{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width:100%;
text-align:center;
display:flex;
flex-wrap:wrap;
justify-content:center;
}
.home-content h1{
display:block;
width:100%;
color: #202020;
text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.6);
}
.home-content a{
width:200px;
height: 50px;
border:1px solid black;
background:#666!important;
margin-left:40px;
line-height:50px;
text-decoration:none!important;
color:#f2f2f2!important;
border-radius:10px;
transform:300ms all;
}
How can i fix this? I have tried with display: inline-block; and vertical-align:middle; and it does show me the text on iphone but it won't let me resize the buttons ... or apply width or height.
Edit: I have been doing tests and it seems that the image dulls the menu and therefore is not visible. Despite using fixed or absolute position it is not seen. As much as I use the z-index it doesn't work ... How can I fix it?
See this:
$(document).ready(function () {
$('.menu-btn').click(function(event) {
$('.navbar-demo').toggleClass('open-nav');
});
});
body {
margin: 0;
font-family: Roboto;
}
.hero-image .about-me {
width: 100%;
position: absolute;
top: 50%;
left: 50%;
right: 0;
transform: translate(-50%, -50%);
text-align: center;
z-index: 99;
}
.hero-image .about-me label {
font-size: 26px;
color: #fff;
display: block;
}
.hero-image:after {
background-color: black;
content: '';
position: absolute;
width: 100%;
left: 0;
right: 0;
height: 100%;
opacity: 0.3;
}
.hero-image {
background-size: cover;
position: relative;
width: 100%;
height: 100vh;
background-color: lightgray;
background-image: url('https://images.unsplash.com/photo-1495465798138-718f86d1a4bc?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80');
display: table;
background-position: center;
}
.hero-image .about-me a {
display: inline-block;
text-decoration: none;
color: #fff;
padding: 10px 20px;
border: 1px solid white;
margin: 20px;
}
.navbar-demo {
display: table;
width: 100%;
position: fixed;
z-index: 99;
}
.navbar-demo .nav-bar ul li {
display: block;
}
.navbar-demo .nav-bar ul {
padding: 0;
display: table;
text-align: center;
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items: center;
margin: 0;
padding: 0;
}
.navbar-demo .nav-bar ul li a {
font-size: 18px;
display: inline-block;
text-align: center;
text-decoration: none;
color: #000;
padding: 18px;
text-transform: uppercase;
}
.nav-bar {
text-align: center;
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items: center;
position: relative;
}
.navbar-demo button.menu-btn {
display:none;
}
#media only screen and (max-width: 767px){
.navbar-demo button.menu-btn {
position: absolute;
top: 0;
right: 0;
background-color: unset;
border: 0;
font-size: 26px;
display:block;
padding: 23px;
color: #fff;
outline: none;
}
.navbar-demo{
height:100%;
z-index: 999;
}
.navbar-demo .nav-bar {
left: -950px;
background-color: #000000d9;
transition: 1s;
height: 100%;
}
.navbar-demo.open-nav .nav-bar{
left: 0;
width: 100%;
transition: left 0.5s;
height: 100%;
}
.navbar-demo .nav-bar ul li a {
display: block;
color: #fff;
}
.navbar-demo.open-nav button.menu-btn i:before {
content: '\f00d ';
}
}
<!-- Meta View Port -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<!-- Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- FontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<header id="header" class="navbar-demo">
<div class="nav-bar">
<ul>
<li>
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
</li>
</ul>
</div>
<button type="" class="menu-btn"><i class="fa fa-bars" aria-hidden="true"></i></button>
</header>
<div class="hero-image">
<div class="about-me">
<div class="row">
<label>Hi My Name is John Doe</label>
Lorem ipsum
Lorem ipsum
</div>
</div>
</div>
This question already has an answer here:
Proper use of flex properties when nesting flex containers
(1 answer)
Closed 3 years ago.
I'm trying to center the text area in my contact section at a max-width of 1400px; at this width I change the textarea's width from 100% to 90%. The contact section lies at the bottom of the page in the footer. The text area is a flex-item and was being centered with align-items: center but when I change the width to 90% it scoots over to the left? I tried margin left/right: auto; What's going on?
https://jsfiddle.net/yat5ncmk/9/
p.s the media query is at the bottom of the CSS
html,
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.b1,
.b2,
.b3 {
width: 70px;
height: 8.5px;
border-radius: 5px;
background-color: #fff;
margin-bottom: 10px;
transition: all .15s ease;
}
.b1 {
background-color: #56ff47;
}
.b3 {
background-color: #ff4c4c;
}
a:hover {
color: #007001;
}
.info-wrap {
flex-basis: 60%;
}
.info {
font-family: 'Cedarville Cursive';
color: white;
font-weight: bold;
font-size: 4.5rem;
text-align: center;
margin-top: 60px;
}
.arrow-right {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 60px solid green;
position: relative;
top: -10px;
}
.arrow-left {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-right: 60px solid limegreen;
position: relative;
top: 20px;
}
.arrow-top {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 60px solid #20a04b;
position: relative;
top: -100px;
left: 60px;
}
.top-middle {
position: relative;
top: -110px;
}
.bottom-middle .arrow-left {
top: -40px;
}
.bottom-middle .move {
top: -70px;
}
.bottom {
position: relative;
top: -48px;
}
.bottom .arrow-left {
top: -40px;
}
/*---------------FOOTER---------------*/
.contact-section-background {
background-color: #666;
height: 300px;
clip-path: polygon(0% 0%, 10% 30%, 90% 30%, 100% 0%, 100% 100%, 0% 100%);
margin-top: -100px;
}
.contact-section {
display: flex;
background-color: #595959;
margin-top: -225px;
position: relative;
padding-bottom: 18px;
z-index: 1;
}
.contact,
.location {
flex-basis: 50%;
display: flex;
flex-direction: column;
align-items: center;
}
.contact h1,
.location h1 {
margin: 0;
font-family: 'Cedarville Cursive';
color: white;
font-size: 7rem;
}
.hex {
-webkit-clip-path: polygon(25% 60%, 75% 60%, 100% 100%, 0% 100%);
background-color: #17a832;
transform: rotate(180deg);
width: 300px;
height: 150px;
margin: 0 auto;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 2;
}
.rhombus {
-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
background-color: #17a832;
width: 80px;
height: 80px;
position: absolute;
margin: 0 auto;
top: 60px;
right: 0;
left: 0;
bottom: 0;
z-index: 2;
}
.back-to-top {
color: #595959;
font-size: 2.5rem;
left: -45px;
position: relative;
transform: rotate(180deg);
top: 110px;
font-family: 'Josefin Sans';
}
.btp-arrow {
color: #595959;
font-size: 3rem;
position: absolute;
left: 50%;
margin-left: -24px;
bottom: 35px;
transition: all .2s ease;
}
.btp-arrow:hover {
color: #ddae1a;
cursor: pointer;
transform: scale(1.1);
}
.contact p {
font-family: 'Josefin Sans';
font-size: 2rem;
margin-top: 0;
margin-bottom: 10px;
color: white;
}
.textarea {
position: relative;
min-width: 500px;
}
.contact textarea {
resize: none;
width: 100%;
color: #595959;
margin: 10px;
min-height: 150px;
font-family: 'Josefin Sans';
font-size: 1.5rem;
padding: 5px;
outline: none;
border: none;
background: #474646;
border-radius: 4px;
}
.contact button {
font-size: 1.5rem;
font-family: 'Josefin Sans';
background: darkgrey;
color: #595959;
padding: 4px;
padding-right: 6px;
padding-left: 6px;
border: none;
border-radius: 4px;
cursor: pointer;
position: absolute;
bottom: 10px;
right: -20px;
transition: all .4s ease;
}
.contact button:hover {
color: #ddae1a;
}
.contact-line {
margin-top: 170px;
margin-bottom: 30px;
width: 5px;
border-radius: 3px;
height: 350px;
background: #ddae1a;
position: relative;
}
.links {
display: flex;
position: relative;
max-width: 400px;
top: -5px;
left: 7px;
}
.links i {
font-size: 2.5rem;
margin-right: 15px;
}
.links p {
font-size: 1.5rem;
margin-right: 30px;
margin-top: 8px;
}
#facebook {
color: #3b64ed;
cursor: pointer;
}
#twitter {
color: #5effeb;
cursor: pointer;
}
#yelp {
color: red;
cursor: pointer;
}
.contact-design-wrap-left {
position: absolute;
left: 0;
top: 40px;
max-height: 500px;
}
.contact-design-wrap-right {
position: absolute;
bottom: 55px;
right: 0;
transform: rotate(180deg);
}
.contact-design-wrap-left .bottom {
height: 0;
}
#align {
position: absolute;
left: 70px;
top: -15px;
}
#align2 {
position: absolute;
left: 68px;
top: -5px;
}
.grey {
border-left: 60px solid #666;
}
.light-grey {
border-right: 60px solid #848484;
}
.same {
border-left: 60px solid #848484;
}
.lighter {
border-right: 60px solid #a8a3a3;
}
.map {
position: relative;
top: 50px;
}
.map i {
position: absolute;
color: #ddae1a;
font-size: 4rem;
left: 50%;
margin-left: -24px;
}
.location .map .street-1 {
width: 300px;
position: relative;
top: 95px;
left: 170px;
height: 15px;
transform: rotate(90deg);
background-color: #848484;
border-radius: 5px;
}
.location .map .street-2 {
width: 300px;
position: relative;
top: 80px;
left: -170px;
height: 15px;
transform: rotate(90deg);
background-color: #848484;
border-radius: 5px;
}
.location .map .street-3 {
margin-top: 40px;
width: 190%;
position: relative;
top: 30px;
left: -140px;
height: 18px;
background-color: #848484;
border-radius: 8px;
}
.street-info {
color: white;
position: absolute;
font-family: 'Josefin Sans';
font-size: 1.2rem;
left: 20px;
padding-top: 3px;
}
.address {
position: absolute;
left: 50%;
top: 75px;
margin-left: -68.5px;
color: #ddae1a;
text-decoration: none;
font-family: 'Josefin Sans';
font-size: 1.2rem;
text-align: center;
}
.address:hover {
color: #ddae1a;
text-decoration: underline;
}
.copyright {
position: absolute;
bottom: 0;
left: 50%;
font-family: 'Josefin Sans';
color: #a8a3a3;
font-size: 1.8rem;
padding-bottom: 5px;
margin: 0 0 0 -253.89px;
}
/*----FOOTER----*/
#media screen and (max-width: 1700px) {
#align {
position: absolute;
left: 60px;
top: -10px;
}
#align2 {
position: absolute;
left: 58px;
top: 0px;
}
.contact-design-wrap-right {
position: absolute;
bottom: 40px;
right: 0;
transform: rotate(180deg);
}
.contact h1,
.location h1 {
font-size: 6rem;
height: 160px;
}
.contact p {
font-size: 1.5rem;
}
.contact-line {
margin-top: 160px;
margin-bottom: 30px;
width: 5px;
border-radius: 3px;
height: 270px;
background: #ddae1a;
position: relative;
}
.copyright {
position: absolute;
bottom: 0;
left: 50%;
font-family: 'Josefin Sans';
color: #a8a3a3;
font-size: 1.5rem;
padding-bottom: 5px;
margin: 0 0 0 -211.99px;
}
.contact textarea {
margin-top: 0;
}
.location .map .street-2 {
width: 280px;
position: relative;
top: 60px;
left: -170px;
height: 15px;
transform: rotate(90deg);
background-color: #848484;
border-radius: 5px;
}
.location .map .street-1 {
width: 280px;
position: relative;
top: 75px;
left: 170px;
height: 15px;
transform: rotate(90deg);
background-color: #848484;
border-radius: 5px;
}
.grey {
border-left: 50px solid #666;
}
.light-grey {
border-right: 50px solid #848484;
}
.same {
border-left: 50px solid #848484;
}
.lighter {
border-right: 50px solid #a8a3a3;
}
}
#media screen and (max-width: 1450px) {
.contact button {
bottom: 15px;
}
.links {
left: 10px;
}
}
#media screen and (max-width: 1400px) {
.links {
left: 40px;
}
.contact textarea {
width: 90%;
/*None of these work?
margin-left: auto;
margin-right: auto;
align-self: center;*/
}
}
<link href="https://fonts.googleapis.com/css?family=Cedarville+Cursive|Josefin+Sans|Kumar+One+Outline|Staatliches" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<footer>
<div class="contact-section-background">
</div>
<div class="contact-section">
<div class="contact-design-wrap-left">
<div class="top">
<div class="arrow-left lighter" id="align"></div>
<div class="arrow-left light-grey"></div>
<div class="arrow-right grey"></div>
<div class="arrow-top same"></div>
</div>
<div class="top-middle">
<div class="arrow-left light-grey"></div>
<div class="arrow-right grey"></div>
</div>
<div class="bottom-middle">
<div class="arrow-right grey"></div>
<div class="arrow-left light-grey"></div>
<div class="arrow-right move grey"></div>
</div>
<div class="bottom">
<div class="arrow-left light-grey"></div>
<div class="arrow-top same"></div>
<div class="arrow-left lighter" id="align2"></div>
</div>
</div>
<div class="hex">
<div class="back-to-top">Back to Top</div>
</div>
<div class="rhombus"></div>
<div class="contact">
<h1>Contact</h1>
<p class="number">(480)456-7297</p>
<p class="email">fakeEmail#fake.com</p>
<div class="textarea">
<textarea name="" id="" cols="30" rows="0" placeholder="Send us a message:)"></textarea>
<button>Send</button>
<div class="links">
<p>Leave us a review!</p>
<i class="fab fa-facebook-square" id="facebook"></i>
<i class="fab fa-yelp" id="yelp"></i>
<i class="fab fa-twitter-square" id="twitter"></i>
</div>
</div>
</div>
<div class="contact-line"></div>
<div class="location">
<h1>Location</h1>
<div class="map">
<i class="fas fa-map-marker-alt"></i>
6140 E Main St.
<div class="street-1">
<p class="street-info">63rd St.</p>
</div>
<div class="street-2">
<p class="street-info">N Recker Rd.</p>
</div>
<div class="street-3">
<p class="street-info">US 60 E.</p>
</div>
</div>
</div>
<div class="contact-design-wrap-right">
<div class="top">
<div class="arrow-left lighter" id="align"></div>
<div class="arrow-left light-grey"></div>
<div class="arrow-right grey"></div>
<div class="arrow-top same"></div>
</div>
<div class="top-middle">
<div class="arrow-left light-grey"></div>
<div class="arrow-right grey"></div>
</div>
<div class="bottom-middle">
<div class="arrow-right grey"></div>
<div class="arrow-left light-grey"></div>
<div class="arrow-right move grey"></div>
</div>
<div class="bottom">
<div class="arrow-left light-grey"></div>
<div class="arrow-top same"></div>
<div class="arrow-left lighter" id="align2"></div>
</div>
</div>
<p class="copyright">© 2019 El Metate | All Rights Reserved</p>
</div>
</footer>
The easiest solution is to give the textarea display: block so that it honors left/right margins. You can update the css inside your final media query like this:
.contact textarea {
width: 90%;
margin-left: auto;
margin-right: auto;
display: block;
}
But the min-width: 500px on the div surrounding the textarea is also causing some alignment issues. You may want to try adjusting that at smaller screen sizes as well.
I can't utilize the main dropdown menu on the site I'm developing because if you move too slowly or if you mouse over text that is in the background in the child element behind it, it will vanish.
I've tried adding !important tags. I've tried looking for any gaps between elements. I've tried adjusting the z axis priority values.
.dropdown {
position: fixed;
top: 1vmin;
left: 1vmin;
width: 10vmin;
height: 10vmin;
display: inline-block;
}
.dropdown:hover .dropdown-content {display:block !important;}
.dropbtn {
background color: black;
color: black;
border: none;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 99999;
}
.dropdown-content a {
color: black;
padding: 10px 10px;
text-decoration: none;
display: block !important;
}
.dropdown-content a:hover {background-color: red;}
.header {
position: fixed;
top: 1vmin;
width: calc(100vw - 14vmin);
height: 10vmin;
transform: translate(11vmin, 0vmin);
text-align: center;
padding: 0vmin;
vertical-align: middle;
dislpay: table-cell;
}
.header a {
float: left;
font-size: 4vmin;
color: white;
text-align: center;
vertical-align: middle;
padding: 1vmin 1vmin;
text-decoration: none;
}
table {
table-layout: auto;
width: 100%;
border: 1vmin solid black;
}
td {
border: 1px solid black;
overflow: hidden;
text-overflow: ellipsis;
}
td a:hover {background-color: red;}
.navbar {
width: 10vmin;
height: 10vmin;
position: relative:
border: 0.5vmin solid #49b293;
cursor: pointer;
transition: all 0.3s ease;
}
.navbar div {
height: 0.8vmin;
width: 6vmin;
background-color: #fff;
position: absolute;
transition: all 0.5s ease;
}
.navbar .first {
top: 2.5vmin;
left: 2vmin;
}
.navbar .second {
top: 4.5vmin;
left: 2vmin;
}
.navbar .third {
top: 6.5vmin;
left: 2vmin;
}
.navbar:hover .first {
width: 4vmin;
transform: translate(0vmin, 4.75vmin) rotate(50deg);
transition: all 0.5s;
}
.navbar:hover .second {
opacity: 0;
transition: all 0.5s;
}
.navbar:hover .third {
width: 4vmin;
transform: translate(2.25vmin, 0.5vmin) rotate(-50deg);
transition: all 0.5s;
}
.navbar:hover {
border-radius:5vmin;
transition: all 0.3s ease;
}
.mainbody {
position: relative;
width: 100%;
top: 13vmin;
z-index:1;
}
</style>
<div class="dropdown" style="background-color:black;">
<button class="dropbtn" style="background-color:black;">
<div class="navbar">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="header" style="background-color:black;">
<table style="background-color:black;">
<tr>
<td>Home</td>
<td>IT</td>
<td>Science</td>
<td>Tech</td>
<td>News</td>
<td>Top</td>
</tr>
</table>
</div>
<div class="mainbody">
<h1>RoyHQ</h1>
</div>
</body>
</html>
I'd like for the drop menu to be relatively resilient to vanishing. It's not, it's almost unusable.
Click menu now!
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.dropdownzzz {
position: fixed;
top: 1vmin;
left: 1vmin;
width: 10vmin;
height: 10vmin;
display: inline-block;
}
.dropbtn {
background color: black;
color: black;
border: none;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 99999;
}
.dropdown-content a {
color: black;
padding: 10px 10px;
text-decoration: none;
display: block !important;
}
.dropdown-content a:hover {background-color: red;}
.header {
position: fixed;
top: 1vmin;
width: calc(100vw - 14vmin);
height: 10vmin;
transform: translate(11vmin, 0vmin);
text-align: center;
padding: 0vmin;
vertical-align: middle;
dislpay: table-cell;
}
.header a {
float: left;
font-size: 4vmin;
color: white;
text-align: center;
vertical-align: middle;
padding: 1vmin 1vmin;
text-decoration: none;
}
table {
table-layout: auto;
width: 100%;
border: 1vmin solid black;
}
td {
border: 1px solid black;
overflow: hidden;
text-overflow: ellipsis;
}
td a:hover {background-color: red;}
.navbar {
width: 10vmin;
height: 10vmin;
position: relative:
border: 0.5vmin solid #49b293;
cursor: pointer;
transition: all 0.3s ease;
}
.navbar div {
height: 0.8vmin;
width: 6vmin;
background-color: #fff;
position: absolute;
transition: all 0.5s ease;
}
.navbar .first {
top: 2.5vmin;
left: 2vmin;
}
.navbar .second {
top: 4.5vmin;
left: 2vmin;
}
.navbar .third {
top: 6.5vmin;
left: 2vmin;
}
.navbar.active .first {
width: 4vmin;
transform: translate(0vmin, 4.75vmin) rotate(50deg);
transition: all 0.5s;
}
.navbar.active .second {
opacity: 0;
transition: all 0.5s;
}
.navbar.active .third {
width: 4vmin;
transform: translate(2.25vmin, 0.5vmin) rotate(-50deg);
transition: all 0.5s;
}
.navbar.active {
border-radius:5vmin;
transition: all 0.3s ease;
}
.mainbody {
position: relative;
width: 100%;
top: 13vmin;
z-index:1;
}
.dropdown-content.active {
display: block;
}
</style>
<div class="dropdownzzz" style="background-color:black;">
<button class="dropbtn" style="background-color:black;" id="menu">
<div class="navbar" id="iconmenu">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
</button>
<div class="dropdown-content" id="there">
Link 1
Link 2
Link 3
</div>
</div>
<div class="header" style="background-color:black;">
<table style="background-color:black;">
<tr>
<td>Home</td>
<td>IT</td>
<td>Science</td>
<td>Tech</td>
<td>News</td>
<td>Top</td>
</tr>
</table>
</div>
<div class="mainbody">
<h1>RoyHQ</h1>
</div>
<script>
$('#menu').on('click', function () {
$('#there').toggleClass('active');
$('#iconmenu').toggleClass('active');
});
</script>
Link to my jsfiddle work
I switched my "navbar" from a basic header navigation bar to a custom layout.
I changed my li tags to an a tag to include classes and separate css designs.
Following this change, my link didn't change colors when I hovered over them.
Is there a reason as to why this would occur when I include classes in my tags.
.tl,
.tc,
.tr,
.bl,
.bc,
.br {
text-decoration: none;
color: green;
font-size: 24px;
font-family: Bungee Shade;
cursor: pointer;
border-radius: 10px;
transition: .5s;
position: fixed;
}
.tl {
top: 45px;
left: 60px;
}
.tc {
margin-top: 45px;
text-align: center;
right: 50%;
}
.tr {
margin-top: 45px;
right: 60px;
}
.bl {
bottom: 45px;
margin-left: 60px;
}
.bc {
bottom: 45px;
text-align: center;
right: 50%;
}
.br {
bottom: 45px;
right: 60px;
}
.tl:hover,
.tc:hover,
.tr:hover,
.bl:hover,
.bc:hover,
.br:hover {
background-color: orange;
}
<div class="navbar">
<a class="tl" href="#">HOME</a>
<a class="tc" href="#">MUSIC</a>
<a class="tr" href="#">BIO</a>
<a class="bl" href="#">TOUR</a>
<a class="bc" href="#">SHOP</a>
<a class="br" href="#">TSA</a>
</div>
Please try to add some padding, or some dimensions, on the a tag classes (not on the hover state) and see if it works. a tags work inline so if they have no dimensions, they have no background.
you have to add the position:relative and z-index to your navbar as your slider is currently overlapping it. so hover is not happening on a tag
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
/*background-image: url(test.JPG);*/
}
.navbar{
position: relative;
z-index: 2;
}
.tl, .tc, .tr, .bl, .bc, .br{
text-decoration: none;
color: green;
font-size: 24px;
font-family: Bungee Shade;
cursor: pointer;
border-radius: 10px;
transition: .5s;
position: fixed;
}
.tl{
top: 45px;
left: 60px;
}
.tc{
margin-top: 45px;
text-align: center;
right: 50%;
}
.tr{
margin-top: 45px;
right: 60px;
}
.bl{
bottom: 45px;
margin-left: 60px;
}
.bc{
bottom: 45px;
text-align: center;
right: 50%;
}
.br{
bottom: 45px;
right: 60px;
}
.tl:hover, .tc:hover, .tr:hover, .bl:hover, .bc:hover, .bl:hover{
background-color: orange;
}
#slider, .wrap, .slide-content{
margin: 0;
padding: 0;
font-family: Bungee Shade ;
width: 100%;
height: 100vh;
overflow-x: hidden;
overflow-y: hidden;
}
.wrap{position:relative;}
.slide{
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.slide1{background-image: url('img/goho.jpg');
width: 330px;
height: 330px;
left: 33.3%;
margin-top: 12%;
position: fixed;
}
.slide2{background-image: url('');
}
.slide3{background-image: url('');}
.slide-content{
/*Text in the middle*/
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.slide-content span{
font-size: 15px; /*rem*/
color: black;
}
.arrow{
cursor: pointer;
position: absolute;
top: 50%;
margin-top: -30px;
width: 0;
height: 0;
border-style: solid;
}
#arrow-left{
border-width: 30px 40px 30px 0;
border-color: transparent #000 transparent transparent;
left: 0;
margin-left: 30px;
}
#arrow-right{
border-width: 30px 0 30px 40px;
border-color: transparent transparent transparent #000;
right: 0;
margin-right: 30px;
}
<div class="navbar">
<a class="tl" href="#">HOME</a>
<a class="tc" href="music.htm">MUSIC</a>
<a class="tr" href="#">BIO</a>
<a class="bl" href="#">TOUR</a>
<a class="bc" href="#">SHOP</a>
<a class="br" href="#">TSA</a>
</div>
<div class ="wrap">
<div id="arrow-left" onclick="slideLeft()" class="arrow"></div>
<div id="slider">
<div class="slide slide1">
<div class="slide-content"></div>
</div>
<div class="slide slide2">
<div class="slide-content"></div>
</div>
<div id="arrow-right" onclick="slideRight()" class="arrow"></div>
</div>