Home>

I want to bring the drawer menu to the front not only on my PC but also on my smartphone
When viewed on a smartphone, the link is responsive and the text is completely behind the content
The link works, but the background color is gray and the text is completely hidden
Tell me who I want to know today

Error message

Drawer menu coming out from the top http://git.blivesta.com/drawer/top/
I downloaded the code from this site and put it in the data (header part) of the site I made in the past (It works properly when viewed on a PC, but only the background gray color appears on the smartphone → http : //reality-star700.com/test/beginner.html

Error message
Applicable source code

<html>
<head>
<meta charset ="UTF-8">
<meta http-equiv ="X-UA-Compatible"content ="IE = edge">
<meta content ="width = device-width, initial-scale = 1.0, maximum-scale = 1.0, minimum-scale = 1.0"name ="viewport">
<meta name ="keywords"content ="Second Life, Day Trade, Arbitrage, Alchemy, Investment">
<meta name ="description"content ="Pseudo Experience Project, Binary Options">
<link rel ="SHORTCUT ICON"HREF ="">
<title>Second Life | Road to Investment Master</title>

<!-Include jQuery Library->
<link rel ="stylesheet"href ="css/reset.css"type ="text/css"charset ="utf-8"/>
<link rel ="stylesheet"href ="css/style.css"type ="text/css"charset ="utf-8"/>
<link href ="css/sandbox.css"rel ="stylesheet">
<link href ="dist/css/drawer_2.css"rel ="stylesheet">

<script src ="https: //cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src ="https: //cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.js"></script>
<script src ="https: //cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src ="dist/js/drawer.min.js"charset ="utf-8"></script>
<script>
$(document) .ready (function () {
$('.drawer'). drawer ();
});
</script>

</head>
<body class ="drawer drawer--top drawer--navbarTopGutter">

<header class ="drawer-navbar drawer-navbar--fixed"role ="banner">
<div class ="drawer-container">
<div class ="drawer-navbar-header">
<a class ="drawer-brand"href ="./ index.html">Second Life</a>
<button type ="button"class ="drawer-toggle drawer-hamburger">
<span class ="sr-only">toggle navigation</span>
<span class ="drawer-hamburger-icon"></span>
</button>
</div>

<nav class ="drawer-nav"role ="navigation">
<ul class ="drawer-menu">
<li><a class ="drawer-menu-item"href ="index.html">Top</a></li>
<li><a class ="drawer-menu-item"href ="beginner.html">For Beginners</a></li>
<li><a class ="drawer-menu-item"href ="#">Can I make money on my smartphone?</a></li>
<li class ="drawer-dropdown">
<a class ="drawer-menu-item"data-target ="#"href ="#"data-toggle ="dropdown"role ="button"aria-expanded ="false" ;>
Practical examples using the talk app<span class ="drawer-caret"></span>
</a>
<ul class ="drawer-dropdown-menu">
<li><a class ="drawer-dropdown-menu-item"href ="./ navbar-top.html">One of your investments</a></li>
<li><a class ="drawer-dropdown-menu-item"href ="./ navbar-left.html">One of your investments</a></li>
<li><a class ="drawer-dropdown-menu-item"href ="./ navbar-right.html">One of your investments</a></li>
</ul>
</li>
<li class ="drawer-dropdown">
<a class ="drawer-menu-item"data-target ="#"href ="#"data-toggle ="dropdown"role ="button"aria-expanded ="false" ;>
Before studying investments<span class ="drawer-caret"></span>
</a>
<ul class ="drawer-dropdown-menu">
<li><a class ="drawer-dropdown-menu-item"href ="./ fixed-navbar-top.html">Can be settled</a></li>< br /> <li><a class ="drawer-dropdown-menu-item"href ="./ fixed-navbar-left.html">Create a wallet</a></li>
<li><a class ="drawer-dropdown-menu-item"href ="./ fixed-navbar-right.html">soaring</a></li>< br /> </ul>
</li>
<li class ="drawer-dropdown">
<a class ="drawer-menu-item"href ="#"data-toggle ="dropdown"role ="button"aria-expanded ="false">
Contact<span class ="drawer-caret"></span>
</a>
<ul class ="drawer-dropdown-menu">
<li><a class ="drawer-dropdown-menu-item"href ="./ sidebar-left.html">Futures</a></li>
<li><a class ="drawer-dropdown-menu-item"href ="./ sidebar-right.html">FX</a></li>
</ul>
</li>
</ul>
</nav>

</div>

</header>

<main role ="main">
<!-Page content->
<div id ="head_1"><img src ="img/for_sitetop2.jpg"alt ="site image"></div>

</main>

<!-Main content->

<div id ="container">∗ I specified z-index for this container, but there was no response

<div id ="left">

~ The following is omitted ~

[CSS]

/*!

  • jquery-drawer v3.2.2
  • Flexible drawer menu using jQuery, iScroll and CSS.
  • http://git.blivesta.com/drawer
  • License: MIT
  • Author: blivesta<[email protected]>(http://blivesta.com/)
    */

.drawer-open {overflow: hidden! important}
.drawer-nav {
position: fixed;
z-index: 4;
top: 0;
overflow: hidden;
width: 16.25rem;
height: 100%;
color: # 222;
background-color: #fff;
opacity: 0.7;
transition: opacity .2s ease-out;
}

container {

max-width: 1100px;
min-height: 100%;
height: auto;
position: relative;
z-index: 0! important;
margin: 0 auto;
background: #fff;
min-height: calc (100vh-70px);
overflow: auto;

}

.drawer-brand {
font-size: 1.5rem;
font-weight: 700;
line-height: 3.75rem;
display: block;
padding-right: .75rem;
padding-left: .75rem;
text-decoration: none;
color: # 222
}

.drawer-menu {
margin: 0;padding: 0;
list-style: none;
}

.drawer-menu-item {
font-size: 1rem;
display: block;
padding: .75rem;
text-decoration: none;
color: # 222
}

.drawer-menu-item: hover
{
text-decoration: underline;
color: # 555;background-color: transparent
}

.drawer-overlay
{
position: fixed;
z-index: 2;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100%;
background-color:
rgba (0,0,0, .2)
}

.drawer-open .drawer-overlay {
display: block
}

.drawer--top .drawer-nav {
top: -100%;
left: 0;
width: 100%;
height: auto;
max-height: 100%;
-webkit-transition: top .6s cubic-bezier (.19,1, .22,1);
transition: top .6s cubic-bezier (.19,1, .22,1)
}

.drawer--top.drawer-open
.drawer-nav {top: 0}
.drawer--top .drawer-hamburger, .drawer--top.drawer-open
.drawer-hamburger {right: 0} .drawer--left .drawer-nav
{
left: -16.25rem;
-webkit-transition: left .6s cubic-bezier (.19,1, .22,1);
transition: left .6s cubic-bezier (.19,1, .22,1)
}

.drawer--left .drawer-hamburger, .drawer--left.drawer-open .drawer-nav, .drawer--left.drawer-open .drawer-navbar .drawer-hamburger
{left: 0}

.drawer--left.drawer-open .drawer-hamburger {left: 16.25rem}
.drawer--right .drawer-nav {right: -16.25rem;-webkit-transition: right .6s cubic-bezier (.19,1, .22,1);transition: right .6s cubic-bezier (.19 , 1, .22,1)}. Drawer--right
.drawer-hamburger, .drawer--right.drawer-open .drawer-nav, .drawer--right.drawer-open .drawer-navbar .drawer-hamburger
{right: 0}
.drawer--right.drawer-open .drawer-hamburger {right: 16.25rem}
.drawer-hamburger {position: fixed;
z-index: 3;
top: 0;
display: block;
box-sizing: content-box;
width: 2rem;
padding: 0;
padding: 18px .75rem 30px;
-webkit-transition: all .6s cubic-bezier (.19,1, .22,1);
transition: all .6s cubic-bezier (.19,1, .22,1);
-webkit-transform: translateZ (0);
transform: translateZ (0);border: 0;
outline: 0;background-color: transparent}

.drawer-hamburger: hover {
cursor: pointer;
background-color:
transparent
}

.drawer-hamburger-icon {
position: relative;
display: block;
margin-top: 10px
}

.drawer-hamburger-icon, .drawer-hamburger-icon: after, .drawer-hamburger-icon: before {
width: 100%;
height: 2px;
-webkit-transition: all .6s cubic-bezier (.19,1, .22,1);
transition: all .6s cubic-bezier (.19,1, .22,1);
background-color: # 222}

.drawer-hamburger-icon: after, .drawer-hamburger-icon: before {
position: absolute;
top: -10px;left: 0;content:""}

.drawer-hamburger-icon: after {top: 10px}
.drawer-open .drawer-hamburger-icon {
background-color: transparent
}

~ The following is omitted ~

] (760737bc75b48b85aa5bb54e7a34d055.jpeg)] (8959b6397d6fb1e6c8a6cc5b0c84e71b.jpeg)

  • Answer # 1

    Since there was a header source of the previous site in the style sheet, and it overlapped with the header of another drawer menu, it was corrected

    In the instruction of the original header, the hidden of the overflow was hidden on the PC side, and the drop-down part was hidden, and it was the reason that the characters were not visible on the smartphone

    Thank you for your inquiry. I'm still in the process of making it, so I'd like to ask other questions.

Related articles