ナビ背景、フォント、文字色はCSSで
レスポンシブサイトのグローバルナビ背景カラーは、標準で選択した
テンプレートカラーが優先で反映されますが、全体が同色ではない
独自イメージを演出したい、
そんな場合は、CSS指定により変更することが容易に可能なのですね
また、フォントカラーもサイトの構築に従い変化を望むなら可能です
変更箇所は、スタイルシートを開き以下項目に到達し
以下を書き換えて終了
background-color: #6d5d4e; 背景カラー変更箇所
color: #fff; フォントカラー 変更箇所
ここから
/* トップメニュー
==================================================
*/
*:first-child+html body {
padding-left: 1px;
}
#nav {
border-bottom: 4px solid #a19572;
background-color: #6d5d4e; 背景カラー変更箇所
}
#topmenubox {
margin: 0 auto;
text-align: center;
width: 916px;
}
#topmenubox #topmenubtn {
display: none;
}
#topmenu ul,#topmenu li{
list-style-image: none;
list-style-type: none;
background-image: none;
}
#topmenu ul {
font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,Verdana,'MS Pゴシック',sans-serif;
font-weight: 700;
overflow: hidden;
width: 900px;
padding: 10px 0;
}
#topmenu li {
border-left: 1px solid #a19572;
border-right: 1px solid #83705e;
padding: 0;
float: left;
width: 148px;
}
#topmenu li:last-child{
border-right: 1px solid #a19572;
}
#topmenu li a {
list-style-image: none;
color: #fff; フォントカラー 変更箇所
display: block;
font-size: 1em;
text-shadow: 0 0 1px rgba(255,255,255,.3);
overflow: hidden;
padding: 3px;
text-align: center;
text-decoration: none;
}
#topmenu li a:hover {
text-decoration: underline;
}
@media screen and (max-width: 899px) {
#topmenubox {
padding: 0;
width: auto;
}
#topmenu ul {
background: none repeat scroll 0 0 transparent;
display: table;
width: 100%;
clear: both;
margin: 0;
}
#topmenu li {
background: none repeat scroll 0 0 transparent;
display: table-cell;
float: none;
margin: 0;
padding: 0;
width: auto;
}
#topmenu li:before {
clear: both;
background-color: transparent;
content: "";
height: auto;
left: auto;
position: static;
top: auto;
width: auto;
}
#topmenu li a {
position: relative;
}
}
関連ページ
- ハンバーガーメニューの固定化?
- シリウスレイアウトがスマートフォンサイズに縮小するとGナビはハンバーガーデザインに切り替わりますが、スクロールオンでも位置固定、いつでもメニューをオープンできる状態にする指定方法。
- ハンバーガーメニューからドロワースタイルに可変させる手順
- シリウス風のハンバーガーデフォルト形式何ですが、横から滑り表示するメニュー一覧(drawer)を設定する手順のご案内です。
- ハンバーガーメニューのカスタマイズ(カラー変更編)
- シリウスレスポンシブサイトのハンバーガーメニューはサイトカラーに合わてがデフォオルトですね。デモ、ヘッダーカラーによっては認識ずらくなることもあるので仕様を確認して相応にカスタマイズしてみましょう。