I’m new to WordPress and using the Skilt-Theme for my new Blog. Now I’m having problems with the custom-logo and the sidebar-toggle.
Without Logo:
Click
With Logo:
Click
As you can see: The sidebar-toggle is moving down when uploading a custom-logo. It would be nice to have the whole menu at the same place as it was before uploading the logo. Hope you’ll find a way to fix it.
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;
}
And Header-Code:
<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
I have been through your site and found easiest solution for you at this moment.
please remove this top css from your class this class .site-navigation-toggle, .menu-header means :
this should be like this
just removed top:50% and everything will be ok..