WordPress nav 縦並び

こうしたい

でもWordPressが出力するnavにはいろんなクラスが当てられる それがuser-agentという、ブラウザのデフォルト値に関係してしまうので、 CSSがうまく当たらない

WordPressにはこれだけ

    <div class="nav-menu">
      <div class="nav-sns">
        <a class="sns-link fa" href=""></a>
      </div>
      <?php wp_nav_menu(); ?>
    </div>

でHTMLを確認すると、いろんなクラスが出力されている

それに対してすべてCSSを当てていく

desiplay: flexで対応

もともとは

display: list-itemがあたっていた

@media screen and (max-width:600px) {
    .nav-menu {
        display: flex;
        width: 70%;
        height: 600%;
        background-color: #F49F0D;
        top: 78px;
        right: 0;
        opacity: 0.9;
    }
    .menu-main-container ul {
        display: flex;
        flex-direction: column;
    }
    .menu-main-container ul li {
        text-align: left;
        width: 100%;
        display: flex;
        flex-direction: column;
        z-index: 999;
    }
}