-
AuthorPosts
-
September 21, 2013 at 8:31 pm #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/j3ClgL7rvSrCollapsed:
http://screencast.com/t/MsmRLErewaSeptember 23, 2013 at 1:56 pm #165144Hey 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!
YigitSeptember 23, 2013 at 8:32 pm #165279Excellent! 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
September 24, 2013 at 3:49 am #165419Hey!
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,
IsmaelSeptember 26, 2013 at 1:39 pm #166622September 27, 2013 at 12:22 am #166936September 27, 2013 at 9:15 am #167063Hi Yigit..
September 30, 2013 at 1:45 am #167919Hello 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!
DevinSeptember 30, 2013 at 11:00 pm #168437Both solutions worked perfectly for me. Thanks!
-
AuthorPosts
- The topic ‘Collapsable menu’ is closed to new replies.