私はワードプレスhttp://wordpress.org/extend/themes/twentytwelveにテーマ22を使用しており、デスクトップに見栄えがするようにメニューを変更しました。モバイル版では、メニューのボタンが表示されますが、クリックすると通常のメニューが表示されます。通常のメニューに影響を与えずにモバイルメニューのスタイルを変更したいのですが、どこで実行すればよいかわかりません。私のサイトはオンラインではないので、私のサイトへのリンクを提供できません
22デモhttp://twentytwelvedemo.wordpress.com/
これは、問題ないように見える私の停止メニューです。
デスクトップメニューに影響を与えずにスタイリングしたいモバイルメニューです
デスクトップメニューのスタイルを設定するために、次のcssを変更しました
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
border-bottom: 2px solid #f68a1f;
border-top: none;
margin: 0 0 2px 0;
padding: 0px;
padding-top: 50px;
width: 550px;
}
.main-navigation ul {
float: right;
margin: 0;
padding: 0;
list-style: none;
}
.main-navigation li a,
.main-navigation li {
list-style: none;
float: left;
width: 90px;
margin:0px;
}
.main-navigation li a {
color: #292A2B;
display: block;
padding: 5px 5px;
text-align:center;
text-decoration: none;
font-weight: normal;
font-size: 14px;
line-height: 30px;
border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
}
.main-navigation li a:hover {
color: #ffffff;
background-color: #f68a1f;
border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
}
.main-navigation li {
margin: 0 40px 0 0;
margin: 0 1rem 0 0;
position: relative;
}
.main-navigation li ul {
display: none;
margin: 0;
padding: 0;
position: absolute;
top: 100%;
z-index: 1;
}
.main-navigation li ul ul {
top: 0;
left: 100%;
}
.main-navigation ul li:hover > ul {
color: #ffffff;
background-color: #f68a1f;
border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
}
.main-navigation li ul li a {
color: #292A2B;
display: block;
padding: 5px 5px;
text-align:center;
text-decoration: none;
font-weight: normal;
font-size: 14px;
line-height: 30px;
border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
}
.main-navigation li ul li a:hover {
color: #ffffff;
background-color: #f68a1f;
border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
}
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
color: #ffffff;
background-color: #f68a1f;
}
テーマhttp://pastebin.com/SFaT4BCnからのcssファイル全体