Hey Again,

Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

div#header-outer.invisible:not(.at-top) .col.span_9 {
    transform: translateY(100%);
}

Thanks

Hey Again,

Use this revised CSS.

Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

div#header-outer.invisible:not(.at-top) .col.span_9 {
    transform: translateY(100%);
}
/* add smoothing to the transition */
div#header-outer .col.span_9 {
    transition: transform .5s ease;
}

Thanks

Hey Again,

Please turn off the Header hide until needed Feature in the Salient Theme Options Panel so that i can write up the correct CSS.

Thanks 

Hey Again,

Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

#header-outer.scrolled-down .col.span_3 {
    visibility: hidden;
}

Thanks

Yes, Only use the CSS below:

div#header-outer.scrolled-down .col.span_3 {
    transform: translateY(-100%);
}
/* add smoothing to the transition */
div#header-outer .col.span_3 {
    transition: transform .5s ease;
}

Thanks 

Use below revised CSS.

div#header-outer.scrolled-down:not(.side-widget-open) .col.span_3 {
    transform: translateY(-100%);
}

instead of 

div#header-outer.scrolled-down .col.span_3 {
    transform: translateY(-100%);
}

Thanks 

Hey Again,

Use these now 

@media only screen and (min-width: 1px) and (max-width: 999px) {
    div#header-outer.scrolled-down .col.span_3 {
        transform: translateY(-400%);
    }
    div#header-outer.scrolled-down.side-widget-open .col.span_3 {
        transform: translateY(0%);
    }
}
@media only screen and (min-width: 1000px) {
    div#header-outer.scrolled-down:not(.side-widget-open) .col.span_3 {
        transform: translateY(-100%);
    }
}

Thanks

Hi There,

We are not replicating this from out end. Please let us know the tablet model/device you are experiencing this from.

Thanks.

Hey Again,

Escalating this to the developer for further testing on an actual device.

Thanks 

Hey alberteck,

In order to make that work consistently on all mobile devices, a slightly different approach would be required. Try to add in the following CSS snippet:

div#header-outer[data-permanent-transparent="1"][data-mobile-fixed="1"]:not(.side-widget-open) {
    position: absolute!important;
   transform: none!important;
}
body #header-outer #top .slide-out-widget-area-toggle a {
    position: fixed!important;
    right: 30px;
}
div#header-outer.scrolled-down:not(.side-widget-open) .col.span_3,
#top .span_9 >.slide-out-widget-area-toggle > div {
  transform: none!important;
}

Kind regards,

Hey alberteck!

Unfortunately, the method I've supplied doesn't have the option to animate the states.

The excess space you're seeing is most likely related to the admin bar with the modification I supplied, which should only be visible for logged-in users. Try to add the following CSS in as well to handle that state:

.admin-bar #header-outer[data-permanent-transparent="1"] {
    top: 0!important;
}

Can you provide a temporary admin login so that I can see what you're referring to?

Kind regards,

Thanks,

I've amended the snippet to the following which should take care of the issue:

.admin-bar #header-outer[data-permanent-transparent="1"]:not(.side-widget-open) {top: 0!important;}

Kind regards,

Hey,

I'm glad to hear - I just added in one last snippet to handle the vertical adjustment:

#top nav >ul .slide-out-widget-area-toggle { top: -10px; }

Cheers

You're welcome

Hey,

Please provide the page url so that i can write up the custom css for whats possible.

Thanks

Hey Again,

Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

@media only screen and (min-width: 1px) and (max-width: 999px) {
    #header-outer #top #logo img {
    top: 20px !important;
    }
}

Thanks