Wordpress 网站中的徽标和导航栏对齐问题答案

【问题标题】：Logo and navbar alignment issues in Wordpress siteWordpress 网站中的徽标和导航栏对齐问题
【发布时间】：2021-05-26 20:55:45
【问题描述】：

我需要帮助编写一个 CSS 修复程序，以便在桌面和移动响应模式下对齐徽标和导航栏。自定义菜单中没有可用选项。提前致谢。
My Site
Theme Used
Problem SS1
Problem SS2

【问题讨论】：

欢迎来到SO，本站对提问方式有规定，新用户请阅读How to Ask。具体来说，你应该展示你的研究。它将帮助其他人更好地了解您的问题

标签： html css wordpress alignment

【解决方案1】：

使用可以使用Display flex CSS。以您的网站为例：

<div id="header-text-nav-wrap">
    <div id="header-left-section">
        <!-- your logo here -->
    </div>
    <div id="header-right-section">
        <!-- your menu -->
        <!-- your searh and other -->
    </div>
</div>

<style> 
    #header-text-nav-wrap{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    #header-logo-image img{
        max-height: 60px;
        width: auto;
        margin: 0 auto;
        text-align: center
    }
    #header-right-section{
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
    }
    .main-navigation,
    .header-action{
        padding-top: 0; 
    }
    @media (max-width: 768px) {
        .better-responsive-menu #header-text-nav-wrap{
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
        }
        .better-responsive-menu #header-logo-image {
            float: none;
            margin-bottom: 0;
            margin-right: 0;
            text-align: center;
        }   
        .better-responsive-menu #header-right-section {
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            width: 100%;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            margin: 0;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: reverse;
            -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
        }
        #header-right-section .header-action{
            min-width: 200px;
            padding-right: 15px;
        }
    }
</style>

【讨论】：

非常感谢您，您的代码完美无缺。