I have set my header to be logo left, menu right and this works fine except on mobiles where I want it to be Logo centre, menu below. How would I CSS this please using @media screen and max-width CSS.
Thanks
Huw
on mobile there will be a hamburger menu – the option of menu center is for the most advices not given – accept ipad 2 etc on landscape ?
there were possibilities to set this – but there must be alot of css additonal. (Scroll offset, etc.)
Try this in your functions.php of your child-theme:
add_filter('avf_header_setting_filter','av_change_header_layout');
function av_change_header_layout($header){
if(wp_is_mobile()){
$header['header_layout'] = "logo_center bottom_nav_header menu_right";
$header['bottom_menu'] = "header_bottom_menu_active";
}
return $header;
}
and this to quick css ( it depends on your header settings values):
.avia_mobile #header_main_alternate {
border-top: none !important ;
}
.avia_mobile #header_main .container, .avia_mobile .main_menu ul:first-child > li a {
height: 50px !important;
line-height: 52px !important;
}
.html_header_top.html_header_sticky.avia_mobile #top #wrap_all #main {
padding-top: 119px !important;
}
Guenni
Many thanks. Let me take a look – there’s a lot of new stuff for me to understand here!
Thanks again
Huw