I'm working on a website where on certain pages I want to have a fixed bar on the top of the page. On mobile this functions but when the finger is released from screen the bar moves away from the screen.
I've been using position:fixed;, top:0; and display:block;
Is there any way to fix this? I've been twisting my brains around it for the last couple of days but can't seem to get it working.
[edit; In this
/* Basic CSS */
#offcanvas-menu {
z-index: 99999;
}
.banner {
position: fixed;
padding: 0;
overflow: hidden;
z-index: auto;
border-bottom-width: 0.13vw;
border-color: #000000;
border-bottom-style: solid;
}
.banner_inner {
width: 100%;
white-space: nowrap;
margin-bottom: 0;
margin-top: 0.3%;
cursor: pointer;
}
.banner {
bottom: 0;
left: 0;
width: 100vw;
background-color: white;
translateY(100%);
transform-origin: left bottom;
z-index: 102;
cursor: pointer;
}
/* main text in bar */
#banner-inner {
margin-left: 1.5%;
margin-top: 1.5%;
min-height: 144px;
position: relative;
}
#banner-row-1 {
width: 15vw;
margin-right: 1.5%;
display: inline-block;
position: absolute;
}
#banner-row-2 {
width: 15vw;
margin-right: 1.5%;
position: absolute;
display: inline-block;
left: 17.7vw;
}
#banner-row-3 {
width: 46.02vw;
margin-right: 1.5%;
position: absolute;
display: inline-block;
left: 34.18740849194729vw;
}
#banner-row-3 p6 {
font-family: helvetica, sans-serif;
font-weight: 300;
color: black;
font-size: 1.39vw;
line-height: 1.2;
}
a4 {
font-family: helvetica, sans-serif;
font-weight: 300;
color: black;
font-size: 1.39vw;
line-height: 1.2;
}
a5 {
font-family: helvetica, sans-serif;
font-weight: 300;
color: black;
font-size: 1.39vw;
line-height: 1.2;
margin-left: 5%;
}
#banner h4 {
font-family: helvetica, sans-serif;
color: #000000;
font-size: 3.2vw;
letter-spacing: 0em;
line-height: 1.2;
font-weight: 300;
text-align: left;
display: inline-block;
margin-left: 1.5%;
margin-top: 1.2vw;
margin-bottom: 1.2vw;
width: 31.5vw;
}
#banner h5 {
font-family: helvetica, sans-serif;
color: #000000;
font-size: 3.2vw;
letter-spacing: 0em;
line-height: 1.2;
font-weight: 300;
text-align: left;
display: inline-block;
left: 34.18740849194729vw;
margin-top: 1.2vw;
margin-bottom: 1.2vw;
margin-left: 1.5%;
width: 46.02vw;
}
#banner h6 {
font-family: helvetica, sans-serif;
color: #000000;
font-size: 3.2vw;
letter-spacing: 0em;
line-height: 1.2;
font-weight: 300;
text-align: left;
display: inline-block;
left: 34.18740849194729vw;
margin-top: 1.2vw;
margin-bottom: 1.2vw;
margin-left: 1.5%;
width: 15.1vw;
}
/* left */
nav#offcanvas-menu {
/* Full screen nav menu */
width: 100vw;
height: 29.5vw;
/* this is for browsers that don't support CSS3 translate3d */
-moz-transform: translate3d(0, -23.3vw, 0);
-webkit-transform: translate3d(0, -23.3vw, 0);
transform: translate3d(0, -23.3vw, 0);
}
nav#offcanvas-menu {
left: 0vw;
}
/* off canvas sidebar left right */
div#main-region {
position: relative;
width: 100%;
-moz-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-moz-transition: -moz-transform 0.5s;
/* transition settings */
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}
/*SIDEBAR LEFT*/
input[type="checkbox"]#togglebox {
/* checkbox used to toggle menu state */
position: absolute;
left: 0;
top: 0;
visibility: hidden;
}
nav#offcanvas-menu label#closex {
/* Large x close button inside nav */
width: 100vw;
height: 100vh;
overflow: hidden;
display: block;
position: absolute;
cursor: pointer;
text-indent: -10000px;
line-height: 1.1;
z-index: 10;
top: 0;
right: 0;
}
input[type="checkbox"]#togglebox:checked~nav#offcanvas-menu {
/* nav state when corresponding checkbox is checked */
-moz-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
-moz-transition-delay: 0s;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
nav#offcanvas-menu {
top: 0;
z-index: 104;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: white;
display: block;
position: fixed;
color: white;
overflow: auto;
-moz-transition: -moz-transform 0.5s, visibility 0s 0.5s;
/* transition settings */
-webkit-transition: -webkit-transform 0.5s, visibility 0s 0.5s;
transition: transform 0.5s, visibility 0s 0.5s;
}<label for="togglebox">
</label>
<input type="checkbox" id="togglebox" />
<nav id="offcanvas-menu">
<label for="togglebox" id="closex">×</label>
<label for="togglebox">
<div id="banner-inner">
<div id="banner-row-1">
<a4>Client</a4><br>
<a5>Client name</a5><br><br>
<a4>Year</a4><br>
<a5>2016</a5><br><br>
<a4>Collaboration</a4><br>
<a5>Name Person</a5>
</div>
<div id="banner-row-2">
<a4>Specifications</a4><br>
<a5>specifications</a5>
</div>
<div id="banner-row-3">
<p6>piece of text<p6><br><br>
<p6>piece of text</p6>
</div>
</div>
<div class="banner" id="banner">
<h4>Titel project</h4>
<h5>Identity, Typography, Web</h5>
<h6>↓ Info</h6>
</div>
</label>
</nav>
<br><br><br><br><br>Test<br><br><br><br><br><br><br><br><br><br>Test<br><br><br><br><br><br><br><br><br><br>Test<br><br><br><br><br><br><br><br><br><br>Test<br><br><br><br><br><br><br><br><br><br>Test<br><br><br><br><br>
