Natural

このブログはサンプルです。

グローバルナビをヘッダー下に追加する方法

このテーマのグローバルナビは最大で2階層までとなっています。

下記のサンプルコードを参考に、カテゴリや子カテゴリを入力してご利用ください。

編集が終わりましたら、「管理画面」→「 デザイン」→「 カスタマイズ」 →「ヘッダ」→「ブログタイトル下」にコピペしてグローバルナビが動作するかご確認ください。

親カテゴリのみの場合

<nav class="global-nav-content">
    <ul class="global-nav">
        <li><a href="#a">Home</a></li>
        <li><a href="#a">Theme</a></li>
        <li><a href="#a">About</a></li>
        <li><a href="#a">Contact</a></li>
    </ul>
</nav>

子カテゴリが必要な場合

<nav class="global-nav-content">
    <ul class="global-nav">
        <li><a href="#a">Home</a></li>
        <li><a href="#a">Archive</a></li>
        <li><a href="#a">category</a><!--親カテゴリ-->
            <ul>
                <li><a href="#a">category</a></li><!--子カテゴリ-->
                <li><a href="#a">category</a></li><!--子カテゴリ-->
                <li><a href="#a">category</a></li><!--子カテゴリ-->
            </ul>
        </li>
        <li><a href="#a">category</a><!--親カテゴリ-->
            <ul>
                <li><a href="#a">category</a></li><!--子カテゴリ-->
                <li><a href="#a">category</a></li><!--子カテゴリ-->
                <li><a href="#a">category</a></li><!--子カテゴリ-->
            </ul>
        </li>
        <li><a href="#a">category</a><!--親カテゴリ-->
            <ul>
                <li><a href="#a">category</a></li><!--子カテゴリ-->
                <li><a href="#a">category</a></li><!--子カテゴリ-->
                <li><a href="#a">category</a></li><!--子カテゴリ-->
            </ul>
        <li><a href="#a">category</a><!--親カテゴリ-->
            <ul>
                <li><a href="#a">category</a></li><!--子カテゴリ-->
                <li><a href="#a">category</a></li><!--子カテゴリ-->
                <li><a href="#a">category</a></li><!--子カテゴリ-->
            </ul>
        </li>
        <li><a href="#a">category</a><!--親カテゴリ-->
            <ul>
                <li><a href="#a">category</a></li><!--子カテゴリ-->
                <li><a href="#a">category</a></li><!--子カテゴリ-->
                <li><a href="#a">category</a></li><!--子カテゴリ-->
            </ul>
        </li>
        <li><a href="#a">About</a></li>
        <li><a href="#a">Contact</a></li>
    </ul>
</nav>     

グローバルナビのセルを中央寄せする方法

グローバルナビは数が多ければ列が増えるようになっていて左寄せになっています。

もし、セルの数が少なくて中央寄せしたい場合は下記を追記してください。

ダッシュボード→「 デザイン」→「 カスタマイズ」 →「デザインCSS」画面

.global-nav {
    justify-content: center;
}