Viewing 21 posts - 1 through 21 (of 21 total)
  • Author
  • #417478

    Dear Team,

    I am refering to this article:


    I have followed the steps and it worked fantastic until I updated the site to 3.1.2.
    Although I use a Child-Theme for my two sites, I still haven´t figured out how I can avoid changes caused by a theme update.
    I could use some help from you in order to keep my settings even after an update.

    Thank you in advance
    Asterios Georgiou


    Hi koelnermusikakademie!

    please refer to this code posted by Josue here: https://kriesi.at/support/topic/modifying-jsavia-js-for-a-child-theme/#post-360250

    With this in your functions.php you can add avia.js to your child theme, so modifications won’t be affected after an update.

    Best regards,



    thank you for your answer.

    I inserted the code in the function.php (of the child-theme) and added avia.js to the child-theme.
    The code turned my site into a white and empty screen. Nothing was possible anymore.
    Don´t know why but this didn´t work.

    Could you help some more with that?

    Thank you in advance
    Asterios Georgiou



    Did you make sure to create a folder named “js” in your child theme and copy the avia.js file into it?

    Best regards,


    Hi Elliot,

    thanks for the reply but it still doesn´t work and I had to delete the code provided by Josue in order to be able to login.
    I will write the steps I have followed, you might find my mistake:

    1. Created a Child theme

    2. In avia.js
    var menu = header.find(‘.main_menu ul:eq(0)’);
    if ( header.find(‘.main_menu_responsive ul:eq(0)’).length != 0 ) { menu = header.find(‘.main_menu_responsive ul:eq(0)’); }
    var first_level_items = menu.find(‘>li’).length,

    3. In functions.php
    avia_nav_menus(); function avia_nav_menus() { global $avia_config, $wp_customize; $avia_config[‘nav_menus’] = array( ‘avia’ => array(‘html’ => __(‘Main Menu’, ‘avia_framework’)), ‘avia2’ => array( ‘html’ => __(‘Secondary Menu <br/><small>(Will be displayed if you selected a header layout that supports a submenu here)</small>’, ‘avia_framework’), ‘plain’=> __(‘Secondary Menu – will be displayed if you selected a header layout that supports a submenu’, ‘avia_framework’)), ‘avia3’ => array( ‘html’ => __(‘Footer Menu <br/><small>(no dropdowns)</small>’, ‘avia_framework’), ‘plain’=> __(‘Footer Menu (no dropdowns)’, ‘avia_framework’)), ‘avia_responsive’ => array( ‘html’ => __(‘Responsive Menu <br /><small>(If set will replace your main menu on mobiles)</small>’)) ); add_theme_support(‘nav_menus’); foreach($avia_config[‘nav_menus’] as $key => $value) { $name = (!empty($value[‘plain’]) && !empty($wp_customize)) ? $value[‘plain’] : $value[‘html’]; register_nav_menu($key, THEMENAME.’ ‘.$name); } } add_action( ‘ava_after_main_menu’, ‘enfold_customization_add_responsive_menu’ ); function enfold_customization_add_responsive_menu() { echo “<nav style = ‘display:none;’ class=’main_menu_responsive’ data-selectname='”.__(‘Select a page’,’avia_framework’).”‘ “.avia_markup_helper(array(‘context’ => ‘nav’, ‘echo’ => false)).”>”; $avia_theme_location = ‘avia_responsive’; $avia_menu_class = $avia_theme_location . ‘-menu’; $args = array( ‘theme_location’ => $avia_theme_location, ‘menu_id’ => $avia_menu_class, ‘menu_class’ => ‘menu av-main-nav’, ‘container_class’ => $avia_menu_class.’ av-main-nav-wrap’.$icon_beside, ‘fallback_cb’ => false, ‘walker’ => new avia_responsive_mega_menu() ); wp_nav_menu($args); echo ‘</nav>’; }

    4. Created a “js” folder in my Child theme and inserted the avia.js file with the changed code.

    Now, if I use the code Andy/Josue gave me in order to avoid changes caused by a theme update, the site turns white and nothing works.
    Plus I don´t have a different mobile menu!
    Sorry but I can´t find the solution to the problem.

    Thank you again
    Asterios Georgiou



    It’s working fine on my XAMPP setup. It’s most likely a problem in your functions.php file if your getting a white screen. Try completely deleting the theme and child theme before downloading + uploading a fresh copy from themeforest and then try it again.

    1. Add Josue’s code to the bottom of your child theme functions.php file, https://kriesi.at/support/topic/modifying-jsavia-js-for-a-child-theme/#post-360250.

    2. Create a new folder in the child theme named “js” and then copy the avia.js file from Enfold into the new folder.

    3. Do the edits here, http://kriesi.at/documentation/enfold/changing-the-menu-on-mobiles/, in the child theme avia.js and functions.php file.

    If your still getting a white screen then your probably adding a typo somewhere.



    It seems to work now, thanks Elliott,

    one thing has changed though.
    If you check the mobil menu, you will see that the icons have not anymore the black colour I gave them
    and I cant change their colour either.

    Any suggestions for that or ideas why this changed?



    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    #mobile-advanced a:before {
      color: black !important;



    Hey Yigit!

    Sorry this doesn´t work.

    What happened after the last big update? I used to be able to choose any colour for the icons.

    Asterios Georgiou



    Add this.

    #mobile-advanced .avia_transform .av_font_icon { opacity: 1 !important; }
    #mobile-advanced .av-font-char { color: red !important; }



    Hi Elliott,

    sorry again but no results with that code either.
    Could I get an answer to my other question? Is it possible to use any colour for the menu icons like it used to be or
    is a extra code always necessary?

    And please a quick second question. My “scroll to top” button has disappeared! Something to do with the last update too?

    Best Regards



    The second line of the code I posted changes the color. It’s not working? Perhaps you have a typo somewhere in your CSS. Send us a WordPress login and we’ll take a look.

    For the scroll to top button use this CSS.

    #scroll-top-link { display: block !important; }


    This reply has been marked as private.


    Sorry, there was a typo. It should be working now. Here is the updated code.

    #mobile-advanced .av_font_icon { opacity: 1 !important; }
    #mobile-advanced .av-icon-char:before { color: red !important; }




    Sorry for the late reply, the code works fine thank you for your effort!

    One last thing about the mobile menu that I only noticed now.
    The icons became smaller after the last update and I managed to get them bigger but the space got bigger too.
    Any ideas hot to get them as they where?

    Thanks in advance
    Asterios Georgiou



    Please add following code to Quick CSS as well

    #mobile-advanced a {
      max-height: 48px;

    Please make sure to disable CSS minifying feature before applying the code

    Best regards,


    Hi Yigit,

    the code works fine, thank you for that.
    BUT, if I use the same menu with the icons as a “fullwidth Sub Menu”, the icons appear too large.
    The propotions are not anymore equal and the result is a bit ugly.

    I used to have the icons in 20px and now I brought them to 30px in order to make them bigger for mobiles.
    Is there any other solution to work as it used to be before the update? It worked fine then.

    Thank you for your efforts all of you.
    Asterios Georgiou



    Can you please post a screenshot and show the changes you would like to make? I am not sure if i understood it clearly. You can upload your screenshots on imgur.com or Dropbox public folder and post the links here



    Morning Yigit,

    yes here is a screenshot of the icons up to 30px in a “fullwidth Sub Menu”.
    You will see that the icons are much larger than the rest:

    And if I bring them back to 20px, they will be too small for mobiles. Have a look here:

    So what can be done now?

    Asterios Georgiou



    I can’t find the first icons on your first screenshot. However, try to control the size using this in Quick CSS:

    @media only screen and (max-width: 989px) {
    span.av-icon-char {
    font-size: 40px !important;

    and adjust as needed.

    Best regards,


    Hey Andy,

    it´strange that you don´t see the icons on the first screenshot. The are next to “Home” – “Aktuelles” etc…

    Anyway, the code works of course but the whole thing has changed after the last update.
    The icons in the mobile menu were bigger and easier to read and still looked nice if I put them in a page as a menu.
    I wish, I could still show you how it used to be… Now you can mark the topic as solved.

    Thank you all for your help
    Asterios Georgiou

Viewing 21 posts - 1 through 21 (of 21 total)
  • The topic ‘Responsive menu not showing after update’ is closed to new replies.