Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #164526

    Hi,

    I noticed on the Enfold demo theme that the little bars menu shows up when the screen is resized below a certain point. It looks like the one on a mobile device.

    I get a dropdown menu list after screen size drops below 765. That is too late though. If you look at the attached screenshot, you will see the menu items are crowded into the logo before the collapsible menu shows.

    How can I adjust this.

    Thanks

    Overlap:
    http://screencast.com/t/j3ClgL7rvSr

    Collapsed:
    http://screencast.com/t/MsmRLErewa

    #165144

    Hey fjhughes!

    In your WordPress theme directory you should go to Enfold > Js folder and open Avia.js file and find following code in line 87

    switchWidth 	  = 767;

    and change it to desired value, such as

    switchWidth 	  = 989;

    Cheers!
    Yigit

    #165279

    Excellent! This worked to solve the problem. One question I have though, I am using the Child theme. As you may have seen we made some modifications to bring the content up into the slider. I want to make sure that if there are WordPress updates, and I update my Enfold Parent theme, that my custom changes will not be lost.

    I know if I only update certain files, I would be safe, but on the last Enfold update, I just copied the whole Enfold folder and did overwrite all. If I do that again I would lose those avia.js changes. Is there an easy way to move that to the child theme?

    Thanks again for you help! I love this theme.

    -fjh

    #165419

    Hey!

    Place the js folder with the avia.js file on the child theme’s folder. Add this on the child theme’s function.php:

    if(!function_exists('avia_register_frontend_scripts'))
    {
    	if(!is_admin()){
    		add_action('wp_enqueue_scripts', 'avia_register_frontend_scripts');
    	}
    
    	function avia_register_frontend_scripts()
    	{
    		$template_url = get_template_directory_uri();
    		$child_theme_url = get_stylesheet_directory_uri();
    
    		//register js
    		wp_register_script( 'avia-compat', $template_url.'/js/avia-compat.js', array('jquery'), 1, false ); //needs to be loaded at the top to prevent bugs
    		wp_register_script( 'avia-default', $child_theme_url.'/js/avia.js', array('jquery'), 1, true );
    		wp_register_script( 'avia-shortcodes', $template_url.'/js/shortcodes.js', array('jquery'), 1, true );
    		wp_register_script( 'avia-prettyPhoto',  $template_url.'/js/prettyPhoto/js/jquery.prettyPhoto.js', 'jquery', "3.1.5", true);
    		wp_register_script( 'wp-mediaelement',  $template_url.'/js/mediaelement/mediaelement-and-player.min.js', 'jquery', "1", true);
    
    		wp_enqueue_script( 'jquery' );
    		wp_enqueue_script( 'avia-compat' );
    		wp_enqueue_script( 'avia-default' );
    		wp_enqueue_script( 'avia-shortcodes' );
    		wp_enqueue_script( 'avia-prettyPhoto' );
    		wp_enqueue_script( 'wp-mediaelement' );
    
    		if ( is_singular() && get_option( 'thread_comments' ) ) { wp_enqueue_script( 'comment-reply' ); }
    
    		//register styles
    		wp_register_style( 'avia-style' ,  $child_theme_url."/style.css", array(), '1', 'screen' ); //register default style.css file. only include in childthemes. has no purpose in main theme
    		wp_register_style( 'avia-grid' ,   $template_url."/css/grid.css", array(), '1', 'screen' );
    		wp_register_style( 'avia-base' ,   $template_url."/css/base.css", array(), '1', 'screen' );
    		wp_register_style( 'avia-layout',  $template_url."/css/layout.css", array(), '1', 'screen' );
    		wp_register_style( 'avia-scs',     $template_url."/css/shortcodes.css", array(), '1', 'screen' );
    		wp_register_style( 'avia-custom',  $template_url."/css/custom.css", array(), '1', 'screen' );
    		wp_register_style( 'avia-prettyP', $template_url."/js/prettyPhoto/css/prettyPhoto.css", array(), '1', 'screen' );
    		wp_register_style( 'avia-media'  , $template_url."/js/mediaelement/skin-1/mediaelementplayer.css", array(), '1', 'screen' );
    
    		//register styles
    
    		wp_enqueue_style( 'avia-grid');
    		wp_enqueue_style( 'avia-base');
    		wp_enqueue_style( 'avia-layout');
    		wp_enqueue_style( 'avia-scs');
    		wp_enqueue_style( 'avia-prettyP');
    		wp_enqueue_style( 'avia-media');
    
            global $avia;
    		$safe_name = avia_backend_safe_string($avia->base_data['prefix']);
    
            if( get_option('avia_stylesheet_exists'.$safe_name) == 'true' )
            {
                $avia_upload_dir = wp_upload_dir();
    
                $avia_dyn_stylesheet_url = $avia_upload_dir['baseurl'] . '/dynamic_avia/'.$safe_name.'.css';
                wp_register_style( 'avia-dynamic', $avia_dyn_stylesheet_url, array(), '1', 'screen' );
                wp_enqueue_style( 'avia-dynamic');
            }
    
    		wp_enqueue_style( 'avia-custom');
    
    		if($child_theme_url !=  $template_url)
    		{
    			wp_enqueue_style( 'avia-style');
    		}
    
    	}
    }

    Best regards,
    Ismael

    #166622

    I changed mine to 989 as suggested still not working..

    I am using a responsive layout max width 1030px with the Fixed header with Social Icons and navigation

    #166936

    Hello!

    Deeps can you post the link to your website?

    Regards,
    Yigit

    #167063

    Hi Yigit..

    Cocoa Media Website

    #167919

    Hello deeps!

    Your avia.js still shows the original switch width:

        	var menu 			  = header.find('.main_menu ul:eq(0)'),
    	    	first_level_items = menu.find('>li').length,
    	    	bottom_menu 	  = $('html').is('.bottom_nav_header'),
    	    	switchWidth 	  = 767;

    See this post for more info: https://kriesi.at/support/topic/top-menu-with-the-social-icons-bigger?replies=5#post-132320

    Cheers!
    Devin

    #168437

    Both solutions worked perfectly for me. Thanks!

Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Collapsable menu’ is closed to new replies.