Twenty Twelve メニューバーの色を変更

メニューバーをサイトのイメージに合わせた色に変更することはよくある要望ですね。
こちらはCSSの変更により可能です。

メニューバーの背景に色をつける

Tewnty Twelve のCSSファイルのなかから以下の部分を探します。

.site-header h1 {
		font-size: 26px;
		font-size: 1.857142857rem;
		line-height: 1.846153846;
		margin-bottom: 0;
	}
	.main-navigation ul.nav-menu,     /* メニューバーの表示設定の仕様 */
	.main-navigation div.nav-menu > ul {
		border-bottom: 1px solid #ededed;
		border-top: 1px solid #ededed;
		display: inline-block !important;
		text-align: left;
		width: 100%;
	}
	.main-navigation ul { 
		margin: 0;
		text-indent: 0;
	}
	.main-navigation li a,
	.main-navigation li {
		display: inline-block;
		text-decoration: none;
	}

背景に色を付けるのと同時に、初期からついている上下の薄い線を削除しますので、以下のように変更します。

	.main-navigation ul.nav-menu,     /* グローバルナビの表示設定 */
	.main-navigation div.nav-menu > ul {
		/* border-bottom: 1px solid #ededed; */  
		/* border-top: 1px solid #ededed; */
		background: #fdf5e6; /* これが背景色 好きな色を指定してください */
		display: inline-block !important;
		text-align: left;
		width: 100%;
	}

これで背景に色が付きます。
ただ、色がつくと気づくのですが、メニューのそれぞれの文字が左の端にピッタリくっついてて残念な感じに・・・
これを隙間を程よく開けて見やすい感じに変更します。

	.main-navigation ul {
		margin: 0;
		padding-left: 14px;  /* 追記部分ここから */
		padding-left: 1rem;
		position: relative;    /* 追記部分ここまで */
		text-indent: 0;
	

変更が終了したらサーバーの子テーマのフォルダにアップロードして、サイトを確認してください。
なお、隙間を開けたことによって少しメニューバーがはみ出してしまった場合の修正は別途・・・

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL