خرید بک لینک

درباره سایت

CodingForums

آخرین مطالب

امکانات وب

Nav ul disappears because of animated background

I've been working on an website, and we wanted to a animated background. But the problem with this is that my Navbar disappears after the second picture is displayed.

This only happends on ios devices, because my partner tried it with android and it worked how it is supposed to.

(tried it on both safari and google chrome.)

With header: https://imgur.com/a/rLswc

header disappears: https://imgur.com/a/G2A5b

homepage:

Code:
<body>
<div class="bg-fade">
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
</div>
<div id="main-container">

<!-- header -->
<?php include('inc/header.php'); ?>
CSS - BACKGROUND:

Code:
.bg-fade > figure {
  top: 0px;
  left: 0px;
  color: transparent;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: -1;
  position: fixed;
  animation: imageAnimation 36s linear infinite 0s;
  background-size: cover;
  backface-visibility: hidden;
}
.bg-fade > figure:nth-child(1) {
  background-image: url('https://maasduinenpas.nl/img/maasduinenpas_bg_01.jpg');
}
.bg-fade > figure:nth-child(2) {
  animation-delay: 6s;
  background-image: url('https://maasduinenpas.nl/img/maasduinenpas_bg_02.jpg');
}
.bg-fade > figure:nth-child(3) {
  animation-delay: 12s;
  background-image: url('https://maasduinenpas.nl/img/maasduinenpas_bg_03.jpg');
}
.bg-fade > figure:nth-child(4) {
  animation-delay: 18s;
  background-image: url('https://maasduinenpas.nl/img/maasduinenpas_bg_04.jpg');
}
.bg-fade > figure:nth-child(5) {
  animation-delay: 24s;
  background-image: url('https://maasduinenpas.nl/img/maasduinenpas_bg_05.jpg');
}
.bg-fade > figure:nth-child(6) {
  animation-delay: 30s;
  background-image: url('https://maasduinenpas.nl/img/maasduinenpas_bg_06.jpg');
}

/*keyframes .bg-fade*/
@-webkit-keyframes imageAnimation {
  0% {
    opacity: 0;
    animation-timing-function: ease-in;
  }
  8% {
    opacity: 1;
    animation-timing-function: ease-out;
  }
  17% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes imageAnimation {
  0% {
    opacity: 0;
    animation-timing-function: ease-in;
  }
  8% {
    opacity: 1;
    animation-timing-function: ease-out;
  }
  17% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes imageAnimation {
  0% {
    opacity: 0;
    animation-timing-function: ease-in;
  }
  8% {
    opacity: 1;
    animation-timing-function: ease-out;
  }
  17% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes imageAnimation {
  0% {
    opacity: 0;
    animation-timing-function: ease-in;
  }
  8% {
    opacity: 1;
    animation-timing-function: ease-out;
  }
  17% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

CSS - NAV

Code:
/*navigation*/
nav ul {
    margin: 37px 0px 0px 0px;
    padding: 0px;
    list-style: none;
    text-align: center;
    z-index: 100;
    opacity: 1;
}
nav li.left {
    float: left;
    color: #ffffff;
    width: 125px;
    margin: 0px -45px 0px 50px;
    display: inline-block;
    padding: 15px 10px 15px 10px;
    font-size: 14px;
    background-color: #E6332A;
    position: relative;
}
nav li.left:hover {
    background-color: #ff3333;
}
nav li.left.active {
    background-color: #E6332A;
}
nav li.left.active:after {
    left: 45%;
    width: 0px;
    bottom: -20px;
    margin: 0px 0px 0px -10px;
    content:"";
    position: absolute;
    border-top: 20px solid #E6332A;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
}
nav li.right.navigation-msp {
    color: #ffffff;
    width: 125px;
    margin: 0px 0px 0px 150px;
    display: inline-block;
    padding: 15px 10px;
    font-size: 14px;
    position: relative;
    background-color: #EF7D03;
}
nav li.right.navigation-msp:hover {
    background-color: #F88017;
}
nav li.right.active:after {
    left: 45%;
    width: 0px;
    bottom: -20px;
    margin: 0px 0px 0px -10px;
    content:"";
    position: absolute;
    border-top: 20px solid #EF7D03;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
}
nav li.right.active.navigation-msp:hover {
    background-color: #EF7D03;
}
.handle {
    width: 100%;
    color: white;
    cursor: pointer;
    padding: 15px 10px;
    display: none;
    text-align: left;
    box-sizing: border-box;
    background-color: #E6332A;
}
.handle:hover {
    background-color: #FF3333;
}
@media screen and (max-width: 1000px) {
nav ul {
    position: relative;
    color: #ffffff;
    margin-top: 37px;
    margin-bottom: 0px;
    padding: 0;
    overflow: hidden;
    text-align: center;
}
nav li.left {
color: #ffffff;
width: 100%;
margin: 0px 0px 0px 0px;
display: inline-block;
padding: 15px 10px 15px 10px;
font-size: 14px;
background-color: #E6332A;
position: relative;
}
nav li.right.navigation-msp {
color: #ffffff;
width: 100%;
margin: 0px 0px 0px 0px;
display: inline-block;
padding: 15px 10px 15px 10px;
font-size: 14px;
position: relative;
}
nav a {
    color: inherit;
    text-decoration: none;
}
nav ul li {
    margin: 0px 10px 0px 10px;
    display: inline-block;
    padding: 15px 10px 15px 10px;
    background-color: #E6332A;
}
nav ul li {
    width: 100%;
    margin: 0;
    text-align: left;
    box-sizing: border-box;
}
nav ul {
    max-height: 0;
}
.showing {
    max-height: 15em;
    border-bottom: 1px solid black;
}
.handle {
    display: block !important;
}

برچسب: نویسنده: آیلین رضوانی تاريخ: سه شنبه 10 بهمن 1396 ساعت: 16:45

صفحه بندی

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه