VWSとは フォーラム Lightning [ 解決済 ] Lightning pro でグローバルメニューがIEのみ表示がおかしい

[ 解決済 ] Lightning pro でグローバルメニューがIEのみ表示がおかしい

  • このトピックには8件の返信、2人の参加者があり、最後にsuzu3により1ヶ月前に更新されました。
9件の投稿を表示中 - 1 - 9件目 (全9件中)
  • 投稿者
    投稿
  • #28151

    suzu3
    参加者

    Lightningproの FortII (Bootstrap4/footer light) をつかっているんですが
    グローバルメニューがIEのみ表示がおかしいので直したいです。
    1.グローバルメニューの背景左右画面いっぱいに伸びず少しで切れてしまっている。
    2.スクーロールするとグローバルメニュー位置がずれ、1と同じように背景左右画面いっぱいに伸びない。

    プラグインはひとつひとつオンオフしてみましたがだめでした。

    写真を参考にしてください。
    https://drive.google.com/file/d/1cxM1UxWC1889bCJ2Z9BtTovtyErgktbI/view?usp=sharing
    ご存知のかたご教授をお願いいたします。

    • このトピックはsuzu3が1ヶ月前に変更しました。
    #28154

    suzu3
    参加者

    追伸です。
    Fortの方なら表示は良いようです。

    それならFortにフォーマットを変更することもありかなと思います。
    その場合はロゴと問い合わせ位置を変更したいです。
    ロゴはひだりよりに問い合わせは右に移動できれば、
    それはそれで良いかなと思っています。

    ご教授よろしくお願いいたします。

    • この返信は1ヶ月前にsuzu3が編集しました。
    #28157

    suzu3
    参加者

    Fortにフォーマットを変更して
    以前質問させてもらった
    ものに追記したら一応表示はおもったようになりました。
    とりあえずこれでいこうかと思いますが。
    もしより良い案があればお願いいたします。

    よろしくお願いいたします。

    .navbar-brand img {
    max-height: 80px;
    position: relative;
    left:-290px;
    }

    .siteHeader_sub {
    vertical-align: middle;
    float:none;
    }
    .siteHeadContainer.container .navbar-header {
    vertical-align: middle;
    display:flex;
    justify-content:space-between;
    align-items: center;
    position: relative;
    left:140px;

    }

    #28178

    suzu3
    参加者

    ロゴを
    left:-290px;
    で動かしたら、スマホサイズの時ロゴが
    センターでなくなってしまうのを忘れてました。
    それはそうですよね。(^_^;)

    Htmlもあまり詳しくないので
    良い方法があれば教えて下さい。

    よろしくお願いいたします。

    #28223

    DRILL LANCER
    参加者

    前回投稿したものに Autoprefixer を使用してベンダープリフィックスを付加したものを書いてみました。
    IE 11 ではどうやら特殊なベンダープリフィックスを必要としているみたいです。

    /*ロゴの大きさを変更*/
    @media (min-width: 992px) {
    	.navbar-brand img {
    	    max-height: 100px;
    	}
    }
    
    /*お問い合わせエリアを上下中央に配置*/
    .siteHeader_sub {
    	float:none;
    }
    .siteHeadContainer.container .navbar-header {
    	display:-webkit-box;
    	display:-ms-flexbox;
    	display:flex;
    	-webkit-box-pack:justify;
    	-ms-flex-pack:justify;
    	justify-content:space-between;
    	-webkit-box-align: center;
    	-ms-flex-align: center;
    	align-items: center;
    }
    #28227

    suzu3
    参加者

    いろいろ教えていただきありがとうございます。
    ほんと助かっております。

    先程送っていただいて#28223ですが
    Fort IIで試したところやはり同じようにグローバルメニューがズレで
    背景ズレで表示されてしまいます。
    下記のように

    勝手がわからず前回の質問に追記してしまったのですが
    Fortでの電話番号等問い合わせをセンターにする方法を
    方法をおしえていただくことはできけないでしょうか?
    Fortだとieでの表示がずれないようなので。

    #28228

    suzu3
    参加者

    やってみたことをお書きします。
    Fort IIで教えていただいた、
    下記の記述をFortで追記してみると。
    ———————————-
    /*ロゴの大きさを変更*/
    @media (min-width: 992px) {
    .navbar-brand img {
    max-height: 100px;
    }
    }

    /*お問い合わせエリアを上下中央に配置*/
    .siteHeader_sub {
    float:none;
    }
    .siteHeadContainer.container .navbar-header {
    display:flex;
    justify-content:space-between;
    align-items: center;
    }
    ———————————-
    ロゴと問い合わせが下記のように中央に寄ってしまいます。
    参考
    https://drive.google.com/file/d/10KgKwfcaBiXa1uEjMC17w4dc6lo_YKkB/view?usp=sharing

    お手数ですがよろしくお願いいたします。

    #28268

    DRILL LANCER
    参加者

    自分も IE 11 で試してみたところ下記で解決できました。

    OS:Windows 10 Pro 1909
    IE のバージョン:11.5353.13862.0
    IE の更新バージョン:11.0.165

    @media (min-width: 992px) {
    	/*IE対応用*/
    	.siteHeadContainer.container {
    		max-width: none;
    	}
    	/*ロゴ画像の大きさを拡大*/
    	.navbar-brand img {
    	    max-height: 100px;
    	}
    	/*お問い合わせエリアを上下中央に配置*/
    	.siteHeader_sub {
    		float:none;
    	}
    	.siteHeadContainer.container .navbar-header {
    		display:flex;
    		justify-content:space-between;
    		align-items: center;
    	}
    }
    #28269

    suzu3
    参加者

    さすがですね。本当にありがとうございます。
    Fort IIの方で表示できました!
    何度も助けていただきありがとうございます!
    感謝です。

9件の投稿を表示中 - 1 - 9件目 (全9件中)
  • このトピックに返信するにはログインが必要です。