I don’t know what I’m doing wrong. It’s not working as intended. Just disappears when clicked, and I can’t click it again to open it.
<div id="sidebarwrap">
<button id="menu">⪢</button>
<nav class="nav">
<ol>
<li><a href="https://iwriteonwheels.tumblr.com/">Home</a></li>
<li><a href="/archive">Archive</a></li>
<li><a href="/aboutme">About Me</a></li>
<li><a href="/anime">Anime</a></li>
<li><a href="https://iwriteonwheels.tumblr.com/yearoutlook">My Yearly Outlook</a></li>
</ol>
</nav>
<div class="swrapper">
<div class="search">
<input type="text" onfocus="this.value=''" placeholder="Search blog..." id="search"/>
</div>
<div class="layer"><input class="testinput" id="tap" type="submit" name="b1" value="🔍︎" />
</div>
</div>
</div>
body {
background:#aaa;
}
.nav {
text-transform: capitalize;
font-family: Fertigo Pro, Segoe UI, Arial, Verdana;
font-size: 1rem;
font-weight: 900;
}
.nav ol {
max-width:47%;
text-align:left;
list-style: none;
padding: 0 auto;
display: flex;
flex-wrap:wrap;
flex-direction:column;
background: none;
}
.nav li {
display: inline-block;
}
.nav a {
color: rgba(153,153,153,0.5);
font-weight: 900;
transition-duration: 0.3s;
transition-timing-function: linear, ease-in-out;
text-decoration: none;
}
.nav a:hover {
color: #fff;
text-transform: capitalize;
text-shadow: rgb(145, 71, 67) 2px 0px 0px,
rgb(145, 71, 67) 1.75517px 0.958851px 0px,
rgb(145, 71, 67) 1.0806px 1.68294px 0px,
rgb(145, 71, 67) 0.141474px 1.99499px 0px,
rgb(145, 71, 67) -0.832294px 1.81859px 0px,
rgb(145, 71, 67) -1.60229px 1.19694px 0px,
rgb(145, 71, 67) -1.97999px 0.28224px 0px,
rgb(145, 71, 67) -1.87291px -0.701566px 0px,
rgb(145, 71, 67) -1.30729px -1.51361px 0px,
rgb(145, 71, 67) -0.421592px -1.95506px 0px,
rgb(145, 71, 67) 0.567324px -1.91785px 0px,
rgb(145, 71, 67) 1.41734px -1.41108px 0px,
rgb(145, 71, 67) 1.92034px -0.558831px 0px, 0px 0px 24px black;
}
.nav a:active,
.nav a:focus {
color: #aaa;
text-transform: capitalize;
outline: 0;
}
.nav a.current {
background: none;
color: #fff;
text-shadow: rgb(145, 71, 67) 2px 0px 0px,
rgb(145, 71, 67) 1.75517px 0.958851px 0px,
rgb(145, 71, 67) 1.0806px 1.68294px 0px,
rgb(145, 71, 67) 0.141474px 1.99499px 0px,
rgb(145, 71, 67) -0.832294px 1.81859px 0px,
rgb(145, 71, 67) -1.60229px 1.19694px 0px,
rgb(145, 71, 67) -1.97999px 0.28224px 0px,
rgb(145, 71, 67) -1.87291px -0.701566px 0px,
rgb(145, 71, 67) -1.30729px -1.51361px 0px,
rgb(145, 71, 67) -0.421592px -1.95506px 0px,
rgb(145, 71, 67) 0.567324px -1.91785px 0px,
rgb(145, 71, 67) 1.41734px -1.41108px 0px,
rgb(145, 71, 67) 1.92034px -0.558831px 0px, 0px 0px 24px black;
}
@media only screen and (max-width: 768px) {
/* For mobile phones: */ /* my phone is at 257px screen width or 68mm */
.nav {
text-transform: capitalize;
font-family: Fertigo Pro, Segoe UI, Arial, Verdana;
font-weight: 900;
text-align:center;
}
.nav ol {
max-width:45%;
text-align:left;
list-style: none;
padding: 0 auto;
display: flex;
flex-wrap:wrap;
flex-direction:column;
background: none;
line-height:3em;
position: fixed;
top: 4em;
left: 0;
right: 0;
}
.nav li {
display: inline-block;
}
.nav a {
color: rgba(153,153,153,0.5);
font-family: Fertigo Pro, Segoe UI, Arial, Verdana;
font-weight: 900;
transition-duration: 0.3s;
transition-timing-function: linear, ease-in-out;
text-decoration: none;
}
.nav a.current {
background: none;
color: #fff;
text-shadow: rgb(145, 71, 67) 2px 0px 0px,
rgb(145, 71, 67) 1.75517px 0.958851px 0px,
rgb(145, 71, 67) 1.0806px 1.68294px 0px,
rgb(145, 71, 67) 0.141474px 1.99499px 0px,
rgb(145, 71, 67) -0.832294px 1.81859px 0px,
rgb(145, 71, 67) -1.60229px 1.19694px 0px,
rgb(145, 71, 67) -1.97999px 0.28224px 0px,
rgb(145, 71, 67) -1.87291px -0.701566px 0px,
rgb(145, 71, 67) -1.30729px -1.51361px 0px,
rgb(145, 71, 67) -0.421592px -1.95506px 0px,
rgb(145, 71, 67) 0.567324px -1.91785px 0px,
rgb(145, 71, 67) 1.41734px -1.41108px 0px,
rgb(145, 71, 67) 1.92034px -0.558831px 0px, 0px 0px 24px black;
}
.columns {
flex-direction: column;
}
.column {
margin: 0.625em 0;
}
.main-column {
order: -1;
}
/* for search icon background hover */
.layer {
background-image: -webkit-gradient(linear, left top, left bottom, from(#8000ff), to(#5500aa),color-stop(0.4, #220000));
width: 30px;
height: 25px;
position:absolute;
top:5px;
left:240px;
z-index:25000;
transition: all 0.4s ease-in-out;
border:0px solid red;
}
.layer:active {
transform: scale(0.95);
}
.layer:hover {
background-image: -webkit-gradient(linear, left top, left bottom, from(#ba72ba), to(#2200ff),color-stop(0.4, #7a2312));
width: 30px;
height: 25px;
position:absolute;
top:5px;
left:240px;
z-index:25000;
webkit-transition: 0.4s; /* Animation */
transition: 0.4s; /* Animation */
transition: all 0.4s ease-in-out;
}
#f1 input[value="🔍︎"] {
background-image: linear-gradient(to bottom right, #fff, #000);
background-clip:text;
-webkit-text-stroke: 1px transparent;
color:transparent;
}
#f1 input[type=submit] {
background-image: linear-gradient(to bottom right, #fff 25%, #000);
border: 1px solid #666;
width: 40px;
height: 32px;
top:-3.5px;
left:-4.5px;
position:relative;
z-index:4;
font-size:1.313em;
padding-left:5px;
padding-bottom:5px;
transition: all 0.4s ease-in-out;
-webkit-text-stroke: 1px transparent;
}
#f1 input[type=submit]:hover {
background-image: linear-gradient(to bottom right, #fff 25%, magenta);
border: 1px solid #666;
width: 40px;
height: 32px;
top:-3.5px;
left:-4.5px;
position:relative;
z-index:4;
font-size:1.313em;
padding-left:5px;
padding-bottom:5px;
-webkit-text-stroke: 1px transparent;
}
/* for search icon hover */
.testinput {
background-image: linear-gradient(to bottom right, #fff, #000);
background-clip: text;
-webkit-text-stroke: 1px transparent;
border:none;
font-size:1.313em;
color:transparent;
webkit-transition: 0.4s; /* Animation */
transition: 0.4s; /* Animation */
transition: all 0.4s ease-in-out;
top:-3.5px;
left:-3px;
position:relative;
}
.testinput:hover {
background-image: linear-gradient(to bottom right, #fff, magenta);
background-clip: text;
-webkit-text-stroke: 1px transparent;
border:none;
font-size:1.313em;
color:transparent;
top:-3.5px;
left:-3px;
position:relative;
}
.swrapper {
background-image: linear-gradient(to bottom right, #201, #a0f);
width:50%;
height:35px;
position:fixed;
bottom:564px;
left:0px;
z-index:15000;
display:flex;
}
.search input{
background:#fff;
padding:1px 5px;
border:1px solid #999fcf;
width:237px;
height:20px;
border-right:none;
border-radius: 15px 0 0 15px;
color:#aaa;
z-index:15000;
transition:all .4s ease-in-out;
box-shadow:inset 4px 6px 8px -5px #777;
position:absolute;
top:6px;
left:2px;
outline:none;
}
.search input:focus{
color: #000;
background:#ddd;
caret-color:#000;
z-index:15000;
outline:none;
}
#sidebarwrap {
display:block;
border:none;
background:black;
width:50%;
height:100%;
position:fixed;
left:0;
top:0;
}
#menu {
background:black;
width:5%;
height:5.7%;
cursor:pointer;
border:3px solid black;
filter: drop-shadow(1px 1px 5px #000);
position:fixed;
top:40px;
left:380px;
color:goldenrod;
}
$('#menu').click(function(){
$('#sidebarwrap').add('#menu').animate({width: 'toggle'});
});
My first thought was maybe wrappers, but I already have one for the whole thing.