こんにちは。お世話になります。スマホ商品ページにハンバーガを押して、メニューが表示されるようにしています。

RMSにハンバーガーメニューを持ったHTMLファイル
r-smartphone_originalmenu.html
を登録し、それをiFrameで商品画像の上に表示ました。

ハンバーガーをタップすると、左からドロワーメニューが出ます。
index.htmlと同じ挙動です。

ただ、スマホページの場合、iFrameに入っているため、おそらくその底辺より下は、フレームの枠の中に潜り込んでいるようで、メニューの下まで全部見ることができません。

このドロワーメニューをスマホのフリック商品画像の上に出すことはできますでしょうか？
https://www.rakuten.ne.jp/gold/off-price/

CSSは
iFrame内のr-smartphone_originalmenu.htmlを制御するstyle2.CSS
iFrameのサイズ、画像を下にずらしているr-smartphoneheader.css
が関連しています。

【RMS】
<!--SP共通ヘッダー-->
<link rel="stylesheet" ="" href="https//www.rakuten.ne.jp/gold/SHOP-URL/sp_custom/r-smartphoneheader.css">
<div id="absoluteBox" =""="">
<div id="headerWrap" =""="">
<iframe id="headerContents" src="https//www.rakuten.ne.jp/gold/SHOP-URL/r-smartphone_originalmenu.html" width="100%" height="100%" frameborder="0" scrolling="yes" =""=""></iframe =""="">
</div =""="">
</div =""="">

【r-smartphone_originalmenu.html】
オーバーレイ部分が<div class="mobile-menu-overlay"></div>
メニュー本体は<div class="mobile-menu-container">
　　　　　　　　<div class="mobile-menu-wrapper">
　　　<span class="mobile-menu-close"><i class="icon-close"></i></span><!-- ×ボタン -->
以下が中身のソース
となっています。

もともとindex.htmlを加工したのがr-smartphone_originalmenu.htmlで、CSSがとても複雑で、どこをさわればよいのかわからない状況です。
現状の画像と目標の店舗さんの画像を添付いたします。どちらも、商品ページです。

どうぞよろしくお願い申し上げます。