Cocoonヘッダー固定モードがずれてしまう

  • 解決済 syntaro

    (@syntarou)


    1年、 9ヶ月前

    Cocoon試してます。スクロール時ヘッダー固定モードでのずれについて教えてください。

    プラグインをつくっていて、これらのテーマで動けばいいのではないかということで、複数テーマ触っています。

    ヘッダー固定しています。

    wp_body_openより、「<section id=’whitecat-htmlbody’>」を

    wp_footerより、「</section>」を出力して、そこに、max-width:, width:スタイルを付与しています。

    Lightningでは以下の対処が必要でした。

    ‘.header_scrolled .site-header {
    left: auto;
    margin: auto; /* 横幅調整した場合ずれるのを中央にもどしている / width: 100%; / vwから%に上書きして、ほかとそろえている *’

    親要素に、position: relative;としても、ずれるようでした。

    Cocoonでも同様のずれかたをするのですが、.header_scrolled , .site-headerに該当するクラス名がわかりません。どこか情報源はないでしょうか。

    また、Cocoonの公式フォーラムは、私にはユーザ登録のリンクが切れているように見えます。

    • このトピックは1年、 9ヶ月前にsyntaroが編集しました。理由: URL掲載
    • このトピックはsyntaroが1年、 9ヶ月前に変更しました。
    • このトピックはsyntaroが1年、 9ヶ月前に変更しました。

    ヘルプの必要なページ: [リンクを見るにはログイン]

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック投稿者 syntaro

    (@syntarou)

    1年、 9ヶ月前

    	let elements2 = document.getElementsByClassName("header-container");
	for (let target2 of elements2) {
		alert(target2.classList);
	}

    以上で確認したところ header-container に、 fixed-header が付与されるようでした。しかし、 .fixed-header のleftをAutoにできれば解決するのですが、jQueryでCSSを上書きしている様子ですので、styleの上書きは不可能かもしれません。インナーHTMLで対応できなくもない？かもしれませんが、とりあえず。

    .fixed-header { width: 100vw; } でごまかす（ブラウザの幅まで最大ひろがる）ことにします。

    トピック投稿者 syntaro

    (@syntarou)

    1年、 9ヶ月前

    
.fixed-header {
	position: fixed;
	top: 0;
	left: auto !important;
	width: 100%;
}

    いつもお世話になっております。上記で対応できました。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「Cocoonヘッダー固定モードがずれてしまう」には新たに返信することはできません。