前提
wordpressでサイト作成をしています。
ヘッダーメニューの下に画像１枚追加しましたが、重なっています。
発生している問題・エラーメッセージ
特になし
header.php
<div class="container"> <header class="main_header"> <div class="headerinner"> <h1 class="logo"> <?php the_custom_logo(); ?> </h1> <div class="header-right"> <nav class="header_menu"> <ul class="menu-ul"> <li class="list -about"><a href="" class="link">ABOUT</a></li> <li class="list -event"><a href="" class="link">EVENT</a></li> <li class="list -works"><a href="" class="link">WORKS</a></li> <li class="list -lineup"><a href="" class="link">LINE UP</a></li> <li class="list -contact"><a href="" class="link">CONTACT</a></li> </ul> </nav> <a class="menu"> <span class="menu__line menu__line--top"></span> <span class="menu__line menu__line--middle"></span> <span class="menu__line menu__line--bottom"></span> </a> </div> </div> <nav class="gnav"> <div class="gnav__wrap"> <ul class="gnav_menu"> <li> <a href="" class="main_category">ABOUT</a> <ul> <li class="sublist"><a href="" class="sub_category">-性能と構造</a></li> <li class="sublist"><a href="" class="sub_category">-保証・アフターサービス</a></li> <li class="sublist"><a href="" class="sub_category">-家づくりの流れ</a></li> </ul> </li> <li><a href="" class="main_category">EVENT</a></li> <li><a href="" class="main_category">WORKS</a></li> </ul> <ul class="gnav_menu"> <li> <a href="" class="main_category">LINE UP</a> <ul> <li class="sublist"><a href="" class="sub_category">-自由設計</a></li> <li class="sublist"><a href="" class="sub_category">-コンセプト住宅</a></li> </ul> </li> <li><a href="" class="main_category">LIBRARY</a></li> <li><a href=""class="main_category">ESTATE</a></li> </ul> <ul class="gnav_menu"> <li class=""><a href="" class="main_category">VOICE</a></li> <li><a href="" class="main_category">COLUMN</a></li> <li><a href="" class="main_category">CONPANY</a></li> <li class="contactlist"><a href="" class="contact_category">CONTACT</a></li> <li class="sns"><?php dynamic_sidebar( "sns-widget" ); ?></li> </ul> </div><!--gnav-wrap--> </nav><!--gnav--> </header><!--main_header--> <div class="zoom zoom-1"> <img src="https://lagom-design.co.jp/wp-content/uploads/7R305762-1080x720.jpg" alt=""> </div> </div><!--container-->
header.phpのCSS
body { margin: 0; } a { text-decoration: none; } li { list-style-type: none; } /*======================== header.php =========================*/ .container { width: 100%; margin:0; padding: 0; position: relative; } .main_header { width: 100%; display: flex; height: 170px!important; position:sticky; } .main_header .headerinner { width: 100%; display: flex; align-items: center; } .main_header .logo { height: 65px; margin-left: 34px; } .main_header .headerinner .header-right { display: flex; width: 100%; justify-content: flex-end; gap: 50px; margin-right: 75px; } .main_header .header_menu ul{ display: flex; gap: 40px; } .main_header .menu-ul .link { color: #433f37; font-weight: bold; font-size: 18px; font-family: "Cormorant",serif; letter-spacing: 1px; } /*menu*/ .menu{ padding: 13px 2; position: relative; width: 30px; display: flex; gap: .6em;/*.menu__line間の余白 */ flex-direction: column;/*線を縦並びに */ z-index: 99; } .menu__line{ background: #000; display: block; height: 2px; /* position: absolute; */ transition:transform .3s; width: 100%; } .menu__line--top { /* margin: 6px 0; */ } .menu__line--middle { /* margin: 15px 0; */ } .menu__line--bottom{ /* margin: 24px 0; */ } .menu__line--top.active{ position: absolute; top: 14px; transform: rotate(405deg); background: #f4f6f7; } .menu__line--middle.active { opacity: 0; } .menu__line--bottom.active{ position: absolute; bottom: 27px; transform: rotate(135deg); background: #f4f6f7; } /*gnav*/ .gnav{ background: #433F36; display: none; height: 100%; position: fixed; top: 0;/*追加*/ padding: 0;/*追加*/ width: 100%; z-index: 98; } .gnav__wrap{ display: flex; justify-content: center; position: absolute; gap: 50px;/* 要素間の余白 */ top: 0; right: 0; bottom: 0; left: 0; margin: auto; padding-top: 70px; height: 60%; } .gnav_menu {/* 追加 */ margin-top: 60px; padding-left: 0; } /*main_category*/ .gnav_menu .main_category { color: white; font-size: 2rem; font-weight:normal; font-family: "Cormorant",serif; letter-spacing: 2px; line-height: 2; transition: 0.3s; } .gnav_menu .main_category:hover{ text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 20px #fff, 0 0 1px #b2ebf5, 0 0 2px #b2ebf5, 0 0 3px #b2ebf5 } /*sub_category*/ .gnav_menu .sub_category { color: white; font-size: 0.8rem; font-size: bold; transition: 2s; font-family: "Cormorant",serif; letter-spacing: 2px; line-height: 2.2; transition: 0.3s; } .gnav_menu .sub_category:hover { text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 20px #fff, 0 0 1px #b2ebf5, 0 0 2px #b2ebf5, 0 0 3px #b2ebf5 } .sublist { margin-bottom: 15px; } /*contact_category*/ .gnav_menu .contact_category { padding: 0.5em 2.1em; color: white; background: #b7993d; font-size: 1.7rem; font-weight:normal; font-family: "Cormorant",serif; letter-spacing: 2px; line-height: 2; transition: 0.3s; } .contactlist { margin-top: 8px; } .gnav_menu .contact_category:hover { opacity: 0.6!important; } /*sns*/ .gnav_menu .sns { margin-top: 20px; } #block-7.widget ul { gap: 1px; justify-content: flex-start; } /*sns-instagram*/ .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-instagram { background-color:transparent; color: #fff; } /*sns-facebook*/ .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-facebook { background-color:transparent; color: #fff; } /*======================== header.php スライダー =========================*/ .zoom { width: 700px; height: 450px; overflow: hidden; } .zoom-1 img { width: 100%; height: auto; animation: animationZoom1 10s ease-in-out infinite; } @keyframes animationZoom1 { 50% { transform: scale(1.1)} }
試したこと
ロゴ画像、ヘッダーメニューとハンバーガーメニューが一緒になっているmain_headerに「position:fixed」でかけている為
画像が上部に重なってしまうので、fixed→stickyに変更してみたことで重ならなくなりました。
しかし、ヘッダーメニューとハンバーガーメニューがあるheader-rightが左の方へ元に戻ってしまいました。
なのでmain_headerでfixedを使って固定するしかないと考えています。
その場合、画像をメニューの下に移動するための方法をご教示くださいm
0 コメント