カスタムテーマのヘッダーにメニューを配置する

私はクライアントのために仕事をしていて、彼はカスタムテーマを持っています。彼はテーマエディタのアラインメントを変更するオプションがないので、コードを編集しようとしていません。私はここで全体のヘッダコードを投稿することができますフォーマットのため申し訳ありませんカスタムテーマのヘッダーにメニューを配置する

<body <?php body_class(); ?>> 
<div class='container'> 
<div class='header_wrap'> 
<div class='header'> 
    <h1> 
    <a href="<?php echo esc_url(home_url('/')); ?>" rel="home"> 
     <span><?php bloginfo('name'); ?></span> 
    </a> 
    </h1> 
    <div class='clock_wrap'> 
    <div class='title'> 
     Income Tax Deadline 
    </div> 
    <div class='clock'></div> 
    </div> 
<div class='clear'></div> 
    <?php 
    $description = get_bloginfo('description', 'display'); 
    if ($description || is_customize_preview()) : ?> 
    <p class="desc"><?php echo $description; ?></p> 
    <?php endif; ?> 
    <div class='nav'> 
    <a href='/'>Home</a> 
<?php wp_nav_menu(array(
    'menu'   => 'main', 
    'container_class' => false, 
    'container'  => '' 
)); 
?> 
    </div><!-- nav --> 
    </div><!-- header --> 
</div><!-- header_wrap --> 
<div class="content">

は、任意のヘルプは大歓迎です！あなたのテーマメインのCSSファイルで

出典

2016-09-27 Kevin S

ライブリンクを切断して問題を確認してみることはできますか？ –

http://elitetax.ca/ –

このクラスを見つける.header_wrap .header .navとテキスト整列を追加します。私はこれをマークの下にちょうど

以下

.header_wrap .header .nav { 
    text-align: center; 
}

のようなセンターは、このイメージを参照してください。それは左側になりまし.navクラス.headerあなたのナビゲーションバーをご.header_wrapを変更することなく、今ある

http://prnt.sc/cn1kq4

今、再び、私はテキスト整列を追加した後、それをマーク下のこの画像を参照してください。センター。 .header_wrap .header .navクラス今すぐあなたのナビゲーションバーが中央に表示されます。

http://prntscr.com/cn1mpq

私はあなたがそれを修正します。この時間を願っています。

出典

2016-09-27 16:28:43

ここにはどこに入れますか？ '.header_wrap .header .nav { border-bottom：solid 1px＃efd6b1; border-top：solid 3px＃efd6b1; margin-top：16px; パディング：16px 24px; } .header_wrap .header .nav a { 色：黒; font-weight：300; font-size：16px; margin-right：16px; text-transform：大文字。 } .header_wrap .header .nav a：ホバー{ テキスト装飾：なし; 色：＃efd6b1; } ' –

このコードで.header_wrap .header .nav {border-bottom：solid 1px＃efd6b1; border-top：ソリッド3px＃efd6b1; margin-top：16px;パディング：16px 24px; text-align：center; }この最後の行を見てくださいtext-align：center私は –

を追加しました。このコードをテーマメインのCSSファイルのこのコードの末尾よりも適切な場所に置くことが面倒であれば。 –

ブラウザツールでページを調べ、私はCSSにこれを追加し、メニューが中心であった：

.nav { 
    text-align: center; 
}

追加を：それはまだ動作しない場合は、

のように、 !importantを追加してみてください

.nav { 
    text-align: center !important; 
}

出典

2016-09-27 16:34:51 Johannes

私はこのコードをCSSのさまざまな場所に含めようとしましたが、うまくいきませんでした。別のトピックを作成し、そのテーマのCSSコード全体を含める必要がありますか？または、ウェブサイトへのリンクがあるので、ソースコードを表示することができます：http://elitetax.ca/ –

私の編集した答えにご注意ください - 本当に簡単な解決策です – Johannes

他のユーザーが言っているように、CSSを見ていなくてもかなり難しいですが、CSSでコンテナ内のオブジェクトをセンタリングする私の好きな形が次です。

.Object-to-center { 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
}

出典

2016-09-27 17:44:58

カスタムテーマのヘッダーにメニューを配置する

答えて

関連する問題