モバイルメニューの位置付け

Question

私はHubSpot COSを使用して最初のテンプレートを構築しています。私は応答メニュー用のモバイルメニューを実装しようとしています。

私はカスタムを追加したメニューを持っていますclass ="custom-menu-primary"。 HubSpot私のページのフッタに参照しているJSコードを提供します。私はJSですべてが期待どおりに動作しているのがわかりますが、私が理解できないのはCSSの配置です。

モバイルでは、メニューがシフトしていて、シフトしていない場合は保存できません。私は固定位置を使って位置をずらしてみたところ、whitespace: nowrap;を適用しても何も期待どおりに動作していないようです。 JSとCSSへのリンクは、このHubSpotの記事にあります。

モバイルトリガーをコーナーの右上に移動するにはどうすればよいでしょうか。これは私のサイトにlinkです。

メディアクエリ]セクションで

http://prntscr.com/elwvyi

Answer 1

、クラスlogoため、追加：クラスwidget-type-spaceについては

float:left; 

を：ここで

display: none; 

Answer 2

は、あなたの問題のために簡単な修正です、一時的に以下のコードを解決します。

navbarのブートストラップを参照してください。 Bootstrap navbar documentation

@media (max-width: 767px) 
raw-resource?po…fered=true:863 
.mobile-trigger { 
    display: inline-block !important; 
    cursor: pointer; 
    position: fixed; 
    top: 30px; 
    right: 20px; 
    width: auto; 
    height: auto; 
    padding: 7px 10px 8px 10px; 
    background: #ffffff; 
    border: 1px solid #000000; 
    font-size: 16px; 
    font-weight: normal; 
    text-align: left; 
    text-transform: uppercase; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
    color: #000000; 
} 

@media (max-width: 767px) 
raw-resource?po…ered=true:1007 
.custom-menu-primary.js-enabled .hs-menu-wrapper { 
    width: 95%; 
    position: fixed; 
    margin: 20px 10px 0px 10px; 
    top: 45px; 
    left: 0; 
    padding: 0; 
}