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

[suzu3]

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

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

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

• このトピックはsuzu3が4年、 11ヶ月前に変更しました。

[suzu3]

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

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

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

• この返信は4年、 11ヶ月前にsuzu3が編集しました。

[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;

}

[suzu3]

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

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

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

[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;
}

[suzu3]

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

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

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

[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

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

[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;
	}
}

[suzu3]

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

[投稿者]

投稿