Problems Fullwidth sub menu and main menu on tablets - Support

Viewing 30 posts - 1 through 30 (of 30 total)

Author

Posts
August 24, 2016 at 2:01 pm #676966

brainxchange
Participant

I’ve searched around the forums and found you fixed this for a number of people and I tried all of those without any success. Any help would be greatly appreciated.

Thanks

https://brainxchange.events/enterprisewear-blog/

August 24, 2016 at 2:25 pm #676976

Basilis
Inactive Moderator

Hey brainxchange!

I am sorry but with your description, we can not understand and define the issue.
Please do explain for us, more clear so we can be able to help you out.

Thanks a lot

Regards,
Basilis

August 24, 2016 at 2:31 pm #676980
brainxchange
Participant
Sorry.

When viewing on an ipad:

1. Main menu shows and not the mobile menu so the left header takes up too much real estate vs just using the mobile menu
2. https://brainxchange.events/enterprisewear-blog/ On this page and many other pages the fullwidth sub menu does not convert to mobile on tablets.
3. Most of the elements are do not look right if you scroll down on tablet you will see all of the gaps and visual problems. (I think this might be caused by the left header (main menu) not converting to mobile to allow for more width of this page.
- This reply was modified 8 years, 3 months ago by brainxchange.
August 29, 2016 at 1:39 pm #678870

Andy
Inactive Moderator

Hi,

Please update the theme to the latest version. That should fix any issues you are currently experiencing :)

To update to the latest version follow the simple instructions here. (Or if you want the super detailed explanation you can read this blog post)

If that does not help, feel free to reply here and we will take a closer look at the issue. In that case please also add your WordPress login credentials (in the “private data” field) so we can take a look at your admin area

Best regards,
Andy

August 29, 2016 at 3:27 pm #678978

brainxchange
Participant

Thanks Andy.

I was not aware of the process of using a child theme and now have made a number of changes to the theme files. Do you have any suggestions on finding all of the changes I’ve made so that I can setup a child theme?

August 30, 2016 at 2:50 pm #679468

brainxchange
Participant

I just updated enfold to the latest version and I’m still having the same issues with menus not looking right on tablets

August 30, 2016 at 8:42 pm #679673

Andy
Inactive Moderator

Hi,

I noticed that you are using a caching plugin. Would you mind opening your plugin’s settings page and temporarily deactivate the caching of your site? Then please try to clear your browser cache and hard refresh the site (Hold CTRL + SHIFT + RELOAD) to see if that solves the issue.

Best regards,
Andy

August 30, 2016 at 8:44 pm #679676

brainxchange
Participant

I just enabled caching after the update so that is not the culprit.

August 30, 2016 at 8:47 pm #679682

Andy
Inactive Moderator

Hi,

please follow the instructions anyway, to make sure it’s not a caching issue. Send us admin access, so we can have a deeper look into it. Are we allowed to deactivate all your plugins temporarily?

Best regards,
Andy

August 30, 2016 at 9:19 pm #679699
brainxchange
Participant
Sure, np. Caching is disabled. Please re-enable all the plugins when you’re done.

Thanks
- This reply was modified 8 years, 2 months ago by brainxchange.
August 30, 2016 at 9:28 pm #679707

Andy
Inactive Moderator

Hi,

at first please update to WordPress 4.6 and let us know if you still need help afterwards.

Best regards,
Andy

August 30, 2016 at 9:33 pm #679711

brainxchange
Participant

Still same problem. To be more specific you will see the issues with menu when using tablet in landscape mode.

August 31, 2016 at 12:01 pm #679910

Andy
Inactive Moderator

Hi,

it’s weird that it’s not working. Please refer to this: http://kriesi.at/documentation/enfold/switching-to-mobile-menu-on-higher-resolutions/

Best regards,
Andy

August 31, 2016 at 2:21 pm #679959
brainxchange
Participant
Still not working. That setting was already enabled and I tried placing the code below in quick css which didn’t do anything after 20 min of refreshing and I tried placing the code in child style.css which didn’t do anything either.
```
@media only screen and (max-width: 1024px) {
#mobile-advanced, #advanced_menu_toggle, #advanced_menu_hide { display: block; }
nav.main_menu { display: none; }}
#wrap_all {
position: relative !important;
}
```
- This reply was modified 8 years, 2 months ago by brainxchange.
August 31, 2016 at 2:56 pm #679993

brainxchange
Participant

I just did a quick test in chrome emulator for tablet and once the width goes over 988 desktop mode is enabled. ipad tablet landscape is 1024px. I’m not sure if this helps find a way to fix this.

August 31, 2016 at 3:29 pm #680018

Andy
Inactive Moderator

Hi,

please remove ALL customizations you did, to check if one is causing this issue. Don’t forget to switch off caching and any plugins.

Best regards,
Andy

August 31, 2016 at 3:42 pm #680037
brainxchange
Participant
I deactivated everything and removed all customizations and the home page menu was still not working. So, I added the code below to quick css and it fixes the home page main nav on tablet issues. However, the https://brainxchange.events/enterprisewear-blog/ fullwidth submenu does not convert to mobile.
```
@media only screen and (max-width: 1024px) {
#mobile-advanced, #advanced_menu_toggle, #advanced_menu_hide { display: block; }
nav.main_menu { display: none; }}
#wrap_all {
position: relative !important;
}
```
- This reply was modified 8 years, 2 months ago by brainxchange.
August 31, 2016 at 4:15 pm #680079

Andy
Inactive Moderator

Hi,

There might be some corrupted files, so please delete all theme files completely via FTP, before installing a fresh copy from your themeforest account. Here is a short tutorial on how to install the theme via FTP, in case you are not sure how that works:

Install Enfold over FTP

Best regards,
Andy

August 31, 2016 at 4:30 pm #680102
brainxchange
Participant
I deleted entire enfold theme folder via filezilla and downloaded fresh copy from themeforest and uploaded enfold folder. Still same problems.

Is there anything in this code that addresses fullwidth submenu?
```
@media only screen and (max-width: 1024px) {
#mobile-advanced, #advanced_menu_toggle, #advanced_menu_hide { display: block; }
nav.main_menu { display: none; }}
#wrap_all {
position: relative !important;
}
```
August 31, 2016 at 4:58 pm #680158

Andy
Inactive Moderator

Hi,

try this solution: https://kriesi.at/support/topic/full-width-sub-menu-more-rows-and-mobile-menu-on-ipad/#post-399877

Best regards,
Andy

August 31, 2016 at 5:00 pm #680165

brainxchange
Participant

Doesn’t work.

August 31, 2016 at 5:10 pm #680170
Andy
Inactive Moderator
Hi,

I put this code into your Quick CSS field:
```
@media only screen and (max-width: 1024px) {
.responsive #top .av-submenu-container {
top: auto !important;
position: relative !important;
height: auto;
}
.responsive #top .av-menu-mobile-active .mobile_menu_toggle {
display: inline-block;
}
.responsive #top .av-menu-mobile-active .av-subnav-menu {
display: none;
}
} 
```
and it seems to work. Can you confirm please?

Best regards,
Andy
August 31, 2016 at 5:14 pm #680177

brainxchange
Participant

It places the mobile menu on the left but nothing happens when you click it. No menu shows up.

August 31, 2016 at 5:18 pm #680179

brainxchange
Participant

I just tested in chrome responsive mode and once I slide above 766px the menu stops working

August 31, 2016 at 5:21 pm #680185

brainxchange
Participant

If you look at this page: https://brainxchange.events/enterprisewear-blog/ at exactly 766px wide this is exactly how I want the page to look and function on tablet landscape mode (1024px).

August 31, 2016 at 5:25 pm #680193
Andy
Inactive Moderator
Hi,

I added this code instead:
```
@media only screen and (max-width: 1024px) {
.responsive #top .av-submenu-container {
top: auto !important;
position: relative !important;
height: auto;
}
.responsive #top .av-menu-mobile-active .mobile_menu_toggle {
display: inline-block;
}
.responsive #top .av-menu-mobile-active .av-subnav-menu {
display: none;
}
.responsive #top .av-menu-mobile-active .av-open-submenu.av-subnav-menu {
display: block;
}
} 
```
Does it work for you now?

Best regards,
Andy
August 31, 2016 at 5:27 pm #680197

brainxchange
Participant

I think this could work but the rest of the page is also not converting to the right mobile look. When I click menu it just opens the desktop menu below. Also, I prefer the menu to be on the right side of the page if possible

August 31, 2016 at 5:35 pm #680216

Andy
Inactive Moderator

Hi,

check again now. What about this?

Best regards,
Andy

August 31, 2016 at 6:15 pm #680255

brainxchange
Participant

That works. Thanks so much for your persistence.

September 1, 2016 at 10:43 am #680600

Andy
Inactive Moderator

Hi,

glad we could help. Let us know in a new ticket if you have some more questions related to the theme. We are happy to assist you.

Best regards,
Andy
Author

Posts

Viewing 30 posts - 1 through 30 (of 30 total)

The topic ‘Problems Fullwidth sub menu and main menu on tablets’ is closed to new replies.