Hamburger icon not displaying on ipad portrait or landscape - Support

Tagged: enfold mobile menu, hamburger icon

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

Author

Posts
August 23, 2017 at 6:26 pm #843210
xuamox
Participant
Hi,

For some reason, my mobile icon is not displaying when using an ipad in portrait or landscape view. Instead, my menu is wrapping.

I tried solutions from 2015 and 2016 but they did not work with the latest version of Enfold.

I tried this:
one solution
but then nothing is displaying – no menu and no hamburger icon.

The iphone is displaying the mobile icon

Also how can you add more space between logo and hamburger icon?
- This topic was modified 7 years, 3 months ago by xuamox.
August 24, 2017 at 6:14 pm #843639

xuamox
Participant

Dear Enfold Team,

Your support staff used to answer questions on the same day. Lately I have noticed that it’s taking longer and longer to get support. We are paying good money for a theme that is supposed to include support, and as designers trying to run a business we need fast response to our inquiries. How can you improve the level of service that you give your clients?

August 25, 2017 at 10:18 pm #844203

xuamox
Participant

Hi Team,
I am still waiting to get some help with this little bug. Can you give me an idea of when your customer support team will be able to respond so that I can relay that information to my client? Thanks.

August 26, 2017 at 9:58 pm #844445

xuamox
Participant

Hi, I still have not heard back from anyone yet regarding this issue. I am trying to complete a website here.

August 28, 2017 at 4:56 am #844639
Ismael
Moderator
Hi,

We are very sorry for the late response.

Please remove the modifications then go to the Enfold > Main Menu > General panel. Set the “Menu Items for mobile” to the second option then add the CSS code to force the mobile menu to display when the screen width is less than 1366px.
```
@media only screen and (max-width: 1366px) and (min-width: 768px) {
  .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item {
    display: none;
  }

  .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item-avia-special {
      display: block;
  }
}
```
Best regards,
Ismael
August 30, 2017 at 2:46 am #845548

xuamox
Participant

Thank you, that worked, but the hamburger menu is wrapping underneath the logo under ipad landscape view.
On mobile it works fine.

Thanks,

Eric

August 30, 2017 at 8:54 am #845690
Ismael
Moderator
Hi,

Please include this css code inside the css media query.
```
.responsive #top .av_mobile_menu_tablet #header_main_alternate {
    display: none;
}
```
Best regards,
Ismael
August 30, 2017 at 6:36 pm #845911

xuamox
Participant

Adding the last css code made things worse. It made the entire hamburger menu and standard menu disappear on all devices.

September 1, 2017 at 9:55 am #846743

Ismael
Moderator

Hi,

Did you add it inside the css media query as suggested?

Best regards,
Ismael

September 5, 2017 at 6:59 pm #848285
xuamox
Participant
Hi,

This is what I have so far and it still has not resolved my issue.

Not sure what is casuing the menu hamburger icon to wrap under the logo on ipad landscape mode.
```
@media only screen and (max-width: 1366px) and (min-width: 768px) {
  .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item {
    display: none;
  }

  .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item-avia-special {
      display: block;
  }

.responsive #top .av_mobile_menu_tablet #header_main_alternate {
    display: none;
}

}
```
- This reply was modified 7 years, 2 months ago by xuamox.
September 6, 2017 at 5:20 pm #848766

Victoria
Inactive Moderator

Hi xuamox,

Glad you got it working for you! :)

If you need further assistance please let us know.

Best regards,
Victoria

September 6, 2017 at 9:18 pm #848842

xuamox
Participant

Hi Victoria,

I did not get the code to work. I still have the issue that the hamburger icon menu wraps under the logo on ipad landscape mode.
Not sure what is causing this to happen.

Thanks,

Eric

September 7, 2017 at 5:04 am #848944

Ismael
Moderator

Hi,

I don’t see the css modification when I checked the page. Make sure that there are no invalid css modifications, check for missing curly braces. Or post the login details here so that we can inspect the modification.

Best regards,
Ismael

September 19, 2017 at 9:04 pm #854035
xuamox
Participant
The following code modification is not working properly. It’s hiding both the regular and hamburger menu at this size:

‘@media only screen and (max-width: 1366px) and (min-width: 768px) {

.responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item {
display: none;
}

.responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item-
avia-special {
display: block;
}

.responsive #top .av_mobile_menu_tablet #header_main_alternate {
display: none;
}

}’

I have removed the code you suggested because it is not working properly.

Thanks for your help.
- This reply was modified 7 years, 2 months ago by xuamox.
September 20, 2017 at 7:37 am #854226
Ismael
Moderator
Hi,

The css code is not working because you have that old css modification. Please remove it then use our recent suggestion.
```
@media only screen and (max-width: 1366px) and (min-width: 768px) {
  .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item {
    display: none;
  }

  .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item-avia-special {
      display: block;
  }
}
```
Don’t forget to change Enfold > Main Menu > Menu Items for mobile to the second option. Remove browser cache or hard refresh before checking the page.

Best regards,
Ismael
September 21, 2017 at 12:31 am #854619

xuamox
Participant

Hi,

Thanks for all your help thus far.

I did everything that you said, and we are getting closer, but I still have the issue that when you look at it on an iPad landscape, the hamburger menu
wraps under the logo.

1.swapped out code with the most recent
2.cleared caches
3. double checked setting for the mobile menu to ensure the second option is selected.

September 21, 2017 at 1:05 pm #854809
Ismael
Moderator
Hi,

Thank you for the info.

Please add the following css code at the very bottom of the css modifications.
```
@media only screen and (max-width: 1024px) and (min-width: 768px) {
     .responsive #top .av_mobile_menu_tablet #header_main_alternate {
        display: none;
     }

    .responsive #top #wrap_all .av_mobile_menu_tablet .main_menu {
       top: 0;
       left: auto;
       right: 0;
       display: block;
   }
}
```
Best regards,
Ismael
September 21, 2017 at 6:28 pm #855001

xuamox
Participant

Hi Ismael,

Thank you for your help. I really appreciate it. This fixes the problem for 1024.
But if I use a common size like 1366 x 768 I still get the hamburger wrapping underneath my logo.
What I am trying to understand is why this even happens. The menu should be either the regular menu or the hamburger menu to on the far right.
The hamburger menu should never wrap under the logo. What is causing this and is it a bug? or something else?

Thanks,
Eric

September 22, 2017 at 9:04 am #855248

Ismael
Moderator

Hi,

It’s not a bug. It’s not working as it should because we adjusted the css codes. We modified the code in the Quick CSS field. It’s working normally now.

Best regards,
Ismael

September 29, 2017 at 2:37 am #858286

xuamox
Participant

Thanks for all your help with this fix

September 29, 2017 at 11:31 am #858432

Ismael
Moderator

Hi,

No problem. Let us know if you need anything else.

Best regards,
Ismael
Author

Posts

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

The topic ‘Hamburger icon not displaying on ipad portrait or landscape’ is closed to new replies.