トップページ専用ページを作ってみたものの、現状ではどこのページにも行けないので(^_^;)
グローバルメニューを作ります。

function.php

//カスタムメニュー機能を有効にする
register_nav_menus(array('navigation' => ' NavigationBar '));

カスタムメニューを有効にしておきます。

メニューを複数（日本語でもOKです）

//メニュー有効化
register_nav_menus(array(
	'main-menu'	=> 'メインメニュー',
	'sub-menu'	=> 'サブメニュー'
));

header.php

<header id="header">
    <nav class="navbar navbar-inverse">
    <div class="container">
        <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#globalmenu" aria-expanded="false">MENU</button>
        <h1><a class="navbar-brand" href="<?php echo home_url('/'); ?>"><?php bloginfo('name'); ?></a><small><?php bloginfo('description'); ?></small></h1>
        </div>
        <!--//navbar-header -->
        <div class="collapse navbar-collapse" id="globalmenu">
            <?php wp_nav_menu(array('theme_location' => 'navigation')); ?>
        </div>
        <!-- //collapse navbar-collapse -->
    </div>
    <!--//container -->
    </nav>
    <!--//nav -->
</header>
<!--//#header -->

header.phpに書いてあったメニュー部分（ul li）を削除して、下記のテンプレートタグに書き換えます。

<?php wp_nav_menu(array('theme_location' => 'navigation')); ?>

自動的に、ul li タグが書き出されるので、style.cssで見た目を整えましょうー。
bootstrapを使っているのですが、ulとliが勝手に・・となってしまうので
cssの書き換えが面倒だよーという方はこの部分だけbootstrapでなくてもいいんではないかと。

とりあえずここではbootstrapのまま、cssを書き換えました。

/* #globalmenu
----------------------------*/
#globalmenu {
}
#globalmenu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#globalmenu ul>li {
	float: left;
	position: relative;
	display: block;
}
#globalmenu ul>li>a {
	color: #AAA;
	height: 100px;
	border-left: 1px #000 solid;
	border-right: 1px #444 solid;
	padding: 25px;
	position: relative;
	display: block;
	line-height: 20px;
}
#globalmenu ul>li:first-child {
	border-left: 1px #444 solid;
}
#globalmenu ul>li:last-child {
	border-right: 1px #000 solid;
}
#globalmenu ul>li>a:focus,
#globalmenu ul>li>a:hover {
	background-color: transparent;
}
@media screen and (min-width: 768px) and (max-width: 1199px){
	#globalmenu ul>li>a {
		height: auto;
		padding: 10px 15px;
	}
}
@media screen and (max-width: 767px){
	#globalmenu ul>li>a {
		height: auto;
		border-left: none;
		border-bottom: 1px solid #AAA;
		padding: 10px 15px;
	}
	#globalmenu ul>li:last-child>a {
		border-right: none;
	}
	#globalmenu ul>li {
		-webkit-box-shadow: inset -1px -1px 0px 0px rgba(0,0,0,1);
		-moz-box-shadow: inset -1px -1px 0px 0px rgba(0,0,0,1);
		box-shadow: inset -1px -1px 0px 0px rgba(0,0,0,1);
	}
	#globalmenu ul>li>a small {
		display: inline-block;
		text-align: left;
		margin-left: 15px;
	}
	#globalmenu ul>li>a {
		padding: 10px 15px;
	}
	#globalmenu ul>li:last-child {
		border-right: none;
	}
	#globalmenu ul>li {
		float: none;
		width: 1%;
		display: table-cell;
	}
}
@media screen and (min-width: 768px){
	#globalmenu ul {
		float: right!important;
		margin-right: -15px;
	}
}

ちなみに、ul liの入れ子になった場合についての考慮はしてません。
※項目を入れ子にしなければいいだけｗ
項目を入れ子にしたい場合は、bootstrapのtoggleを入れる必要がでてくるので
その場合はbootstrapではなく、cssのみで入れ子のメニューを作るようにするといいかなと思います。

スマホでの見え方も考慮してないので、そのへんは考えなければ。
項目名の下にスラッグ等の英語表記を入れたかったんですが、ちょっと厳しかったなー。
もうちょっと試行錯誤が必要・・。

挿入する項目は、左側の外観－メニューから項目を選んでください。

これで、無事、メニューが出来たかと思います(^^)