Hi,

i need your help or my supervisor cut my head off:) i need to know if something like menu move to top position after scrolling is possible. i need to have something like this on picture "should" but i only managed to something like on picture "is". I have in settings Header Shrink to 60px and this is part of my custom css with header modul:

/* logo top spacer */
@media only screen and (min-width: 1000px) {
#header-outer #logo img {
top: 24px !important;
position: relative;
}

/* logo clickable */
.home-button {
box-sizing: border-box;
transform-style: inherit;
background-color: transparent;
width: 200px;
height:140px;
position:absolute;
text-align: center;
outline: none;
text-decoration: none;
text-size:0;
z-index:10002;
}

}

/* center logo after scrolling*/
div#header-outer {
padding-left: 0px !important;
}

/*#mobile-menu {
top: 60px !important;
}*/

/* Logo bei scrollen weg*/
@media only screen and (min-width: 1000px) {

/* header background after scrolling */
.scrolled-down #boxed, #boxed #header-outer, #boxed #page-header-bg[data-parallax="1"]{
background-color:#E6F4FA;

}
/*
body #boxed, #boxed #header-outer[data-format="centered-menu-under-logo"] .span_3 {
display: block !important;
text-align: center;
width: 100% !important;
opacity:1 !important;
}

.scrolled-down #header-outer #logo img {
display: none;
opacity:0 !important;
}

*/

.scrolled-down #header-outer #logo img {
position: relative;
top: 24px !important;
display:none;
}
header#top #logo {
opacity: 1 !important;
transition: opacity 0.75s ease;
}

.scrolled-down header#top #logo, #header-outer #logo img {
opacity: 0 !important;
transition: opacity 0.75s ease;
}

.scrolled-down .home-button {
display:none;
}
}

Here is picture "is"

Thank you very much it works fabulous. I am trying to add a small css animation for that when you scroll. Can you help me whit the code? i trying something like this:

#header-outer.scrolled-down {
//padding-top:0px !important;
//margin-top: -31px !important;
animation: move 1s;
-webkit-animation: move 1s;


}
}

@keyframes move {
from { margin-top: 0; padding-top:0px !important;}
to { margin-top: -91px; padding-top:0px !important; }
}

@-webkit-keyframes move {
from { margin-top: 0; }
to { margin-top: -91px; padding-top:0px !important; }
}

i deed it myself:) Hide animation and back animation. You can use both command for start and end animation:

from = 0%

to = 100%

here is the code:

/* hide header logo animation */
#header-outer.scrolled-down {
animation: move 0.75s normal forwards ease-in-out;
-webkit-animation: move 0.75s normal forwards ease-in-out;
}

/* back header logo animation */
#header-outer {
animation: moveback 0.75s normal forwards ease-in-out;
-webkit-animation: moveback 0.75s normal forwards ease-in-out;
}

@keyframes move {
0% { margin-top: 100px; }
100% { margin-top: -61px; }
}

@-webkit-keyframes move {
from { margin-top: 100px; }
to { margin-top: -61px; }
}

@keyframes moveback {
0% { margin-top: -151px; }
100% { margin-top: 0px; }
}

@-webkit-keyframes moveback {
from { margin-top: -151px; }
to { margin-top: 0px; }
}

Result on page myworkflow.info :)