Angular Default Menu on Mobile Devices « Support Forum | Kriesi.at

Support Forum » Angular

Angular Default Menu on Mobile Devices

24 posts from 4 voices

Started 5 months ago by mbesh
Latest reply from Dude
This topic is closed
This topic is not a support question

Tags:

mbesh
Member

I did the following to remove the 'large' mobile menu, and replace it with the 'regular' menu:

You need to deactivate the default menu fallback in js/avia.js - delete following code:

// improves menu for mobile devices
jQuery('.main_menu ul:eq(0)').mobileMenu({
switchWidth: 768, //width (in px to switch at)
topOptionText: jQuery('.main_menu').data('selectname'), //first option text
indentString: ' ' //string for indenting nested items
});

Then add following code to css/custom.css:

#top .mobileMenu {
display: none !important;
}

.js_active .main_menu ul {
display: block !important;
}

But now, when a page first 'loads up' the drop-down menu for "Template Files" shows for a half-second then goes away (with both Safari and Chrome on an iPhone with iOS6, and Firefox on an Android tablet with 4.04). [Doesn't happen on Mac or PC computer browsers---only mobile]:
http://visualimpact.us/wordpress/

Also (only on mobile) the top of the "+", "-", "x" box covers up the bottom of the filtered categories when 'ajaxed':
http://visualimpact.us/wordpress/web-sites-test-page/

Thanks,
Mark

Posted 5 months ago #
Devin
Moderator

Hi Mark,

I'm not getting the dropdown in any of my tests but I don't have anyting running iOS6. I believe Kriesi at this time is the only one with anything running it so he would be the only one able to test for it.

As for the + - overlap, I'm not seeing it anywhere on your site but on the demo there is no overlap on either of the mobile sizes so I'm not quite sure what the issues/difference is. If you can point to a specific page on your site where it is happening, we can check into it further.

Regards,

Devin

Posted 5 months ago #
mbesh
Member

Devin,

The drop down shows up when the page you go to 'loads'.

- Start on Home Page [ http://visualimpact.us/wordpress/ ] and click on the "INTERNET" pic---you will then see it when "internet-nav-test-page" loads)
- You can then click on "WEB SITE NAV. P.H." to see it again---when "web-sites-test-page" loads.

Here's a link of a screen grab to show you how the bottom of the categories are 'obscured':
http://www.4vis.com/Angular-CategoriesObscured.PNG

Thanks,
Mark

Posted 5 months ago #
Devin
Moderator
Hi Mark,

I don't have anything to test this one, but you can try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:
```
@media only screen and (max-width: 767px) {
      #top .template-portfolio-overview { margin-top: 7px;}
  }
```
As for the menu appearing, I'm still unable to see it happening on my end but I've got the rest of the support crew tagged on the topic to see if anyone else can.

Regards,

Devin
Posted 5 months ago #
Nick
Moderator

Hi,

In avia.js file, near the very end and right after the isotope block of code , for me line 2216 (line 2217 has this comment : //variable for storing the menu count when no ID is present.

Look through those functions, and you will see most of them have to do with mobile detection and the menu. I would take them out one at a time while testing. A few of them look real suspicious.

The mobile menu is also referenced on that page at another location.

Thanks,

Nick

Posted 5 months ago #
mbesh
Member

Devin,
Put your code in the custom.css file, nothing changed. Made the margin top 17px, still no change. (I did not want to 'mess around' with what Nick suggested yet---not to put another variable into the 'mix').

Mark

Posted 5 months ago #
Nick
Moderator

Hi,

Please do as I suggest, just make a backup first. Since those functions all reference MobileMenu which you said you no longer want seeing, then there is no need to keep them and I suspect one of them may be firing off to cause that split second view of the drop down menu.

Thanks,

Nick

Posted 5 months ago #
mbesh
Member

Nick,
I do not want to get rid of the drop-down menu---I just don't want it "popping up" for 1/4 second when the page loads.

Posted 5 months ago #
Nick
Moderator

Hi,

Ahhh. I am sorry I completely misunderstood you. I thought that you wanted to remove the large drop-down navigation menu on smaller screen sizes, and the problem was that the menu still pops up for a moment, and you wanted to get rid of the drop down menu completely.

I am a bit confused after reading all your posts again. I am sorry. If you do not want to remove of the large drop down navigation menu, where should it be displayed on the page? Perhaps you are seeing something different than I am, could you post a screen shot?

Thanks,

Nick

Posted 5 months ago #
mbesh
Member

Nick/Devin,
Here's a link to a video of how the "Template Files" dropdown menu appears for a split second after the page selected loads:
http://www.4vis.com/VISI-NewAngularSite-DropdownMenuPopup.mp4

Mark

Posted 5 months ago #
Nick
Moderator

Mark,

I am glad you posted this. I was talking about removing functions that deal with the 'dropdown menu for mobiles' and you probably thought I wanted to remove the main menu dropdown. And I thought its strange that you want to keep something that you removed (dropdown menu for mobiles). Semantics; what can you do...

In any case. I am the only one with an iPad here, so I am is all you got. Don't panic, I am quite competent, and now that everything is fully understood I will run this through a javascript console, see what triggers this event and cull the miscreant. http://i.imgur.com/JWrVh.png

Give me an hour or two please, I will dedicate all my free time to this once my shift ends.

Thanks,

Nick

Posted 5 months ago #
Nick
Moderator
Hi,

I ran the Javascript a few times, and I can now see the problem on Chrome on Windows 7. when emulate touch devices is on.
Have a solution.

1) Remove this from custom.css first
```
.js_active .main_menu ul {
    display: block !important;
}
```
2) and instead add this in its place
```
@media only screen and (max-width: 767px) {
.main_menu ul .sub-menu {
visibility: none;
opacity:0;
display:block;
}
.ajax-portfolio-response-wrapper {
top: 40px;
}}
```
Works.

You can't use !important because inline classes get added by jQuery and they get counterfeited by !important.Problem was that the right class was never hit by anything: .sub-menu.

The other css in there should take care of the ajax portfolio covering up the sortable portfolio item menu, though it may require 2 media queries.

Please let us know how it worked out.

Thanks,

Nick
Posted 5 months ago #
mbesh
Member

Nick,

The menu has now disappeared on the iPhone (on Safari and Chrome)---but it now works fine on a Toshiba "Thrive" tablet with Android 4.

The "filer menu" on the ajaxed page is now fixed at the top, but now the bottom 'border' of the ajaxed project 'chops off' the top half of the title of the first project listed below. ( http://www.4vis.com/Angular-Mobile-AjaxedPAge-TitleCroppedOff.jpg )

The following is what my custom.css looks like:

#top .mobileMenu {
display: none !important;
}

@media only screen and (max-width: 767px) {
.main_menu ul .sub-menu {
visibility: none;
opacity:0;
display:block;
}
.ajax-portfolio-response-wrapper {
top: 40px;
}}

NOTE: Remember, y'all instructed me to remove this from js/avia.js:

// improves menu for mobile devices
jQuery('.main_menu ul:eq(0)').mobileMenu({
switchWidth: 768, //width (in px to switch at)
topOptionText: jQuery('.main_menu').data('selectname'), //first option text
indentString: ' ' //string for indenting nested items
});

Thanks for your efforts!

Mark

Posted 5 months ago #
Nick
Moderator
Hi,

Please add this. Missed that one.
```
.ajax-portfolio-response {
z-index: 2;
}
```
Yes, please add that block back.
Thanks,

Nick
Posted 5 months ago #
mbesh
Member

Nick,
If you meant custom.css, it did not work (and I cleared cookies and data). This is what that looks like:

==========

/* Have fun adding your style here :) - PS: At all times this file should contain a comment or a rule, otherwise opera might act buggy :( */

#top .mobileMenu {
display: none !important;
}

.ajax-portfolio-response {
z-index: 2;
}

@media only screen and (max-width: 767px) {
.main_menu ul .sub-menu {
visibility: none;
opacity:0;
display:block;
}
.ajax-portfolio-response-wrapper {
top: 40px;
}}

==========

If you meant js/avia.js, where do you want it?

Mark

Posted 5 months ago #
Nick
Moderator

Hi,

Who instructed you to remove that chunk of js and add that css anyhow?

The chunk of JS is from avia.js in /js/ folder , line 103-108

Lets see what it looks like with the js re-inserted back.

The CSS from previous post didn't solve: " 'chops off' the top half of the title of the first project listed below."?

Thanks,

Nick

Posted 5 months ago #
mbesh
Member

Nick,
Before I do this, take a look at the first entry in this post---I did it to remove the "standard" large mobile dropdown menu with a 'regular' menu that displays in a computer's browser.

Yes, as I mentioned previously, the CSS you suggested did solve the chopping off of the filtered text ABOVE the project area, but it now chops off the text BELOW the project area ( http://www.4vis.com/Angular-Mobile-AjaxedPAge-TitleCroppedOff.jpg ).

Mark

Posted 5 months ago #
Nick
Moderator

Hi,

I looked through ipad3 and now there are no problems. The menu is visible, no portfolio items are blocking one another in front or in back. So I am not sure what else I can do for you . I think this is a job for the big man himself. I am sending Kriesi a note regarding this support issue and I am sure he will get everything smooth in a flash.

Thanks,

Nick

Posted 5 months ago #
mbesh
Member

Nick,
Right, there's no problem on tablets (mine is a Toshiba Thrive w/ 4.0 Android), since the menu has enough horizontal 'space' to be next to the logo. But, when you view it on a Smartphone (mine is an iPhone4 w/ iOS6), when the menu is supposed to be located below the logo, that's when it 'disappears'. [The short red line at the 'front' (left) of the grey divider line also disappears].

FYI: You can see the problem by viewing in a computer browser and then resize the window width to maybe 1/4 the width of the site---then you'll see the menu 'disappear' and not be under the logo (like it used to be when I did the original code changes. FYI: Here's that original 'post' I followed: http://www.kriesi.at/support/topic/disable-mobile-menu-regular-menu-instead-of-drop-down#post-53419

Mark

Posted 5 months ago #

Dude
Dude

Add following code to css/custom.css to fix the issue:

.js_active .main_menu ul{display: block !important;}

You can also try following code instead:

@media only screen and (max-width: 767px) {
.js_active .main_menu ul{display: block;}
}

Posted 5 months ago #

mbesh
Member

Dude,

Using the first suggestion ( .js_active .main_menu ul{display: block !important;} ) seems to have corrected it---thanks.

The following is what I have in the custom.css. To keep it 'clean', do I need everything in there, or is there a more efficient way to code it?:

============

/* Have fun adding your style here :) - PS: At all times this file should contain a comment or a rule, otherwise opera might act buggy :( */

.js_active .main_menu ul{display: block !important;}

#top .mobileMenu {
display: none !important;
}

.ajax-portfolio-response {
z-index: 2;
}

@media only screen and (max-width: 767px) {
.main_menu ul .sub-menu {
visibility: none;
opacity:0;
display:block;
}

.ajax-portfolio-response-wrapper {
top: 40px;
}}

===========

Mark

Posted 5 months ago #

Dude
Dude

I'm not sure if:

@media only screen and (max-width: 767px) {
.main_menu ul .sub-menu {
visibility: none;
opacity:0;
display:block;
}

is required. I'd replace it with:

@media only screen and (max-width: 767px) {
.main_menu ul .sub-menu {
visibility: hidden;
}

@media only screen and (max-width: 767px) {
.main_menu ul .sub-menu {
display: none;
}

which should work too.

Posted 5 months ago #

mbesh
Member

Dude,

Did use your first suggestion, and it seems to be working fine! (even on a 2+ year Samsung!).

This issue is closed.

Posted 5 months ago #
Dude
Dude

Hey!

Great :)

Best regards,
Peter

Posted 5 months ago #