jqueryのプラグインの使用で、不要なものが消えない

Question

jqueryのプラグイン「Drawer」を、レスポンシブにアレンジして使用しました。
しかし、PC版で画像のように、不要なボタンが残ってしまっています。
googleで検証したところ、header部分にあるようなのですが、それを
PC版をdispley:block;にしても消えません。。
初心者であるため、どこに原因があるのかもよくわからない状態です。。
何か助言いただけると嬉しいです。。

■使っているプラグイン
http://git.blivesta.com/drawer/

PC版。左上に不要なボタンがあります。↑

スマホ版。こちらは正常です（不要なものはなし）

http://nouveauhair.mitsu-hide.com/

Comments

[nekora]

質問は編集、追記できます。
プラグインを使っていらっしゃるなら、そのプラグインの公式HPないしは公式へのリンクが記載されてる参考にしたHPのリンクを記載してください。
またHTMLは自分の判断で一部抜粋ではなく、全文を記載してください。
デバッグして調査するためにはHTML全文、CSS全文、スクリプト全文の3点セットを公開してください。
画像を参照とありますが画像UPに失敗してます。
とにかく今のままの自己判断でのHTML一部抜粋では、永遠に回答がつかないですよ。
3点セットを公開していただければ調査して回答を出せると思います。

[yyymmm]

そうですよね、、ありがとうございます！
また、全文入りきらなかったので、勝手ながらこちらに追記したいと思います。
以下CSSです。

[yyymmm]

すみません、こちらにはコードは載せられないようですね、、
ちょっと調べてみます。

[yyymmm]

申し訳ありません。コードがすべて載せきれなかったため
サイトを実際に載せました。

[nekora]

コードをベタうちで貼り付けられますので
CSSを貼り付けてくだされば調査しますよー

[yyymmm]

以下、style.cssです。

@charset "utf-8";

/*===================
======================
リセットcss
=======================
======================*/

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}

blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ul {
list-style: none;
}

/*-----------------
-------------------
ここから
-------------------
------------------*/

body {
font-family: "Quicksand", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",
"メイリオ", Meiryo, sans-serif;

color: #5c5959;
letter-spacing: 1px;
}
header ul {
display: flex;
justify-content: center;
}
header ul li {
margin: 40px 40px;
}
header ul li a {
text-decoration: none;
color: #3d3935;
font-size: 15px;
position: relative;
display: inline-block;
}
header ul li a::after {
position: absolute;
bottom: 5px;
left: 0;
content: "";
width: 100%;
height: 1px;
background: #333;
opacity: 0;
visibility: hidden;
transition: 0.3s;
}
header ul li a:hover::after {
bottom: -4px;
opacity: 1;
visibility: visible;
}

header img {
width: 80%;
text-align: center;
}
.top_img img {
width: 100%;
}

.reservation_btn {
display: block;
padding: 40px 100px;
width: 260px;
margin: 0 auto;
text-align: center;
color: #fff;
font-size: 20px;
text-decoration: none;
background: #000; /*背景色*/
margin-top: 100px;
}
.reservation_btn:hover {
opacity: 0.5;
}
.inner {
text-align: center;
}

.inner {
text-align: center;
}

.index {
margin: 140px 0 70px 0;
font-size: 20px;
}
.article {
display: inline-block;
font-size: 15px;
line-height: 40px;
letter-spacing: normal;
margin-bottom: 70px;
}

.about_img img {
width: 280px;
height: 341px;
margin-right: 40px;
}
.sp_br {
display: none;
}
@media screen and (max-width: 640px) {
/*全体*/
body {
max-width: 100%;
margin: auto;
padding: 0 20px;
}
.index {
margin: 70px 0 45px 0;
}

.drawer-nav {
display: block;
}
/*上部*/
.reservation_btn {
width: 40%;
margin-top: 50px;
padding: 20px 50px;
}
.top_img img {
min-width: initial;
}
/*topを下げる*/
.top_img {
margin-top: 100px;
}
/*about*/
.about_img {
margin-bottom: 20px;
}
.about_img img {
width: 80%;
max-width: 100%;
height: auto;
margin-right: 0;
}
.article {
margin-bottom: 20px;
}
.pc_br {
display: none;
}
}

/*style------------
-------------------*/
.style_btn {
display: block;
padding: 40px 80px;
width: 240px;
margin: 0 auto;
text-align: center;
color: #000;
border: solid 1px #000;
font-size: 20px;
text-decoration: none;
background: #fff; /*背景色*/
margin-top: 100px;
}

.style_btn:hover {
background-color: #a8a8a8;
}

.style_img {
display: flex;
margin-bottom: 70px;
text-align: center;
justify-content: center;
}
.l-card {
overflow: hidden;
width: 200px;
padding: 0;
margin: 24px auto;
border-radius: 4px;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px rgba(0, 0, 0, 0.1);
}

.l-card img {
display: block;
width: 100%;
opacity: 1;
-webkit-transition: opacity 0.4s, transform 0.4s;
transition: opacity 0.4s, transform 0.4s;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
.l-card:hover img {
opacity: 0.3;
-webkit-transform: scale3d(1.2, 1.2, 1);
transform: scale3d(1.2, 1.2, 1);
}
.rcm-overlay {
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
text-align: center;
-webkit-transition: opacity 0.4s;
transition: opacity 0.4s;
}
.l-card:hover .rcm-overlay {
opacity: 1;
}

.l-card:hover {
color: black;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}

.more-text {
color: #000;
font-weight: bold;
}

@media screen and (max-width: 640px) {
.style_img {
display: block;
margin-bottom: 45px;
}
.style_btn {
width: 50%;
padding: 20px 40px;
margin-top: 0;
}
}

/*thumbnailのスタイル設定*/

/*staff*/
.member {
display: flex;
text-align: center;
width: 100%;
margin-bottom: 40px;
}
.member dl:nth-child(3) {
margin: 0;
}

.member dl {
flex: 0 1 45%;
text-align: left;
margin-bottom: 20px;
}

.member dl {
margin-right: 30px;
}
.member dt {
font-size: 16px;
margin-bottom: 20px;
}
.name {
font-size: 24px;
font-weight: 700;
}
.sns {
font-size: 17px;
margin-top: 10px;
color: #e9ad67;
}

.sns a {
font-size: 15px;
margin-left: 10px;
color: #e9ad67;
}

/*menu*/

.inner {
max-width: 900px;
margin: 0 auto;
}
#menu {
text-align: center;
}
.hr {
width: 100%;
}
.menu_unit {
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: 40px;
}
.menu_unit dl {
flex: 0 1 45%;
}
.menu_unit dd {
margin: 0 20px;
}
.menu_unit dd p {
display: flex;
justify-content: space-between;
}
.menu_unit dt {
text-align: left;
margin-bottom: 20px;
}
.menu_p {
text-align: right;
line-height: 1.5;
font-size: 15px;
}
.menu_info {
text-align: right;
font-size: 15px;
line-height: 1.5;
}
@media screen and (max-width: 640px) {
.menu_unit {
display: block;
}
dl {
margin-bottom: 40px;
}
}

/*aceess*/

.googlemaps iframe,
.googlemaps object,
.googlemaps embed {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}
.adress {
margin: 60px 0 20px 0;
line-height: 2;
font-size: 15px;
}
.info {
margin-bottom: 100px;
line-height: 2;
font-size: 15px;
}
.info a {
text-decoration: none;
color: #e9ad67;
}

/*---------
-----------
ここからフッター
-----------
-----------*/
footer {
width: 100%;
height: 70px;
}
.footer_inner {
text-align: center; /*テキストを真ん中に*/
line-height: 70px; /*縦方向ど真ん中*/
}
@media screen and (max-width: 640px) {
.footer_inner {
font-size: 13px;
}
}

[yyymmm]

以下、drawer.cssです。

@import "./variables";
@import "./base";
@import "./position-top";
@import "./position-left";
@import "./position-right";
@import "./hamburger";
@import "./accessibility";
@import "./sidebar";
@import "./navbar";
@import "./dropdown";
@import "./container";

[yyymmm]

以下、drawer.min.cssです。

/*!
* jquery-drawer v3.2.2
* Flexible drawer menu using jQuery, iScroll and CSS.
* http://git.blivesta.com/drawer
* License : MIT
* Author : blivesta <[e-mail]> (http://blivesta.com/)
*/
@media screen and (max-width: 640px) {

.drawer-open{overflow:hidden!important}.drawer-nav{position:fixed;z-index:2;top:0;overflow:hidden;width:16.25rem;height:100%;color:#222;background-color:#fff}.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:1;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:4;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}.drawer-open .drawer-hamburger-icon:after,.drawer-open .drawer-hamburger-icon:before{top:0}.drawer-open .drawer-hamburger-icon:before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.drawer-open .drawer-hamburger-icon:after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.sr-only{position:absolute;overflow:hidden;clip:rect(0,0,0,0);width:1px;height:1px;margin:-1px;padding:0;border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;overflow:visible;clip:auto;width:auto;height:auto;margin:0}.drawer--sidebar,.drawer--sidebar .drawer-contents{background-color:#fff}@media (min-width:64em){.drawer--sidebar .drawer-hamburger{display:none;visibility:hidden}.drawer--sidebar .drawer-nav{display:block;-webkit-transform:none;transform:none;position:fixed;width:12.5rem;height:100%}.drawer--sidebar.drawer--left .drawer-nav{left:0;border-right:1px solid #ddd}.drawer--sidebar.drawer--left .drawer-contents{margin-left:12.5rem}.drawer--sidebar.drawer--right .drawer-nav{right:0;border-left:1px solid #ddd}.drawer--sidebar.drawer--right .drawer-contents{margin-right:12.5rem}.drawer--sidebar .drawer-container{max-width:48rem}}@media (min-width:75em){.drawer--sidebar .drawer-nav{width:16.25rem}.drawer--sidebar.drawer--left .drawer-contents{margin-left:16.25rem}.drawer--sidebar.drawer--right .drawer-contents{margin-right:16.25rem}.drawer--sidebar .drawer-container{max-width:60rem}}.drawer--navbarTopGutter{padding-top:3.75rem}.drawer-navbar .drawer-navbar-header{border-bottom:1px solid #ddd;background-color:#fff}.drawer-navbar{z-index:3;top:0;width:100%}.drawer-navbar--fixed{position:fixed}.drawer-navbar-header{position:relative;z-index:3;box-sizing:border-box;width:100%;height:3.75rem;padding:0 .75rem;text-align:center}.drawer-navbar .drawer-brand{line-height:3.75rem;display:inline-block;padding-top:0;padding-bottom:0;text-decoration:none}.drawer-navbar .drawer-brand:hover{background-color:transparent}.drawer-navbar .drawer-nav{padding-top:3.75rem}.drawer-navbar .drawer-menu{padding-bottom:7.5rem}@media (min-width:64em){.drawer-navbar{height:3.75rem;border-bottom:1px solid #ddd;background-color:#fff}.drawer-navbar .drawer-navbar-header{position:relative;display:block;float:left;width:auto;padding:0;border:0}.drawer-navbar .drawer-menu--right{float:right}.drawer-navbar .drawer-menu li{float:left}.drawer-navbar .drawer-menu-item{line-height:3.75rem;padding-top:0;padding-bottom:0}.drawer-navbar .drawer-hamburger{display:none}.drawer-navbar .drawer-nav{position:relative;left:0;overflow:visible;width:auto;height:3.75rem;padding-top:0;-webkit-transform:translateZ(0);transform:translateZ(0)}.drawer-navbar .drawer-menu{padding:0}.drawer-navbar .drawer-dropdown-menu{position:absolute;width:16.25rem;border:1px solid #ddd}.drawer-navbar .drawer-dropdown-menu-item{padding-left:.75rem}}.drawer-dropdown-menu{display:none;box-sizing:border-box;width:100%;margin:0;padding:0;background-color:#fff}.drawer-dropdown-menu>li{width:100%;list-style:none}.drawer-dropdown-menu-item{line-height:3.75rem;display:block;padding:0;padding-right:.75rem;padding-left:1.5rem;text-decoration:none;color:#222}.drawer-dropdown-menu-item:hover{text-decoration:underline;color:#555;background-color:transparent}.drawer-dropdown.open>.drawer-dropdown-menu{display:block}.drawer-dropdown .drawer-caret{display:inline-block;width:0;height:0;margin-left:4px;-webkit-transition:opacity .2s ease,-webkit-transform .2s ease;transition:opacity .2s ease,-webkit-transform .2s ease;transition:transform .2s ease,opacity .2s ease;transition:transform .2s ease,opacity .2s ease,-webkit-transform .2s ease;-webkit-transform:rotate(0deg);transform:rotate(0deg);vertical-align:middle;border-top:4px solid;border-right:4px solid transparent;border-left:4px solid transparent}.drawer-dropdown.open .drawer-caret{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.drawer-container{margin-right:auto;margin-left:auto}@media (min-width:64em){.drawer-container{max-width:60rem}}@media (min-width:75em){.drawer-container{max-width:70rem}}

}

以上です。よろしければお願いいたしますm(._.)m

[yyymmm]

すみません、追記で、drawer.jsです。

;(function umd(factory) {
'use strict';
if (typeof define === 'function' && define.amd) {
define(['jquery'], factory);
} else if (typeof exports === 'object') {
module.exports = factory(require('jquery'));
} else {
factory(jQuery);
}
}(function Drawer($) {
'use strict';
var namespace = 'drawer';
var touches = typeof document.ontouchstart != 'undefined';
var __ = {
init: function init(options) {
options = $.extend({
iscroll: {
mouseWheel: true,
preventDefault: false
},
showOverlay: true
}, options);

__.settings = {
state: false,
events: {
opened: 'drawer.opened',
closed: 'drawer.closed'
},
dropdownEvents: {
opened: 'shown.bs.dropdown',
closed: 'hidden.bs.dropdown'
}
};

__.settings.class = $.extend({
nav: 'drawer-nav',
toggle: 'drawer-toggle',
overlay: 'drawer-overlay',
open: 'drawer-open',
close: 'drawer-close',
dropdown: 'drawer-dropdown'
}, options.class);

return this.each(function instantiateDrawer() {
var _this = this;
var $this = $(this);
var data = $this.data(namespace);

if (!data) {
options = $.extend({}, options);
$this.data(namespace, { options: options });

__.refresh.call(_this);

if (options.showOverlay) {
__.addOverlay.call(_this);
}

$('.' + __.settings.class.toggle).on('click.' + namespace, function toggle() {
__.toggle.call(_this);
return _this.iScroll.refresh();
});

$(window).on('resize.' + namespace, function close() {
__.close.call(_this);
return _this.iScroll.refresh();
});

$('.' + __.settings.class.dropdown)
.on(__.settings.dropdownEvents.opened + ' ' + __.settings.dropdownEvents.closed, function onOpenedOrClosed() {
return _this.iScroll.refresh();
});
}

}); // end each
},

refresh: function refresh() {
this.iScroll = new IScroll(
'.' + __.settings.class.nav,
$(this).data(namespace).options.iscroll
);
},

addOverlay: function addOverlay() {
var $this = $(this);
var $overlay = $('<div>').addClass(__.settings.class.overlay + ' ' + __.settings.class.toggle);

return $this.append($overlay);
},

toggle: function toggle() {
var _this = this;

if (__.settings.state) {
return __.close.call(_this);
} else {
return __.open.call(_this);
}
},

open: function open() {
var $this = $(this);

if (touches) {
$this.on('touchmove.' + namespace, function disableTouch(event) {
event.preventDefault();
});
}

return $this
.removeClass(__.settings.class.close)
.addClass(__.settings.class.open)
.drawerCallback(function triggerOpenedListeners() {
__.settings.state = true;
$this.trigger(__.settings.events.opened);
});
},

close: function close() {
var $this = $(this);

if (touches) $this.off('touchmove.' + namespace);

return $this
.removeClass(__.settings.class.open)
.addClass(__.settings.class.close)
.drawerCallback(function triggerClosedListeners() {
__.settings.state = false;
$this.trigger(__.settings.events.closed);
});
},

destroy: function destroy() {
return this.each(function destroyEach() {
var _this = this;
var $this = $(this);
$('.' + __.settings.class.toggle).off('click.' + namespace);
$(window).off('resize.' + namespace);
$('.' + __.settings.class.dropdown).off(__.settings.dropdownEvents.opened + ' ' + __.settings.dropdownEvents.closed);
_this.iScroll.destroy();
$this
.removeData(namespace)
.find('.' + __.settings.class.overlay)
.remove();
});
}

};

$.fn.drawerCallback = function drawerCallback(callback) {
var end = 'transitionend webkitTransitionEnd';
return this.each(function setAnimationEndHandler() {
var $this = $(this);
$this.on(end, function invokeCallbackOnAnimationEnd() {
$this.off(end);
return callback.call(this);
});
});
};

$.fn.drawer = function drawer(method) {
if (__[method]) {
return __[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return __.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.' + namespace);
}
};

}));

[nekora]

./js/main.jsが必要です。開示お願いします。

[yyymmm]

main,jsですが、スライダーのjsファイルでした。一応添付します！

↓

$('.style_img').slick({
dots: true
});

Answer 1

もともとが常に表示（レスポンシブ非対応）なのを改造されたんですね。すごいと思います。

おしいのは、ハンバーガーメニューが640px以上の時には消えていてほしいわけで
今、表示されてる左上のボタン要素は、positon等のスタイルが一切当たってない時のボタンの表示です。偉そうに言ってる私も最初のころはスタイルを当てそこなってよく目にしたものです。

@media screen and (max-width: 640px)の指定をして

ハンバーガーメニューを出すようにされていますね。

ならば、それまではスタイルとか当たってない、ボタンは非表示になっていてほしいわけで、そのように書けばいいだけです。

style.css

/*-----------------
-------------------
ここから
-------------------
------------------*/

body {
font-family: "Quicksand", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",
"メイリオ", Meiryo, sans-serif;

color: #5c5959;
letter-spacing: 1px;
}

.drawer-hamburger { /*追加*/
    display: none;
}

header ul {
display: flex;
justify-content: center;
}

このように、640px以上の時には.drawer-hamburgerにdisplay: none;を指定しておきます。
そして640px以下になったとき@media screen and (max-width: 640px) で表示をblock;に
することで表示されるようになります。既にそのように記述してらっしゃいますね。
（意味通じるかな？分からなければコメント欄にかいてくださいね）

おしかったですね。後一歩考えてみれば完成だったのに、いい線行ってましたよ実に惜しい！

Comments

[yyymmm]

消えました。本当にありがとうございました！！！
とっても優しく教えていただいて感謝ですＴＴＴ
これからもがんばります！