このリサイズ時にメニューに「div style=”display: block;”」が追加されてしまうのはwordpressの仕様なのでしょうか？
そういう事はないと思います。テーマ以外に、何かプラグイン使っていませんか？
これはこのテーマの不具合のようですね。
下記内容のjsファイルをjQueryよりあとに読み込めば回避できます。
jQuery(document).ready(function($) {
$(window).on( 'resize', function(){
if ( $(window).width() > 768 ) {
$('#mobile-navigation .menu').css('display','none');
}
});
});
あっ、そういう事なんですね
原因部分がどこにあるのか、ちょっとわかりませんが、そういう事ならCSSでも消せます。
style.css line:1194
/* 追加 */
#restofheader #mobile-navigation{
display:none!important;
}
@media only screen and (max-width: 768px) {
.widget {
border: none;
background-color: #333333;
}
#wp-calendar {
margin: 0 0 1.615em;
width: 100%;
}
#wp-calendar caption {
color: white;
padding: 0.45em 0;
text-align: center;
}
#wp-calendar thead th {
font-weight: bold;
text-align: center;
}
#wp-calendar tbody td {
background: #c5c5c5;
border: 1px solid;
border-color: #333333;
color: #333333;
padding: 0.45em 0;
text-align: center;
}
#wp-calendar tbody .pad {
background: none;
}
#wp-calendar tfoot td {
padding: 0.45em 0 0;
}
#wp-calendar tfoot #next {
text-align: right;
}
/* 追加 */
#restofheader #mobile-navigation{
display:block!important;
}
}
nobitaさん、なるほどです。
ただ、この部分はハンバーガーアイコンのクリックイベントでjQueryのfadeToggleして、メニューの表示・非表示を切り替えていますので、後半分のCSS指定は追加しないほうがいいと思います。
あ、PC用の時だけのメディアクエリーにしないといけないかな。
ikaringさん
提示した方法は、インラインスタイルを 上書きするために詳細度を強くかけてあるので、後半部分を指定しないとハンバーガーアイコン自体も表示できなくなってしまうので、
jQueryの挙動に影響があるという事でしたら、没かもしれませんね。
たぶん、jQueryなんかから、スタイルを追加していると思うんですが 原因部分を把握していないんで、良かったら教えてください。
あ、ちゃんと要素確認してなかったです。
#mobile-navigationじゃなくて、その中の.menuをfadeToggleしてます。
jQueryのfadeToggleはopacityとdisplayをいじるので、ハンバーガーアイコンを押して表示させると、display:blockがインラインに残ってしまうんですよね。
CSSでやるなら下記だけでいけるんじゃないかと思います。
@media only screen and (min-width: 768px) {
#restofheader .menu{
display:none!important;
}
}
テーマのサポートフォーラムに投稿しておきました。
そのうちアップデートされるかもしれません^^
https://wordpress.org/support/theme/linedrawing
