multiline Menu with shrinking header – tutorial

multiline menu with shrinking header
(The values refer to two lines – more than two lines work, but there we have to make some compromises. because the size of the shrunken header limits the number of lines – so for 3 lines it would be an alternative to have the menu-items centered horizontaly)

How to give a custom-class to a menu-item:
On dashboard – appearance – menus we had on the very top a slide-out button “Screen Options” with options to set for menu-dashboard

so press this “Screen Options” slide-out settings dialog and mark the things you like to have for menu-styling
we need for it the “CSS Classes” – each menu-item has that little arrow on the right side
(see my comment in the image: here you can open the menu items to adjust the settings)

you will see for one menu-item the following:

on that “Navigation Label” input field you can put in what you like to have (even image links – you know that)
for multiline you can use the br-tag ( <br> ).
Put in the CSS Classes input field : multiliner

these are all menu-settings to have

__________

We now had to bind the shrink calculation to the padding-top for menu-items and set the line-height to a different amount then the default one for oneliners

So upload a copy of the avia-snippet-sticky-header.js Script to your enfold-child/js folder (on default there is no js folder – create one ) – this one will be used for your enfold installation now.

and we need this snippet to have a child-theme shrinking script:

add_action( 'wp_enqueue_scripts', 'wp_change_sticky_header_script', 100 );
function wp_change_sticky_header_script() {
   wp_deregister_script( 'avia-sticky-header' );
   wp_enqueue_script( 'avia-sticky-header-child', get_stylesheet_directory_uri().'/js/avia-snippet-sticky-header.js', array('avia-default'), $vn, true);
}

Goto Dashboard – Appearance – Editor
here you have your child-theme files – and now on the js subfolder the new script.
Under “Theme Files” you can click on this script because we had to insert some new code:

Find the line (on default Enfold 4.5.7 it is line 54) : topbar_height = header.find('#header_meta').outerHeight(),

under that line insert:

multiliner_padding = header.find('#avia-menu .multiliner > a'),
multiliner_lh = 20, // set the desired line-height for the multilines

now find (on default Enfold 4.5.7 it is line 92) : logo.css({'maxHeight': newH + 'px'});

insert after :

multiliner_padding.css({'padding-top': newH/2 - multiliner_lh/2 + 'px', 'line-height': multiliner_lh + 'px'});

save that file by click on “update file”
thats it

___________

in order for the new changes to take effect, you may need to refresh the merged files
Enfold (Child) – Performance – check that “Delete old CSS and JS files?” and “Save all changes”
refresh your browser chache too please.

See a working example on : https://webers-testseite.de/cynthia/