Wordpress: Problems with custom-logo & menu/sidebar-toggle

Question

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

Answer 1

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 :

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

this should be like this

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

just removed top:50% and everything will be ok..