グローバルナビゲーションの文字を変化しないようにしたい
topページとそれ以外の時で、グローバルナビの文字サイズが変化してしまうので、変化しないようにしたい。
グローバルナビで「top」, 「access」, 「sky view」,「ご予約はこちら」を作ったのですが、他のリンクページに飛ぼうとしたら「top」「ご予約はこちら」以外のナビゲーションの文字がアニメーションをつけたように文字が小さくなった後、元の文字のサイズになってしまいます。
発生している問題・エラー
/*HTML accessページ*/
<header>
<nav class="g-navi">
<div class="nav-wrapper">
<ul>
<li class="nav-item"><a href="index.html">top</a></li>
<li class="nav-item"><a href="skyview.html">sky view</a></li>
<li class="nav-item selected"><a href="access.html">access</a></li>
<li class="nav-item"><a href="contact.html">ご予約はこちら</a></li>
</ul>
</div>
</nav>
</header>
/*HTML ご予約はこちらのページ*/
<header>
<nav class="g-navi">
<div class="nav-wrapper">
<ul>
<li class="nav-item"><a href="index.html">top</a></li>
<li class="nav-item"><a href="skyview.html">sky view</a></li>
<li class="nav-item"><a href="access.html">access</a></li>
<li class="nav-item selected01"><a href="contact.html">ご予約はこちら</a></li>
</ul>
</div>
</nav>
</header>
/*css*/
.g-navi{
font-size: 20px;
width: 100%;
position: relative;
text-align: center;
}
.g-navi ul{
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
.g-navi ul li{
flex-basis: 25%;
margin-top: 15px;
margin-bottom: 15px;
height: 50px;
}
.selected{
background-color: #2B4AB4;
}
.g-navi ul .selected a{
color: #fff;
}
.selected01{
background-color: #2B4AB4;
}
.g-navi ul .selected01 a{
color: #fff;
background-color: #2B4AB4;
height: 50px;
}
.g-navi ul li+ li{
border-left: 1px dashed #999999;
}
.g-navi ul li a{
display: block;
color: #2B4AB4;
text-align: center;
padding-top: 10px;
}
.g-navi ul li a:hover{
color: #fff;
background-color: #2B4AB4;
height: 50px;
}
.g-navi ul li:nth-child(4){
color: #2B4AB4;
background-color: #EBF7FF;
height: 50px;
}
0
