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; }}

Rikard,

One more thing I forgot to ask you about is there a setting somewhere in the theme to make the top main menu sticky? I do not seem to be able to find it in the settings or when doing a search on your forum. Thank you.

Mark

Hi Rikard,

You can close this topic now. Thank you again for your help.

Kind regards,
Michael

Topic can be closed))

hey sarah,
I’m not displaying the layerslider now in my website . But you can take a look and try adding one in the top content in my homepage. I’ll include the details in the private section.

Dear Rikard & Sarah
I did as you suggested and used the following code

#top #main .title_container
{
    display: none !important;
}

@media only screen and (max-width:767px)
{
    #top #main .title_container
    {
        display: block !important;
    }
}

All works properly, thank you very much for your help. You can close this topic.

Best regards,
MD