如何解决Wordpress 站点中的徽标和导航栏对齐问题
我需要帮助编写 css 修复程序,以便在桌面和移动响应模式下对齐徽标和导航栏。自定义菜单中没有可用选项。提前致谢。
My Site
Theme Used
Problem SS1
Problem SS2
解决方法
使用可以使用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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。