-
Posts
-
Hi Guys!
I’m using WP 4.2.2 and Enfold 3.1.5. I’m hoping there’s a built in way to have a menu that’s displayed vertically through a Custom Menu Widget collapse for mobile devices. Here’s a visual of the problem. In desktop view it’s fine as shown here. However when you get down to smart phone size, it does this and pushes the content a good ways down. It would be much better if the menu collapsed for mobile view, don’t you think? If there’s not a built in way, I’ll settle for a quick and dirty hack. ;-) Any ideas???
Thanks!
Scott
P.S. I’ve already tried Bootstrap Collapse Menu Widget and it does not seem to do anything. I’m guessing it’s because it’s a widget. The other day one of you guys mentioned that there’s some new requirement for widgets in WP 4.2, and Bootstrap Collapse Menu Widget hasn’t been updated in quite a while.
Hi scotthco!
Thank you for using Enfold.
Use the fullwidth submenu element to replace the default sidebar menu on mobile device. Edit the element then set the Mobile Menu Display to the second option. Use css media queries to show or hide the menus.
Cheers!
IsmaelThanks Ismael! It’s sort of working. I’ve got the basic show/hide stuff for the regular side menu vs. the full width menu (in mobile mode) working. However when I tap or click the full width mobile menu “button”, all that happens is the page refreshes. I’m guessing this is because its href has a “#”, so before anything else can happen, before the hidden menu items can appear, the page just refreshes. I’ve found that javascript:void(0) sometimes works better for this, but of course I don’t think I have the ability to change that, do I?
Just so you know, I have an iPhone 4 that I use for testing, and my regular phone, a Samsung GS3 with the built in android browser, Chrome, and Firefox. It does this in all three browsers on the GS3 and on the iPhone. FYI – I do want it to work with the built in android browser. I’m sure many people still have mobile devices with this browser on it, either because they don’t know the other browsers are available for android or because they just plain don’t want to mess with changing.
Thanks!
Update: Using Inspect Element in Firefox (desktop), I changed the “#” to “javascript:void(0);” and then it no longer just refreshed. Unfortunately it didn’t expand the menu either. Is there anything I can try here, or is this something that has to be resolved and put into a future minor release?
Hey!
Alright. Please post the website url here, we would like to check it. Also, place the css mod here so that we can test it on our installation.
Best regards,
IsmaelI almost forgot: Where would I go in the code, or what could I do in my child theme’s functions.php or style.css to change the text for the mobile full width submenu button from “Menu” to “What We Do”???
Hi!
Looks like you don’t have have the latest version of the theme, please update to version 3.2. If possible, please use absolute url in the menu items. If you want to change the Menu text, edit the config-templatebuilder > avia-shortcodes > menu.php file. Look for this code:
$mobile_button = $mobile == "active" ? "<a href='#' class='mobile_menu_toggle' ".av_icon_string('mobile_menu')."><span class='av-current-placeholder'>".__('Menu', 'avia_framework')."</span></a>" : "";Cheers!
IsmaelI updated to version 3.2 of the theme. Was able to change the sub menu button text from “Menu” to “What We Do” and change the href=”#” to href=”javascript:void(0);”, but it’s still doing what I described above. The menu opens, but when you click any of the menu items, even though the links do point to the correct URLs, the menu just collapses back, and the page does not change.
I use relative URLs on purpose. WordPress is already enough of a pain to move from one server to another. Besides, these same links work just fine for the desktop left side menu AND for this full width submenu if I allow it to display at desktop widths. In fact they’re the same menu; I just told the full width submenu element to use the existing menu. Also there’s no invisible element on top of the menu items because I do get the hover effects.
So why would the fw submenu links work when it’s horizontal, but not when it’s vertical for mobile???
Actually never mind. I think I figured out how to use that other menu. It can only have one instance for the site, but thanks to the fact that each page has the page id as one of the classes for the body tag, I can adjust the menu’s position for different pages if I need to.
I would’ve liked to been able to use native Enfold elements all the way, but of well. Thanks anyway.
Hi!
What happens when you test it without your modifications (href=”#” to href=”javascript:void(0);”)? The thing is, the full width submenu works on our end without those modification so it’s either a third party plugin or your own modification that is causing the element to not work properly.
Best regards,
IsmaelHi Ismael:
Well as I explained earlier, and as I confirmed again just now, using href=”#” refreshes the page, and the menu does not expand.
Also with its default styling, even though in the ALE the full width submenu is located below the color section at the top of the page, when it’s not in mobile mode, the submenu appears at the very top of the page overlaying the “extra elements” above the main site menu. Once it’s in mobile mode, it’s positioned where it’s supposed to be. Presumably this is due to it being positioned absolutely with a z-index of 301 when not in mobile mode.
In any case, I get these exact same results on anything I test with. I get these results with desktop browsers by resizing their window width. I get these results on my Samsung Galaxy S3 (built in Android browser, Chrome, and Firefox). I get these results on my iPhone 4’s Safari. And to be certain the third party plugin isn’t affecting it, I deactivated that plugin while testing.
Thanks!
Hi Ismael:
I did figure out one thing: In the submenu settings, there’s a checkbox labeled “If checked the menu will stick at the top of the page once it touches it”. If this box is checked, the menu first appears where you initially placed it. So for me it appears underneath the first color section like it’s supposed to. Then if you scroll, it sticks just under the main menu once it gets to the top of the page. If you do NOT check that box, then it first appears at the top of the page, overlaying whatever else is there, instead of where you initially placed it, but it does scroll off top when you scroll the page. This is not the behavior I’d expect. I’d expect it to appear where I initially placed it either way and that the only thing that checkbox should alter is whether or not the menu scrolls off the top of the screen or not.
Thanks!
Hi!
The submenu element on your installation acts quite different from the default or original behaviour of the element. The menu should appear exactly where you placed it whether you disable that option or not. On mobile devices, the “sticky menu” behaviour will be disabled. Please delete the enfold theme then override it with a new one. I noticed that you removed the menu element, please create a test page so that we can check it. If you modified any templates in the child theme folder, please update those files as well.
Best regards,
Ismael
- You must be logged in to reply to this topic.