2017-06-14 9 views
-1

これは私がhttp://www.jokerleb.com/で作業しているウェブサイトで、私はこの無料版https://responsive.menuを使用しています。 400px以下のデバイスに表示されます。メニューが開いているときにボタンが消えるようにする

enter image description here

私は、メニューが開いているときに消えるためのボタンや単語「カテゴリ」をしたいです。そして、私は右上にxを配置したいと思います。

私はそれはそれを行う方法、動作しない?

.responsive-menu-accessible is-active{ 
    background-color: transparent!important; 
} 

.responsive-menu-accessible is-active text{ 
    background-color:transparent!important; 
} 

を試してみましたか私はinspect要素から成功することができますが、間違ったクラスで作業していると思います。

+0

あなたのis-activeとtextは、もしそれが.is-active .textであればクラスですか?また、ディスプレイを使用する方が良い:何かを隠したい場合はnone。 – PenAndPapers

+0

私は問題のメニューに慣れていませんが、 'is-active'は実際には' .is-active'でなければなりません。 'text'は** **でも' .text'でなければなりませんが、これがクラスか実際のテキストフィールドを参照しているかどうかはわかりません。 –

+0

最後にセミコロンを忘れないでください!important - あなたがそれを省略した、私はあなたのコードを整理していたときに気づいただけです。 –

答えて

1
@media screen and (max-width: 400px) 
(index):172 
.responsive-menu-open button#responsive-menu-button .responsive-menu-box { 
    color: #fdc300; 
    float: right; 
} 

@media screen and (max-width: 400px) 
(index):172 
.responsive-menu-open button#responsive-menu-button:hover, .responsive-menu-open button#responsive-menu-button:focus, button#responsive-menu-button:hover, button#responsive-menu-button:focus { 
    background: transparent; 
    top: 0!important; 
} 

@media screen and (max-width: 400px) 
(index):172 
.responsive-menu-open #responsive-menu-container.push-top, .responsive-menu-open #responsive-menu-container.slide-top { 
    transform: translateY(0); 
    -ms-transform: translateY(0); 
    -webkit-transform: translateY(0); 
    -moz-transform: translateY(0); 
    padding-top: 30px; 
} 

上記のコードをcssに変更し、responsive-menu-labelクラスからテキストを削除します。 Result

関連する問題