メニュー中のドロップダウンの不都合。

先にお示ししたコードの前半（1〜7行目）は

@media screen and (min-width: 59.6875em) {
....
}

の中ではなく外側なのだと明示したつもりでしたが、今見てみるとちゃっかり内側に入っていますね。
「※どこに追加するべきかわからなければ、最後に追加してください。」とはそのまま追加という意味だったのですが。

あれからスタイルがいろいろ変わっているようですので、もう一度検証してみました。
height の値はフォントサイズに依存するので、メディアクエリのブレイクポイントが多いとそれだけ追従しなければならないのです。
よって、現在の状態では以下のようになろうかと思います。

.dropdown-toggle {
    top: 0;
    z-index: 2;
    width: 100%;
    height: 48px;
    text-align: right;
}

@media screen and (min-width: 46.25em) {
    .dropdown-toggle {
        height: 49px;
    }
}

@media screen and (min-width: 55em) {
    .dropdown-toggle {
        height: 48px;
    }
}

@media screen and (min-width: 59.6875em) {
    .dropdown-toggle {
        height: 30px;
    }
}

@media screen and (min-width: 68.75em) {
    .dropdown-toggle {
        height: 34px;
    }
}

@media screen and (min-width: 77.5em) {
    .dropdown-toggle {
        height: 40px;
    }
}

最初の部分（1〜7行目）も含めて、すべての @media の外側にそのまま記述してください。
CSSファイルの末尾で結構です。
そして、この部分のフォントサイズやパディングなどが変更されたら、それに合わせて再度調整しなければなりません。

この方法はかなり“小手先”の手法ですので、本当はもっと効率的な方法を使いたいところですが、変更が大掛かりすぎてちょっとここには書けません。
思いついた方法だけ、一応書いておきます。

• <a> 要素のクリックイベントに、トグルボタンのイベントをバインドする
• <a> 要素の高さを動的に取得して、トグルボタンに反映させる
• トグルボタンのマークアップを変えてスタイルを指定しやすくする
• そもそもメニューの使い方がテーマの仕様に合っていない