Please help for a cool header design?

see here: https://webers-testseite.de/yeti

it is glassy header with (two logos separated – not in one png) shrink option

these are the css rules for that page ( get rid of page-id class to set it globaly)
to have normal behavior on smaller screens i put it in a media query

@media only screen and (min-width:  768px){
.page-id-29598 #header_meta { z-index: 1 }
.page-id-29598 .logo img { top: -20px }
.page-id-29598 .logo, .logo a { overflow: visible }
#top.page-id-29598  #header_meta { border-bottom: 0 }
#top.page-id-29598 #header_main { border-top: 0 none }
}

the difficulty on that is your option to scroll the header_meta. so you have to make changes in avia.js on function avia_header_size().
The top margin is a dynamically calculated size – not a static one.

so the margin-top of the .logo img has to be calculated in this way too! It has to increase from negative header_meta hight ( nearly -30px) to zero when header scrolled was added.

without the top position at start ( https://webers-testseite.de/yeti ) you don’t have to change this.

• This reply was modified 7 years, 3 months ago by Guenni007.

so first of all it is recomended that you are working with a child-theme. LINK
second – remove all your settings concerning to this request

1) you uploaded logo is to small – increase the height to f.e. 300px so it has aprox. 650px width.
2) create a js folder in your child-theme folder (by the way it is a fix for shrinking header on ipad etc. (mobile) included)
3) upload the shrink_fix.js to that folder
Content of the shrink_fix.js: pastebin link
some comments are the original one some of them should show you what i changed
4) the line 99 of it is the trick: $(".logo").css("margin-top", "-"+(topbar_height-st_real)+"px" );
– it only works because we set the logo container to overflow: visible ! on quick css
5) to load the new js file goto functions.php of your child-theme :

function include_shrink_fix_js_file() {
   wp_enqueue_script( 'avia-main-child', get_stylesheet_directory_uri().'/js/shrink_fix.js', array('jquery', 'avia-default'), 2, true );
}
add_action( 'wp_enqueue_scripts', 'include_shrink_fix_js_file', 100 );

6) The quick css code here (some in a media query to save behavior of the logo on small screens (mobile etc.):

.logo, .logo a { overflow: visible }
#header_meta {  z-index: 1}

@media only screen and (min-width:  769px){
/** only if you want to get rid of border-lines */
#header_meta { border-bottom: 0 !important }
#header_main { border-top: 0 none !important }
/** play a bit with this entry  */
.logo img { max-height: 160% !important}
/** these settings aren't necessary - but on my installation it looks better  */
.av_header_transparency .av-burger-overlay .avia-menu-text { color: #000 !important }
.html_header_transparency .header-scrolled .header_bg { opacity: 0.8 }
.av_header_transparency .avia-menu-text { color: #fff }
}

/** to have small screen behavior as usual */
@media only screen and (max-width:  768px){
.responsive #top #header .social_bookmarks { display: block !important}
.logo img { max-height: inherit}
}

7) if it is done and something did not look as it should inform me and we will see on your test-installation what to do

by the way this shrik_fix.php is the part where the shrink amount is calculated.
On default – enfold got a shrink amount of 2 ( it goes to the half starting header hight)

If you got allready now the solution – you can change that too!
i see on your testpage that header size is set to 75px – what if you want to end at 25px
see on pastebin shrink_fix.js the lines 62 and 74 – these two lines are responsible for that shrinking behavior !
on line 74 it is easy to change because this divisor is the relation of starting header height to ending header height : 75/25 = 3 so replace in
line 74 : <strong>newH = el_height/3;</strong>
the line 62 is a bit more tricky here it is the realtion of scroll-amount to starting header height – you have to scroll from 75px to 25px = 50px scroll distance – now 75px/50px = 1.5 – and here we have !!!
replace line 62 : <strong> if(st < el_height/1.5)</strong>

Now you see that half size destination header height is a special case because scroll-distance to reach the endpoint of shrinking is exactly the endpoint height of the header f.e. from 200px starting to 100px ending you must scroll 100px !
alot of people fail here because the do not change both factors or they change it to the same value

• This reply was modified 7 years, 3 months ago by Guenni007.