LIONMEDIAのグローバルナビの固定とサブメニューのプルダウン

LIONMEDIAのグローバルナビの固定とサブメニューのプルダウン

サイトタイトルと各メニューへのリンクが常に表示されてる状態にしたい。
遷移の問題もあるけど上部に色があるとまとまりがある感じがして・・・

目次

サイトタイトルの位置を変更

ただ、サイトタイトルとメニューで高さを取ってしまうのは避けたい。
メニューがそこまでたくさんにならなそうだったので、グローバルナビとサイトタイトルを横並びで表示してしまおう。

header.php

l-header

siteTitleを探してキリトリ

      <div class="siteTitle">
...
      </div>

l-extra

globalNaviの中に入れる

    <div class="l-extra<?php if(get_option('fit_theme_headerMenu') != 'value2'): ?>None<?php endif; ?>" id="extra__menu">
      <div class="container container-max">
        <nav class="globalNavi">
	      <div class="siteTitle">
...
		  </div>
           <ul class="globalNavi__list">
...
           </ul>
        </nav>
      </div>
    </div>

SCSS/CSS

.siteTitle{
	float: none;
	overflow: visible;
	margin: 5px 30px 0 0;
	display: inline-block;
	width: fit-content;
	@media only screen and (max-width: 767px){
		margin-right: 20px;
		margin-top: 2.5px;
	}
	.siteTitle__main {
		display: inline;
		font-size: 30px;
		font-weight: normal;
		@media only screen and (max-width: 767px){
			font-size: 20px;
		}
	}
	.siteTitle__sub {
		display: inline;
		font-size: 20px;
		margin-left: 20px;
		@media only screen and (max-width: 767px){
			display: none;
		}
	}
}
.l-extra {
	.globalNavi {
		overflow: visible;
		display: flex;
		flex-wrap: nowrap;
		padding: 10px 0;
		@media only screen and (max-width: 767px){
			justify-content: space-between;
			padding: 5px 10px 7.5px 20px;
		}
		.globalNavi__list{
			width: fit-content;
			padding: 0;
		}
	}
}

グローバルナビの固定

CSSだけでなんとかなりそう

scss/css

.l-extra {
	position: fixed;
	width: 100%;
	z-index: 9999;
	top: 0;
}

サブメニューのプルダウン

こっちもCSSだけで

.l-extra {
	.globalNavi {
		.globalNavi__list{
			.menu-item-has-children{
				position: relative;
				height: 100%;
				.sub-menu{
					display: none;
					position: absolute;
					min-width: 160px;
					z-index: 9999;
					top: 30px;
					right: 50%;
					transform: translateX(50%);
					padding: 15px 0 0;
					transition: .3s;
					.menu-item{
						display: block;
						text-align: center;
						white-space: nowrap;
						font-size: 15px;
						border: none;
					}
				}
				&:hover{
					.sub-menu{
						display: block;  
						@media only screen and (max-width: 767px){
							display: none;
						}
					}
				}
			}
		}
	}
}