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

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

ただいまの
回答率

90.34%

  • WordPress

    7660questions

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

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

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 129

KouheiChuuda

score 1

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;
}

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

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

同じタグがついた質問を見る

  • WordPress

    7660questions

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