2015-06-19 77 views
1

我是新来的Wordpress和使用Skilt主题为我的新博客。现在我遇到了自定义徽标和侧栏切换的问题。WordPress的:自定义徽标和菜单/侧边栏切换问题

无商标: 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 
+0

能否请您通过这个代码给网站作为链接(标题标签缺失),我们不能帮助.. –

+0

抱歉,无法邮政两个以上的链路,这里的[站点](HT TP://tyla.bplaced.net/live%20access/)。 – ratz

+0

请检查我的答案,让我知道,如果有任何问题,更... –

回答

0

我已经通过您的网站,发现在这一刻你最简单的解决方案。

请从你的类该类.site导航拨动删除此之上的CSS,。菜单头是指:

.site-navigation-toggle, .menu-header { position:absolute;top:50%;transform: translateY(-50%);} 

这应该是这样的

.site-navigation-toggle, .menu-header { position:absolute;transform: translateY(-50%);} 

只是删除顶: 50%,一切都将是确定..

+0

但你必须要照顾FUL与网站的responsiveness..trying给你更好的结果.. –

+0

是的,它的工作。我为什么没有想到自己呢?谢谢! – ratz

+0

请提出答案,并将其标记为答案,以便其他人可以从中获得帮助。谢谢。 –