フォーカスが当たったとき要素(ヘッダ)の横幅を画面いっぱいにしたい

Question

TOPページの背景画像を横幅いっぱいにしたため、ヘッダが少し分かり辛くなりました。
そこで、ヘッダにフォーカス当たった時は、背景を白くなるようにしました。

ところがこの白背景の幅が狭いため、画面幅いっぱいにしたいです。

ヘッダにフォーカスが当たる前

ヘッダにフォーカスが当たった時（この時に幅いっぱいにしたい）

フォーカスが当たった時に背景色を白に変えるのは、

<header>タグに対してtop-header-bgcolorクラスというのを作って行いました。

<div class="wrapper ">
	<div class="full-wide-adjust-overflow-hidden">
		<div class="full-wide">
			<header class="top-header-bgcolor">
				<div class="header__inner">
					<div class="header-logo">
						<a href="/"><img src="/images/logo-l.png" class="header-logo-img top__logo-color" alt=""></a>
						<a href="/"><img src="/images/logo-s.png"  class="header-logo-img-sp top__logo-color" alt=""></a>
					</div>
					<div class="header-nav-btn full-wide-adjust-padding-right">
						<ul class="horizontal-btn-list__btn-right">
						  <li class="horizontal-btn-list__item-sm">
						    <a class="horizontal-btn-list__btn btn btn-outline-info btn-sm header-login-btn" href="#">ログイン</a>
						  </li>
						  <li class="horizontal-btn-list__item-sm">
						    <a class="horizontal-btn-list__btn btn btn-primary btn-sm" href="#">会員登録</a>
						  </li>
						</ul>
					</div>
					<div class="header-serach">
						<form method="get" action="#" class="search_container">
						    <input type="text" placeholder="何かお探しですか？">
						    <input type="submit" value="&#xf002"  class="fas">
						</form>		
					</div>
					<div class="header-nav-link full-wide-adjust-padding-left">
						<button class="btn btn-outline-success btn-sm header-category-btn">カテゴリ一覧</button>　
						<button class="btn btn-outline-success btn-sm header-category-btn">ユーザ一覧</button>
					</div>
				</div>
			</header>
			<!-- /. header -->

_header.scss

/* トップページだけヘッダーのカスタマイズ */
.top-header-bgcolor {
	& :focus, :hover {
		background-color: #fff;  /* フォーカス時に背景色を変える */	
	}
}

####試したこと
CSSで親要素の幅を超えて画面幅いっぱいに表示する
を参考にして、
background-color: #fff;の前に

margin: 0 calc(50% - 50vw);

を追加しますと、以下のようにフォーカス時にレイアウトが崩れてしまいました。

どう修正すべきでしょうか？
アドバイス宜しくお願いします。

関係ありそうなscss（layout, header ,top）を記載致します。

_layout.scss

/* _layout.scss start */ 

/* 最上位 */
.wrapper{
	margin-right: auto;
	margin-left: auto;
	/* max-width: $main-max-width; */
	padding-right: 2px; /* 両脇にpaddingを加える */
	padding-left: 2px; /* 両脇にpaddingを加える */
}

/* ヘッダ */
.header__inner{
	@include space;
	display: flex;
	flex-wrap: wrap;
	padding: 10px 0; 
}
/* フッタ */
.footer__inner{
	@include space;
}
/* コンテンツ */
.content{
 	@include space;
 	margin-top: 40px;
 	padding: 20px 0; 
}
/* ページタイトル */
.content__title{
	@include space;
	margin-bottom: 20px;
}

/* コンテンツ基底 */
.content__inner {
	margin: 0px;
	width: 100%;
}
/* １カラムレイアウト */
.content__inner-1col {
	@extend .content__inner;
	padding: 0 20px;
}

/* ２カラムレイアウト (マイページ)*/
.content__inner-2col {
	@extend .content__inner;
	display: flex;
	flex-wrap: wrap;
}
/* ２カラム　サイドメニュー */
.content__inner__side{
	width: 0;
}
/* ２カラム　コンテンツ */
.content__inner__main{
	width: 100%;
}


/* PCサイズ以上 */
@include screen(pc) {

	/* サイドメニュー表示 */
	.content__inner__side{
		width: 25%;
	}
	.content__inner__main{
		width: 75%;
	}

}
	
	
/* _layout.scss end */

 

_header.scss

/* _header.scss start */

$header-logo-width: 130px;
$header-nav-link-width: 310px;

/* PC用ロゴ */
.header-logo-img {
	display: none; /* 非表示 */
	max-width: 100%; 
	height: auto;
	background-color: $mainColor1;
}
/* SP用ロゴ */
.header-logo-img-sp {
	@extend .header-logo-img;
	display: block; /* 表示 */
	margin-top: -4px;
	margin-left: 2px;
	width: 50px;
}
.header-logo {	
	width: $header-logo-width;
}
.header-nav-btn {
	width: calc(100% - #{$header-logo-width});
	padding-top: 0;
	padding-bottom: 10px;
	text-align: right;
}
.header-serach {
	width: 100%;
}
.header-nav-link{
	width: $header-nav-link-width;
	display: inline-flex;
    align-items: center;
    justify-content: start;
}
/* ハンバーガーメニューアイコン */
.header-mypage-menu {
	visibility: hidden;
}

/* PCサイズ以上 */
@include screen(pc){
	.header__inner{
		.header-serach {
			order: 2;
			width: calc(100% - #{$header-logo-width});
		}
		.header-nav-link {
			order: 3;
		}
		.header-nav-btn {
			width: calc(100% - #{$header-nav-link-width});
			padding-top: 10px;
			padding-bottom: 0;
			order: 4;
		}
	}
	/* ハンバーガーメニューアイコン */
	.header-mypage-menu {
		visibility: visible;
	}
	/* PC用ロゴ */
	.header-logo-img {
		display: block; /* 表示 */
	}
	/* SP用ロゴ */
	.header-logo-img-sp {
		display: none; /* 非表示 */
	}
}
/* _header.scss end */

_top.scss

/*_top.scss start*/

/* full-wideを使うことによる調整 */
.full-wide-adjust-overflow-hidden {
	overflow: hidden; /* スクロールバーを消す */
}
.full-wide-adjust-padding-left {
	padding-left: 4px; /* ヘッダが左右に伸びてしまうのを調整 */
}
.full-wide-adjust-padding-right {
	padding-right: 4px;  /* ヘッダが左右に伸びてしまうのを調整 */
}


/* headerとheroを横幅いっぱいに広げる */
.full-wide {
	margin: 0 calc(50% - 50vw);
	width: 100vw; 
	background-image: url( "/top.webp" ); 
	/* background-image: url( "/images/top.webp" ); */
	background-size: 180% auto;
}


/* トップページだけヘッダーのカスタマイズ */
.top-header-bgcolor {
	& :focus, :hover {
		background-color: #fff;  /* フォーカス時に背景色を変える */	
	}
}
.header-category-btn {
	margin-top: 2px;
	background-color: #fff;
	&:hover {
 		background: $successColor;
 		color: #fff;
 		border: solid 2px $successColor;
 	}
}
.header-login-btn {
	background-color: #fff;
	&:hover {
 		background: $mainColor4;
 		color: #fff;
 		border: solid 2px $mainColor4;
 	}
}
.top__logo-color {
	background-color: $mainColor1;
	&:hover {
 		background: $mainColor1;
  	}
}


/* hero部分　外枠 */
.top-hero {
	//margin-top: -60px; /* ヘッダとコンテンツの余白を埋める */
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}
/* hero部分　見出し */
.top-hero__h {
	width: 90%;
	margin-bottom: 50px; /* 余白調整 */
}
.top-hero__h__text{
	text-align: center;
	color: #fff;
	margin-bottom: 30px; /* 余白調整 */
	
}
.top-hero-btn-start {
	background-color: #fff;
	font-size: $fontSize14;
}
.top-hero-btn-howto {
	font-size: $fontSize14;
}

/* hero部分　動画 */
.top-hero__v {
	width: 90%;
	margin-bottom: 30px; /* 余白調整 */
}
.top-hero__v__video {
	width: 100%;
}
/* 動画の囲み枠 */
.video-box {
	padding: 0.6em 0.5em 0 0.5em;
    margin: 2em 0;
    color: #565656;
    background: #ffeaea;
    box-shadow: 0px 0px 0px 10px #ffeaea;
    border: dashed 2px #ffc3c3;
    border-radius: 8px;
}


/* メインコンテンツ部分 外枠 */
.top-main {
	padding: 10px 15px; /* 余白調整 */
}

.top-main__about {
	//padding: 30px;
	max-width: 100%;
	margin: 0 auto;
}
.top-main__about-parent {
	display: flex;
    justify-content: space-between;
}
.top-main__about-child {
	flex-grow: 1;
    padding: 5px;
    margin: 0 5px;
    img {
	    	width: 100%;
    		height: auto;
	}
}

.top-main__list {
	margin-top: 30px;
}
.top-main__list__h {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.top-main__list__card__text__profile {
	font-size: $fontSize14;
}
.top-main__list__card__text__area {
	font-size: $fontSize12;
	text-align: right;
}


/* PCサイズ以上 */
@include screen(pc){
	.full-wide-adjust-padding-left {
		padding-left: 10px; /* ヘッダが左右に伸びてしまうのを調整 */
	}
	.full-wide-adjust-padding-right {
		padding-right: 12px;  /* ヘッダが左右に伸びてしまうのを調整 */
	}
	.full-wide {
		background-size: auto;
	}
	/* hero部分　外枠 */
	.top-hero {
		padding-top: 60px;
		padding-bottom: 200px; /* 背景を広げるため下に余白 */
	}
	/* hero部分　見出し */
	.top-hero__h  {
		width: 45%;
	}
	/* hero部分　動画 */
	.top-hero__v {
		padding-top: 20px; /* 見出しの高さと揃える微調整 */
		width: 45%;
	}
	/* メインコンテンツ部分 外枠 */
	.top-main {
	}
	.top-hero-btn-howto, .top-hero-btn-start {
		font-size: $fontSize20;
	}
	.top-main__about {
		max-width: 70%;
	}
	
}

/*_top.scss end*/

不足しているscss追記

_mixin.scss

@mixin screen($breakpoint: tablet){
	@media #{map-get($breakpoints, $breakpoint)}{
		@content;
	}
}

@mixin space {
	margin: auto;
	max-width: $container-max-width; 
 	
}
 

_config.scss

$main-max-width: 1024px;
$container-max-width: 1020px;


$breakpoints: (
	'sp': 'screen and (max-width: 767px)', /* 0〜767 スマフォ */
	'tablet': 'screen and (min-width: 768px) and (max-width: 959px)', /* 768以上に適用（タブレットサイズ） */
	'pc': 'screen and (min-width: 960px)', /* 960以上に適用（PCサイズ以上） */
) !default;

$baseFontSize: 62.5%;
$fontSize12: 1.2rem;
$fontSize14: 1.4rem;
$fontSize16: 1.6rem;
$fontSize18: 1.8rem;
$fontSize20: 2.0rem;
$fontSize22: 2.2rem;
$fontSize24: 2.4rem;
$fontSize26: 2.6rem;
$fontSize28: 2.8rem;
$fontSize30: 3.0rem;
$fontSize32: 3.2rem;
$fontSize34: 3.4rem;
$fontSize36: 3.6rem;
$baseFont:  Source Sans Pro, Helvetica, Arial, 游ゴシック体, YuGothic, メイリオ, Meiryo, sans-serif;
$enFont: "Open Sans", sans-serif;
$baseLineHeight: 2.0;

$mainColor1: #f47b20;
$mainColor2: #f48620;
$mainColor3: #f49420;
$mainColor4: #e25c00;
$baseColor1: #a7a7a8;
$baseColor2: #b9b9ba;
$baseColor3: #e7e7e7;
$accentColor1: #03be2c;
$accentColor2: #03cf2c;
$accentColor3: #03ea2c;
$accentColor4: #00BB00;
$primaryColor: #205df4;
$secondaryColor: #33bbff;
$successColor: #f457d4;
$dangerColor: red;
$warningColor: #cc8800;
$infoColor: skyblue;

Comments

[Lhankor_Mhy]

space では何をしていますか？
その他、ミックスインや変数の定義がされていないので、コンパイルをすることができません。
ですので、問題を確認できません。

問題が確認できるコードをご提示ください。

[pecchan]

申し訳ございません。
最初の質問作成時に、コンパイル済みのCSSをアップ試みたら文字数オーバーになって諦めたところでした。
不足していると思われるSCSS追加いたしました。

Answer 1

JSでやれば簡単なのですが、、
HTML&CSSでやるにはこのやり方しか思いつきませんでした。

軽く解説すると、メインのheader（header）と、ダミーのheader（dummyHeader）を用意して重ね合わせます。
ダミーheaderは横幅100%にしておき、メインheaderがhoverされたら隣接セレクタでダミーheaderに色を付けています。

<div class="contents">
  <div class="header">ヘッダー</div>
  <div class="dummyHeader"></div>
</div>

.contents {
  position: relative;
  background-color: gray;
  height: 500px;
}

.header {
  width: 800px;
  height: 200px;
  position: absolute;
  background-color: white;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.header:hover + .dummyHeader {
  background-color: red;
}

.dummyHeader {
  width: 100%;
  height: 200px;
}

Comments

[pecchan]

ありがとうございます。
実装してみたのですがこちらでは何も変わらなくなりました。
考え方は理解できました。

jsでやる場合ならどのようになるでしょうか？

[agumon]

headerにマウスオーバーしたときイベントを発火させ、'''top-header-bgcolor'''にclass名を付けたり外したりする処理を書きます。
あとはつけたclass名にbackground-colorを設定しといてあげれば色がつくかと思います。

[pecchan]

なるほど！
ありがとうございます。
検討してみます！

Answer 2

_top.scssに以下を追加

.top-header__inner{
	max-width: 100%;
}

.top-footer__inner{
	max-width: 100%;
}

これをhtml側に追加しました。

<div class="header__inner top-header__inner">

<div class="footer__inner top-footer__inner ">

ありがとうございました。

Answer 3

scssがコンパイルできないので推測になりますが、こうするとどうですか？

.top-header-bgcolor {
//    & :focus, :hover {
    &:focus, &:hover {
        background-color: #fff;  /* フォーカス時に背景色を変える */    
    }
}

Comments

[pecchan]

ありがとうございます。
特に変化ありませんでした。