質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Q&A

0回答

331閲覧

PCでもハンバーガーメニューが表示されてしまう

KouheiChuuda

総合スコア7

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

0グッド

0クリップ

投稿2018/06/16 00:31

wordpressのcustomifyというテーマを使用しています。
メニューバーが表示されず、バーガーメニューが表示されてしまいます。テーマを変えてもバーガーメニューのままでした。解決策を教えて下さい。よろしくおねがいします。

/* Navigation */
.nav-menu-mobile .menu-item .link-before, .nav-menu-desktop .menu-item .link-before {
position: relative;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.nav-menu-mobile .nav-icon-angle, .nav-menu-desktop .nav-icon-angle {
display: inline-block;
font-size: inherit;
text-rendering: auto;
text-decoration: none !important;
position: relative;
width: 7px;
height: 7px;
margin-top: 3px;
border-left: 1px solid currentColor;
border-top: 1px solid currentColor;
-webkit-transform: rotate(-135deg) translateY(50%);
-ms-transform: rotate(-135deg) translateY(50%);
transform: rotate(-135deg) translateY(50%);
}

.nav-menu-desktop {
font-size: 15px;
font-weight: 500;
line-height: 1;
}
.nav-menu-desktop .nav-icon-angle {
display: inline;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-decoration: none !important;
}
.nav-menu-desktop.hide-arrow-active .nav-icon-angle {
display: none;
}
.nav-menu-desktop .menu {
list-style: none;
padding: 0px;
margin: 0px;
}
.nav-menu-desktop .menu li {
display: inline-block;
position: relative;
}
.nav-menu-desktop .menu li:last-child {
margin-right: 0px;
}
.nav-menu-desktop .menu li a {
display: inline-block;
color: inherit;
-webkit-transition: all 0.14s ease-out;
transition: all 0.14s ease-out;
-webkit-text-decoration-color: currentColor;
text-decoration-color: currentColor;
}
.nav-menu-desktop .menu li a:hover {
color: #0cb4ce;
}
.nav-menu-desktop .menu li.current-menu-item > a {
color: #0cb4ce;
}
.nav-menu-desktop .menu > li > a {
padding: 14px 15px 15px;
}
.nav-menu-desktop .menu > li > a i {
line-height: 0;
}
.nav-menu-desktop .menu > li.menu-item-has-children > a .nav-icon-angle {
margin-left: 5px;
line-height: 0;
}
.nav-menu-desktop .menu .sub-menu li.menu-item-has-children > a {
position: relative;
}
.nav-menu-desktop .menu .sub-menu li.menu-item-has-children > a:before, .nav-menu-desktop .menu .sub-menu li.menu-item-has-children > a:after {
content: "";
display: table;
}
.nav-menu-desktop .menu .sub-menu li.menu-item-has-children > a:after {
clear: both;
}
.nav-menu-desktop .menu .sub-menu li.menu-item-has-children > a .nav-icon-angle {
margin-left: 5px;
float: right;
}
.nav-menu-desktop .sub-lv-0, .nav-menu-desktop .sub-menu {
position: absolute;
left: 0px;
-webkit-transition: all .3s ease;
transition: all .3s ease;
z-index: 99;
opacity: 0;
height: 0;
overflow: hidden;
visibility: hidden;
display: block;
-webkit-transform: translateY(40px);
-ms-transform: translateY(40px);
transform: translateY(40px);
top: 100%;
margin: 0px;
padding: 0px;
}
.nav-menu-desktop .sub-menu {
width: 14em;
background: #ffffff;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.14);
text-align: left;
}
.nav-menu-desktop .sub-menu .link-before {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.nav-menu-desktop .sub-menu .nav-icon-angle {
-webkit-transform: rotate(135deg) translateY(0);
-ms-transform: rotate(135deg) translateY(0);
transform: rotate(135deg) translateY(0);
}
.nav-menu-desktop .sub-menu li {
display: block;
margin: 0px;
padding: 0px;
}
.nav-menu-desktop .sub-menu li a {
display: block;
width: 100%;
padding: 8px 15px;
font-size: 14px;
font-weight: normal;
-webkit-transition: background 0.15s ease-out;
transition: background 0.15s ease-out;
line-height: 1.6;
color: #666666;
}
.nav-menu-desktop .sub-menu li a:hover {
background: rgba(0, 0, 0, 0.015);
color: #111111;
}
.nav-menu-desktop .sub-menu .sub-menu {
top: 0px;
left: 100%;
}
.nav-menu-desktop .menu-item:hover > .sub-menu, .nav-menu-desktop .menu-item:hover > .sub-lv-0, .nav-menu-desktop .menu-item:focus > .sub-menu, .nav-menu-desktop .menu-item:focus > .sub-lv-0, .nav-menu-desktop .menu-item.focus > .sub-menu, .nav-menu-desktop .menu-item.focus > .sub-lv-0 {
height: auto;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
overflow: initial;
visibility: visible;
opacity: 1;
}
.nav-menu-desktop.style-plain .primary-menu-ul:before, .nav-menu-desktop.style-plain .primary-menu-ul:after {
content: "";
display: table;
}
.nav-menu-desktop.style-plain .primary-menu-ul:after {
clear: both;
}
.nav-menu-desktop.style-plain .primary-menu-ul > li {
float: left;
}
.nav-menu-desktop.style-plain .primary-menu-ul > li a:hover, .nav-menu-desktop.style-plain .primary-menu-ul > li a:focus {
color: #0cb4ce;
}
.nav-menu-desktop.style-plain .primary-menu-ul > li.current-menu-item > a, .nav-menu-desktop.style-plain .primary-menu-ul > li.current-menu-ancestor > a {
color: #0cb4ce;
}
.nav-menu-desktop.style-full-height .primary-menu-ul:before, .nav-menu-desktop.style-full-height .primary-menu-ul:after {
content: "";
display: table;
}
.nav-menu-desktop.style-full-height .primary-menu-ul:after {
clear: both;
}
.nav-menu-desktop.style-full-height .primary-menu-ul > li {
float: left;
}
.nav-menu-desktop.style-full-height .primary-menu-ul > li > a {
background: transparent;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
vertical-align: middle;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.nav-menu-desktop.style-full-height .primary-menu-ul > li > a:hover {
color: #FFFFFF;
background-color: #0cb4ce;
}
.nav-menu-desktop.style-full-height .primary-menu-ul > li.current-menu-item > a, .nav-menu-desktop.style-full-height .primary-menu-ul > li.current-menu-ancestor > a {
color: #ffffff;
background-color: #0cb4ce;
}
.nav-menu-desktop.style-border-bottom .primary-menu-ul > li > a .link-before {
position: relative;
}
.nav-menu-desktop.style-border-bottom .primary-menu-ul > li > a .link-before:before {
position: absolute;
bottom: -6px;
width: 100%;
left: 0px;
height: 2px;
background-color: transparent;
content: "";
}
.nav-menu-desktop.style-border-bottom .primary-menu-ul > li:hover > a .link-before:before, .nav-menu-desktop.style-border-bottom .primary-menu-ul > li:focus > a .link-before:before {
background-color: currentColor;
}
.nav-menu-desktop.style-border-bottom .primary-menu-ul > li.current-menu-item > a .link-before:before, .nav-menu-desktop.style-border-bottom .primary-menu-ul > li.current-menu-ancestor > a .link-before:before {
background-color: currentColor;
}
.nav-menu-desktop.style-border-top .primary-menu-ul > li > a .link-before {
position: relative;
}
.nav-menu-desktop.style-border-top .primary-menu-ul > li > a .link-before:before {
position: absolute;
top: -6px;
width: 100%;
left: 0px;
height: 2px;
background-color: transparent;
content: "";
}
.nav-menu-desktop.style-border-top .primary-menu-ul > li:hover > a .link-before:before, .nav-menu-desktop.style-border-top .primary-menu-ul > li:focus > a .link-before:before {
background-color: currentColor;
}
.nav-menu-desktop.style-border-top .primary-menu-ul > li.current-menu-item > a .link-before:before, .nav-menu-desktop.style-border-top .primary-menu-ul > li.current-menu-ancestor > a .link-before:before {
background-color: currentColor;
}

/* On Menu Sidebar */
.nav-menu-mobile .menu {
margin: 0px;
padding: 0px;
list-style: none;
}
.nav-menu-mobile .menu li:first-child > a {
border-top: none;
}
.nav-menu-mobile .menu .menu-item a > .link-before .nav-icon-angle {
display: none;
}
.nav-menu-mobile .menu li {
list-style: none;
position: relative;
}
.nav-menu-mobile .menu li.menu-item-has-children > a {
padding-right: 30px !important;
}
.nav-menu-mobile .menu li a {
display: block;
padding: 0.55em 1.5em;
border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.nav-menu-mobile .menu li a:hover, .nav-menu-mobile .menu li a:focus {
background: rgba(0, 0, 0, 0.01);
}
.nav-menu-mobile .menu li .nav-toggle-icon {
display: block;
position: absolute;
top: 0px;
right: 0px;
text-align: center;
vertical-align: middle;
line-height: 1;
-webkit-transition: all .5s ease;
transition: all .5s ease;
cursor: pointer;
padding: 0.88em 0.9em;
border-left: 1px solid rgba(255, 255, 255, 0.09);
background: transparent;
}
.nav-menu-mobile .menu li .nav-toggle-icon:hover {
box-shadow: none;
}
.nav-menu-mobile .menu li .nav-toggle-icon .nav-icon-angle {
-webkit-transform: rotate(-135deg) translateY(50%) translateX(50%);
-ms-transform: rotate(-135deg) translateY(50%) translateX(50%);
transform: rotate(-135deg) translateY(50%) translateX(50%);
}
.nav-menu-mobile .menu .sub-menu {
opacity: 0;
-webkit-transition: opacity .5s ease;
transition: opacity .5s ease;
margin: 0px;
border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.nav-menu-mobile .menu .sub-menu li a {
padding-left: 3em;
}
.nav-menu-mobile .menu .open-sub > a .nav-toggle-icon i {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.nav-menu-mobile .menu .open-sub > .sub-menu {
display: block;
opacity: 1;
}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問