Wordpress:自定义徽标和菜单/侧边栏切换的问题
Posted
技术标签:
【中文标题】Wordpress:自定义徽标和菜单/侧边栏切换的问题【英文标题】:Wordpress: Problems with custom-logo & menu/sidebar-toggle 【发布时间】:2015-09-05 06:24:09 【问题描述】:我是 Wordpress 的新手,并且在我的新博客中使用了 Skilt 主题。现在我遇到了自定义徽标和侧边栏切换的问题。
无标志: Click
带徽标: Click
如您所见:上传自定义徽标时,侧边栏切换会向下移动。将整个菜单放在与上传徽标之前相同的位置会很好。希望你能找到解决方法。
CSS:
.site-header
position: relative;
z-index: 100;
padding: 30px 0;
padding: 3rem 0;
.site-header a
color: inherit;
.site-title
line-height: 1;
margin: 0;
.site-description
margin: 0;
@media screen and (min-width: 480px)
.site-title,
.site-description
display: inline-block;
vertical-align: middle;
.custom-logo
display: inline-block !important;
vertical-align: middle;
.site-description
margin: 0 0 0 10px;
.site-branding
float: left;
.site-navigation-toggle
color: #252931;
right: 0;
line-height: 1;
z-index: 9000;
font-size: 30px;
font-size: 3rem;
-moz-transition: opacity 150ms;
-o-transition: opacity 150ms;
-webkit-transition: opacity 150ms;
transition: opacity 150ms;
.site-navigation-toggle .fa-bars
position: relative;
top: -3px;
max-height: 25px;
display: inline-block;
overflow: hidden;
.custom-logo
display: block;
max-width: 100%;
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
.custom-logo a
display: block;
width: 100%;
height: 0;
font: 0/0 a;
text-decoration: none;
text-shadow: none;
color: transparent;
.site-main
display: block;
.single .site-main, .page .site-main
background-color: #fff;
padding: 30px;
padding: 3rem;
.has-background .site-header,
.has-background .site-footer,
.has-background .social-links,
.has-background .paging-navigation,
.has-background .site-title
color: #fff;
和标头代码:
<div class="site-branding">
<?php if ( stag_get_logo()->has_logo() ) : ?>
<div class="custom-logo">
<a rel="home" title="<?php esc_attr_e( 'Home', 'stag' ); ?>" href="<?php echo esc_url( home_url('/') ); ?>"></a>
</div>
<?php else: ?>
<h1 class="site-title"><a href="<?php echo esc_url( home_url() ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<?php endif; ?>
<?php $is_hiding = stag_theme_mod( 'title_tagline', 'hide-tagline' ); ?>
<p class="site-description"<?php if ( $is_hiding ) echo ' hidden'; ?>><?php bloginfo( 'description' ); ?></p>
</div>
<?php stag_maybe_show_primary_menu( 'header' ); ?>
<a href="#" id="site-navigation-toggle" class="site-navigation-toggle"><i class="fa fa-bars"></i></a>
</header
【问题讨论】:
能否请您提供网站链接,因为此代码(缺少标题标签)我们无能为力.. 抱歉,不能发布超过两个链接,这里是site。 请检查我的答案,如果有任何问题,请告诉我.. 【参考方案1】:我浏览了您的网站,目前为您找到了最简单的解决方案。
请从你的班级中删除这个*** css 这个班级 .site-navigation-toggle, .menu-header 的意思是:
.site-navigation-toggle, .menu-header position:absolute;top:50%;transform: translateY(-50%);
应该是这样的
.site-navigation-toggle, .menu-header position:absolute;transform: translateY(-50%);
刚刚删除 top:50% 一切都会好起来的..
【讨论】:
但是你必须小心网站的响应能力......试图给你更好的结果...... 是的,它正在工作。为什么我自己没有想到呢?谢谢! 请为答案投票并将其标记为答案,以便其他人可以从中获得帮助..谢谢..以上是关于Wordpress:自定义徽标和菜单/侧边栏切换的问题的主要内容,如果未能解决你的问题,请参考以下文章