Special Header for a similar website

it is not as simple as it seems to be – i’m missing this header option too. Logo inbetween the middle of the menu.
and there is a bit more todo than simple css – especially if you like to have a shrinking header.

https://webers-testseite.de/weber/

let it open i – will post it here. But today i have to go to a 50th birthday – Tomorrow on Germany is a holiday – so i got a bit more time.

Something on pre info:
This is not the logo inbetween the menus – it is a manually link placed with an image on the place where i want to have it.
i set the logo to display none on media querrie for larger screens 768 or 990.
I do use the shrink option of the logo to calculate the img height of that link.

https://webers-testseite.de/weber/

click the images to enlarge
first of all if you do not need the shrinking option it is not so complicated as it seems
Insert as usual a logo to the enfold options.

you have to go to dashboard – appearance – menus

insert a home link. On top right of the dashboard window – there is a slide out option called “Screen Options” Press it.
Here you have some settings. Please mark the css classes.

If you click on those littel arrows besides the menupoints you can insert different things now:

On Navigation label you can insert the image link now something like:
<img src="https://url.com/logo-top.png" alt="Logo" />
On css classes : logoimg
You only are in the midpoint if you have odd number of menupoints.
We now have to get rid of the logo container
Quick css:

.logo, .logo a { display: none }
.logoimg img { width: auto ; max-height: 172px }
.container.av-logo-container { position: absolute }
.logoimg .avia-menu-fx { display: none }
#av-burger-menu-ul li:nth-child(4) { display: none }

the last rule is to have not the menu-point on burger menu
you have to count what menu-point is your logo (here it is on 4th position of the menu)

and to have the normal logo on responsive case:

@media only screen and (max-width: 768px){
.container.av-logo-container { position: relative }
.logo, .logo a { display: block }
}

___________________
with shrink option :

we have to use the function avia_header_size() of avia.js
the code to see is on pastebin: look
download it as js file: download

you see on line 61 (original it is 1551 on avia.js) of my code that i get rid of the not mobile option.
i set on line 47 : navlogo = $('.logoimg img'), and
on line 92 i added this code: navlogo.css({'maxHeight': 1.72*newH + 'px'});

these values you can play with. I have on my testinstallation a 100px custom height of the header
my logo is 172px hight – so my factor here is 1.72

upload that menu_logo.js file to your child-theme js-folder (create a subfolder in childtheme called : js
loading the script above in enfold open your functions.php via dashboard – appearance – editor and insert:

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

now the “logo” of your menu shrinks on scrolling.

• This reply was modified 7 years, 1 month ago by Guenni007.