BootstrapのNavbarをWordpressで使いたい。Collapseメニューがうまくいきません。

Question

###前提・実現したいこと
BootstrapをWordpress（カスタムメニュー）で使えるようにしているのですが、モバイルサイズにしてCollapseメニューを開くとCollapseメニューの高さが一瞬変わってしまいます。
おそらく下記のjvscriptの記述のどこか、おそらく[dimension]がheightに影響を与えているようなのですが何がどうなって高さを指示しているのか、自力で調べても理解できませんでした・・・どうか読み方をお教えいただけないでしょうか。

###該当のソースコード

<nav class="navbar navbar-default">
<div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed"  data-toggle="collapse" data-target="#menu" aria-expanded="false" ></button>
</div>
 <?php
           wp_nav_menu( array(
             'menu'            => 'main-menu',
						 'theme_location'=>'main-menu',
						 'depth'           => 2,
             'container'       => 'div',
             'container_class' => 'collapse navbar-collapse',
             'container_id'    =>'menu',
             'menu_class'      => 'nav nav-justified',
						     'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
            'walker' => new wp_bootstrap_navwalker()
) ); ?>
</nav>

  Collapse.prototype.dimension = function () {
    var hasWidth = this.$element.hasClass('width')
    return hasWidth ? 'width' : 'height'
  }

  Collapse.prototype.show = function () {
    if (this.transitioning || this.$element.hasClass('in')) return

    var activesData
    var actives = this.$parent && this.$parent.children('.panel').children('.in, .collapsing')

    if (actives && actives.length) {
      activesData = actives.data('bs.collapse')
      if (activesData && activesData.transitioning) return
    }

    var startEvent = $.Event('show.bs.collapse')
    this.$element.trigger(startEvent)
    if (startEvent.isDefaultPrevented()) return

    if (actives && actives.length) {
      Plugin.call(actives, 'hide')
      activesData || actives.data('bs.collapse', null)
    }

    var dimension = this.dimension()

    this.$element
      .removeClass('collapse')
      .addClass('collapsing')[dimension](0)
      .attr('aria-expanded', true)

    this.$trigger
      .removeClass('collapsed')
      .attr('aria-expanded', true)

    this.transitioning = 1

    var complete = function () {
      this.$element
        .removeClass('collapsing')
        .addClass('collapse in')[dimension]('')
      this.transitioning = 0
      this.$element
        .trigger('shown.bs.collapse')
    }

###試したこと
wp_nav_menuのテンプレートタグを使わないで表記した場合は一瞬高さが変わるようなことはないのです・・・

###補足情報(言語/FW/ツール等のバージョンなど)
Wordpress 4.7.2
Bootstrap 3
Bootstrapを使えるようにするためにwp_bootstrap_navwalkerを使用

Answer 1

ブラウザ側の問題？バグだったようで、最近バージョンアップされたchromeやsafariで開き直したところ、この表示の問題は解消されていました。
はっきりした理由がわからず未だもやもやは残りますが、一旦解決とさせていただきます。
親身になって一緒に考えて下さったnayncat様、ありがとうございます。

Answer 2

テンプレートタグを使わないと起きないという一文で、
テーマのスタイルの影響を受けているのでは、と思いましたにゃ。

wp_nav_menuが生成するクラスはここに一覧があるので、
height,margin,paddingあたりのスタイルを上書きでリセットしてみてはどうでしょう。

Comments

[退会済みユーザー]

かわいい回答ありがとうございます（猫だいすきです）
javascriptでインラインCSSで高さが自動できまっているようで
IDやクラスの書き換えでは優先度的に負けてしまうのですよね。。
なのになぜテンプレートタグが影響を与えているのか。。。
謎なのです