Switch to mobile menu at 1150px, not 990px

Website is http://dev.henleyherald.com/

Custom CSS code added to try to get the mobile menu working at 1150 px is

@media only screen and (max-width: 1150px) {
#top .av_mobile_menu_tablet .av-main-nav .menu-item { display: none!important; }
.av-burger-menu-main { display: block!important; }
}

Use Chrome DevTools to see the problems:
1. Search icon required when mobile menu displayed but adding #menu-item-search (display: block!important;} in the above media query has no effect.
2. How to move the burger icon out of the ‘normal’ menu area between 1150px and 990px (and into its header position below 990px between these widths), and also to remove the ‘normal’ menu blank space (I think this might be .av-main-nav).

[Or more simply, in Enfold > Main Menu, for Menu Items for Mobile, where it has options for Activate on browser widths below 768px or 990px, I want the mobile menu to activate “below 1150px”.]

NB. This is not the only site where I need this fix. I have other sites where the client has requested a switch to the mobile menu at a higher width than Enfold’s 990px default (which is too low IMHO), usually being a fix for iPads and/or, as here, a lot of main menu top level elements.

@Victoria – yes the burger menu appears between 1150px and 990px but it’s in the wrong place. It’s positioned in the ‘normal’ menu space and it doesn’t move up until below 990px when it displays here and the ‘normal’ menu space is removed. I’d like the burger to appear in the top header area and the normal menu space to be removed from 1150px downwards so it’s consistent.

Details in private content.

@victoria – I have a child theme and I’ve added the code into style.css but what do I do with this previous CSS?

@media only screen and (max-width: 1150px) {
#top .av_mobile_menu_tablet .av-main-nav .menu-item { display: none!important; }
.av-burger-menu-main { display: block!important; }} 

I’ve added the 2 lines into your CSS but between 1150px and 990px I now have:
– burger menu top right where it should be but still no search icon
– the space for the normal menu is empty but still visible

and then between 990px and 768px the search icon reappears, the empty ‘normal’ space has gone but the top of the main page content & heading (“Welcome to the…”) is cut off… (and I had to add some CSS to fix .av-logo-container height, which if you remove it the heading reappears but the news ticker now runs over the top of the heading because .av-logo-container has not got enough height – try it in DevTools to see what happens)

but below 768px everything is OK (but again I’ve had to add some CSS to fix #header_main height).

PS. Trying to fix this would be an awful lot easier if the logo/header/menu classes were consistent but they seem to change between different screen widths… :-(

There was still a problem with the search icon not showing but I have now got this working (I think and hope…) and am posting the final CSS so that anyone else who wants to do this might have an easier job implementing it than me. You’ll still probably have to tweak it but hopefully it will get you on your way. :-)

I do have to say that the new burger menu is a nightmare to customise and a change to Enfold > Main Menu to allow user selection of when tablets and smartphones switch to the mobile menu, especially given the multitude of devices available these days, is now urgently needed in the theme.

Notes:
Change all references to 1150px to whatever screen width you want the burger menu to appear from above 990px.
My normal desktop header is 116px high – responsive mode changes the header height & various paddings to all sorts of different values depending on the screen width – some consistency in the code would be good… ;-)
Enfold > Burger/Mobile Menu Styling is set to #000000.
The responsive search icon is 24px below 990px but this has to be specified between 1150px and 990px in custom CSS.
This next line of custom CSS, quoted in a support answer elsewhere on a similar topic to this, is not needed and stops the search icon displaying –
#top .av_mobile_menu_tablet .av-main-nav .menu-item { display: none!important; }

CSS:
@media only screen and (max-width: 1150px) {
#menu-item-search { display: block!important; }
.av-burger-menu-main { display: block!important; }
.html_header_top.html_header_sticky.html_large.html_bottom_nav_header #main { padding-top: 116px; }}

@media only screen and (max-width: 1150px) and (min-width: 990px) {
.html_header_top.html_bottom_nav_header #header_main_alternate .main_menu { display: none; }
.html_header_top .av_bottom_nav_header .av-logo-container .main_menu { display: block; }
.html_mobile_menu_tablet #top #wrap_all .menu-item-search-dropdown > a { font-size: 24px; color: #000000; }}

@media only screen and (max-width: 989px) and (min-width: 768px) {
.responsive.html_mobile_menu_tablet #top #wrap_all .av-logo-container { height: 116px !important; }
.responsive.html_mobile_menu_tablet.html_header_top.html_header_sticky #top #wrap_all #main { padding-top: 116px; }}

@media only screen and (max-width: 767px) {
.responsive #header_main .container { height: 116px !important; }}