Change space between site logo and hamburger menu

Hi!
Loving the theme!

Caught up with one problem that should be an easy fix.
The mobile layout of my site:
http://pawsinmotion.dreamhosters.com

I want the slider to be aligned below the header background and the hamburger menu closer to the site logo.

Current custom CSS is:

.preloader .pre-bounce1, .preloader .pre-bounce2 {
   display: none;
}
.preloader .spinner {
   background-image: url('http://pawsinmotion.dreamhosters.com/wp-content/uploads/2016/12/icon-loading-animation.gif');
   width: 30px;
   height: 30px;
   background-repeat: no-repeat;
   background-size: contain;
}
@media only screen and (max-width: 1024px) {
    header#masthead.site-header {
        position: relative !important;
    	background-color: #621E0C;
     	opacity: .8 !important;
    	height: 160px;
	}
}
#mainnav-mobi {
  margin-top: 20px;
  background-color: #621E0C;
  opacity: 1 !important;
}
site-logo {
  margin: 30px
}
.page .hentry .entry-header {
    display: none;
}
a:hover {
    color: gray !important;
}
.roll-team .owl-wrapper{
  max-width: 100% !important;
  transition: none !important;
  transform: none !important;
}
.roll-team .owl-controls{
  display: none !important;
}
.widget_sydney_employees {
   width: 100%;
}
.widget_sydney_employees:nth-of-type(3n+1) {
   clear: none;
}
.roll-team .team-content .pos {
    color: #621E0C;
}
@media only screen and (min-width: 1025px) {
  .header-wrap .row { 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    align-items: center;
  }
}

I’ve been playing with the CSS and this shows is the latest version. Still having the issue of the slider not bottom aligned with the mobile nav header.


.preloader .pre-bounce1, .preloader .pre-bounce2 {
   display: none;
}
.preloader .spinner {
   background-image: url('http://pawsinmotion.dreamhosters.com/wp-content/uploads/2016/12/icon-loading-animation.gif');
   width: 30px;
   height: 30px;
   background-repeat: no-repeat;
   background-size: contain;
}
@media only screen and (max-width: 1024px) {
    header#masthead.site-header {
        position: relative !important;
    	background-color: #621E0C;
     	opacity: .8 !important;
    	height: 200px;
    	margin-bottom: 0;
    	padding-bottom: 20px;
	}
}
#mainnav-mobi {
  margin-top: 5px;
  background-color: #621E0C;
  opacity: 1 !important;
}
img.site-logo {
  margin: 30px 0px 0px 0px;
}
.page .hentry .entry-header {
    display: none;
}
a:hover {
    color: gray !important;
}
.roll-team .owl-wrapper{
  max-width: 100% !important;
  transition: none !important;
  transform: none !important;
}
/*
Additional Services */
#pgc-1626-2-0.panel-grid-cell .widget-title {
    margin-bottom: 0;
  	font-size: 20px;
}
/*
Locations Text & image */
#pg-1626-1.panel-grid .widget-title {
  	font-size: 16px;
}
.sow-image-container {
  padding: 0px 0px 15px 0px;
}
/*
Instagram Feed Text */
#pgc-1626-4-0.panel-grid-cell .widget-title {
    margin-bottom: 16px;
}

.roll-team .owl-controls{
  display: none !important;
}
.widget_sydney_employees {
   width: 100%;
}
.widget_sydney_employees:nth-of-type(3n+1) {
   clear: none;
}
.roll-team .team-content .pos {
    color: #621E0C;
}
@media only screen and (min-width: 1025px) {
  .header-wrap .row { 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    align-items: center;
  }
}


Hello @pawsinmotion,

Can you please provide some explanatory screenshots in order to illustrate what do you want to achieve?

You can upload screenshots to your WordPress Media Library and share a link, or you can use one of the online screenshot services.

Kind Regards, Roman.

I worked with it more and it is looking better. But right now, using Safari on a MacBook, the sticky header jumps up and then back down when I scroll the page. It works well testing on Firefox and Google Canary. Any suggestions? Thanks!

Current CSS:

.preloader .pre-bounce1, .preloader .pre-bounce2 {
   display: none;
}
.preloader .spinner {
   background-image: url('http://pawsinmotion.dreamhosters.com/wp-content/uploads/2016/12/icon-loading-animation.gif');
   width: 30px;
   height: 30px;
   background-repeat: no-repeat;
   background-size: contain;
}
@media only screen and (max-width: 499px) {
    header#masthead.site-header {
        position: relative !important;
    	background-color: #621E0C;
     	opacity: .8 !important;
    	height: 160px;
    	margin-bottom: 0;
    	padding-bottom: 55px;
	}
}
#mainnav-mobi {
  margin-top: 5px;
  background-color: #621E0C;
  opacity: 1 !important;
}
img.site-logo {
  margin: 5px 0px 0px 0px;
}
.page .hentry .entry-header {
    display: none;
}
a:hover {
    color: silver !important;
}
.roll-team .owl-wrapper{
  max-width: 100% !important;
  transition: none !important;
  transform: none !important;
}
/*
Additional Services */
#pgc-1626-2-0.panel-grid-cell .widget-title {
    margin-bottom: 0;
  	font-size: 20px;
}
/* Change icon label size */
.roll-icon-list .content h3 {
   font-size: 22px;   
}
/* Change icon label size */
.roll-icon-box .content h3 {
   font-size: 22px;   
}
/* Change icon size */
.roll-icon-list .icon {
   width: 38px;
   height: 38px;
   line-height: 40px;
}
.roll-icon-list .icon i {
   font-size: 20px;   
}
/*
Locations Text & image */
#pgc-1626-pg-location-0.panel-grid-cell .widget-title {
  	font-size: 16px;
}
.sow-image-container {
  padding: 0px 0px 15px 0px;
}
#pgc-1626-pg-location-1.panel-grid-cell .widget-title {
  	font-size: 16px;
}
.sow-image-container {
  padding: 0px 0px 15px 0px;
}
#pgc-1626-pg-location-2.panel-grid-cell .widget-title {
  	font-size: 16px;
}
.sow-image-container {
  padding: 0px 0px 15px 0px;
}
/*
Instagram Feed Text */
#pgc-1626-4-0.panel-grid-cell .widget-title {
    margin-bottom: 16px;
}
.roll-team .owl-controls{
  display: none !important;
}
.widget_sydney_employees {
   width: 100%;
}
.widget_sydney_employees:nth-of-type(3n+1) {
   clear: none;
}
.roll-team .team-content .pos {
    color: #621E0C;
}
@media only screen and (min-width: 1025px) {
  .header-wrap .row { 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    align-items: center;
  }
}

Hello @pawsinmotion,

It looks like your issue requires close inspection of your own custom CSS code, this goes beyond our support policy. It’s considered advanced customization.

As an option, you can contact Codeable for this kind of service, or find a freelancer on Upwork.

Kind Regards, Roman.