btw. if you are using this elegant demo and have some extra pages/post not on the front-page you have to set the padding of
.responsive #top #main – otherwise the content starts down the header

as i said let the instruction of 480px on top go away:

.main_menu { top: -20px !important}

@media only screen and (max-width: 990px) {
.js_active.html_burger_menu #avia-menu .av-burger-menu-main, .html_burger_menu #top #avia-menu .menu-item-search-dropdown {display: block}
.main_menu .avia-menu, #header_main_alternate, .fallback_menu {display: block}
.avia-menu.av_menu_icon_beside {
    margin-right: 10px;
    padding-right: 0;
    top: 0;
}
.responsive #header .main_menu .social_bookmarks { display: block}
.responsive #top .logo {
    display: block;
    float: left;
    position: absolute;
}
div .logo {
    float: left;
}
.main_menu {
    position: absolute !important;
}
.responsive.html_header_top #header_main .social_bookmarks, .responsive.html_top_nav_header #top .social_bookmarks {
    margin-top: 45px;
    right: 0;
    width: auto;
    top: 0
}
#advanced_menu_toggle { 
display: none !important; 
}
}

@media only screen and (max-width: 480px) {
.responsive #top #wrap_all #header_main .container {
    max-width: 95%;
    width: 95%;
}
.responsive .logo img {
    max-width: 200px !important;
    top: 15px;
}
.logo, .logo a {
    overflow: visible;
}
}

you have to play a bit with positioning – that was a quickly shot solution

on that test page i did solve the mentioned above problem by making the logo smaller – but perhaps it is better to let those social bookmarks and hamburger-menu logo float left – and let it go under the logo

@media only screen and (max-width: 480px) {
.responsive #top #wrap_all #header_main .container {
    max-width: 95%;
    width: 95%;
}
.responsive .logo img {
    max-width: 200px !important;
    top: 15px;
}
.logo, .logo a {
    overflow: visible;
}
}

.header_color .main_menu ul:first-child li:hover.menu-item-top-level > a {
    color: #900 !important;
text-transform: uppercase
}

and if you only want to have it for top level links with submenu:

.header_color .main_menu ul:first-child li:hover.menu-item-has-children.menu-item-top-level > a {
    color: #900 !important;
text-transform: uppercase
}

• This reply was modified 9 years, 7 months ago by Guenni007.

I am having a similar issue with the Layerslider WP. It’s part of the Enfold theme but all layer slider functionality on the front end stopped working. I updated the Theme to the latest version 3.8, but it was still not working. I deactivated the W3 Total Cache plugin and it started working again.

• This reply was modified 9 years, 7 months ago by marstorm.

try this – i decided to show the old mobile menu under 480px

@media only screen and (min-width: 480px) and (max-width: 990px) {

.js_active.html_burger_menu #avia-menu .av-burger-menu-main, .html_burger_menu #top #avia-menu .menu-item-search-dropdown {display: block}
.main_menu .avia-menu, #header_main_alternate, .fallback_menu {display: block}
.avia-menu.av_menu_icon_beside {
    margin-right: 5px;
    padding-right: 0;
    top: -20px;
}

.responsive #header .main_menu .social_bookmarks { display: block}

.responsive #top .logo {
    display: block;
    float: left;
    position: absolute;
}

div .logo {
    float: left;
}

.main_menu {
    position: absolute !important;
}

.responsive.html_header_top #header_main .social_bookmarks, .responsive.html_top_nav_header #top .social_bookmarks {
    margin-top: 25px;
    right: 0;
    width: auto;
    top: 0
}

#advanced_menu_toggle { 
display: none !important; 
}
}