Mobile Menu not scrolling in iPhone

This topic has 17 replies, 4 voices, and was last updated 6 years by Radu.

Author
April 13, 2018 at 19:39 #194631

nextgenerationyoga
Participant

Hi there. I am having an issue with the menu when it goes to mobile version. Clicking on the hamburger in iPhone brings down the menu – but it ‘s a long menu and for some reason it gets stuck and does not scroll down. On occasion I have found that it will scroll down when you hold a little longer on the menu, but just swiping will make it stay at the top.

Is there a fix for this?

Also, is there a way to make it so that we see just the parent choices and then when the parent is tapped the child options show?

If this is not an option, does Uber menu allow for this? I am also considering a mobile first option plugin for the mobile menu.

Thanks!

April 14, 2018 at 08:19 #194669

Laura
Moderator

Hello, will assign the ticket to a higher support level who can help and advise you in your query.
Thanks! ?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

April 14, 2018 at 21:23 #194754

Kieran_SQ
Moderator

Hi,

The issue you’re seeing on the iPhone is also present on Android devices, further, your cart icon is not appearing.

It looks like you have the latest version of KLEO but old versions of K Elements and WP Bakery (formerly Visual Composer) installed. Please go to WP Admin > Appearance > Install Plugins and take the outstanding updates for these two plugins (and any others that are pending).

Once you have installed these updates please completely purge your website cache (via WP Admin), purge any CDN (via your host or directly at the CDN control panel) and then completely purge all cached data in the mobile device browser except for form data and passwords.

Refresh your site and check again to see if the issue is resolved or not.

If it isn’t resolved then please update this ticket, in a private reply, with newly created admin credentials (in English) so I can look into this further for you.

Thanks,

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

April 16, 2018 at 21:06 #195043

nextgenerationyoga
Participant

Thank you. I will try this out and let you know if there is still an issue.

April 16, 2018 at 21:22 #195047

Kieran_SQ
Moderator

Keep me posted 🙂

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

April 16, 2018 at 22:50 #195063

nextgenerationyoga
Participant

This didn’t seem to work. Instead of troubleshooting this issue, I am going to go another way that will look better on mobile than this.

Can you please tell me how I can hide the header in mobile view? I have decided I want a better mobile menu as there are no options on how the mobile menu is displayed that I can see and it’s just too cumbersome. I would like to use a plugin that has a better mobile first display of the menu.

Therefore I need to have the Kleo header disappear so the other mobile menu will be the only one on the page in mobile view.

Thanks! I look forward to this information.

April 16, 2018 at 22:55 #195065

Kieran_SQ
Moderator

Hi,

I will forward this ticket to one of our developers for insight into your secondary query. They’ll be in touch with you as soon as they can, Monday to Friday, East European Time.

Thank you for your patience,

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.
April 17, 2018 at 15:45 #195099

Radu
Moderator
Hi,

For the scrolling in the menu for many items under mobile view add this css and let me know if you are able to scroll now
COPY CODE
```
@media (max-width: 991px) {
    #header .navbar-nav {
        overflow: auto !important;
    }
    .kleo-main-header.header-normal>.container .primary-menu, .kleo-main-header.header-normal>.container .secondary-menu {
    overflow:auto !important;
}
}
```
the header can be hidden under mobile view using this css
COPY CODE
```
@media(max-width:768px) {
    .kleo-main-header.header-normal {
        display: none;
    }
}
```
The css will be added to wp-admin -> theme options -> General settings -> Quick CSS

Let me know
Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?
April 18, 2018 at 19:17 #195282

nextgenerationyoga
Participant

Thank you for the reply to this question. This information is so super helpful!

One last question. Is there a way to have the menu minimized so that just the parent menu items show and the child menu items can be seen when clicked so the menu isn’t so long?

Just a thought to use what’s already there.

Thank you so much for your time. I am grateful for your responses.

April 19, 2018 at 15:53 #195349

Radu
Moderator

Hi,
They are grouped like that by default

See it in action on our demo, make sure to arrange the items like this on mobile

https://seventhqueen.com/themes/kleo/members/kleoadmin/

Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

April 19, 2018 at 21:51 #195396

nextgenerationyoga
Participant

Thank you for the information and the screen shot. I will get a scree shot of my back end, but they are set up the same way as child pages, but they show up as already expanded. I do not see any settings to change that.

I will double check my css in the child theme – but so far I do not see why they would automatically be expanded.

Any insight would be so helpful!
Thanks!

April 20, 2018 at 00:16 #195409

nextgenerationyoga
Participant

Here is the screen capture of the structure. I see no settings in our child CSS that would indicate having the menu expanded or not.

Attachments:
You must be logged in to view attached files.
April 20, 2018 at 16:56 #195446

Radu
Moderator
Odd,

Try to update the theme to latest versio.
De-activate all plugins beside the child theme then see if it looks as demo.
If still not works let me know what php version are you runing and provide the debug.log file

Follow these steps to enable wp debug:
- Connect to your server by FTP
- Look in root directory of your WordPress install and open wp-config.php
- Search for define( ‘WP_DEBUG’, false ); and change FALSE value to TRUE
COPY CODE
```
define( 'WP_DEBUG', true );
```
- After this line add this:
COPY CODE
```
define( 'WP_DEBUG_LOG', true );
```
WP_DEBUG_LOG is a companion to WP_DEBUG that causes all errors to also be saved to a debug.log log file inside the /wp-content/ directory. This is useful if you want to review all notices later or need to view notices generated off-screen (e.g. during an AJAX request or wp-cron run).

Repeat the described actions and then check the debug.log file and let me know what error appears.

After you have disabled the plugins try to see if the error persists.

Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?
May 1, 2018 at 06:53 #196487

nextgenerationyoga
Participant

Hi there,
Thank you for the information.

I am running the latest version of Kleo parent on my site.
I have deactivated all of the plugins and the problem was still there, turning them off did not make a difference.
I removed all of the CSS that was put into the child theme specific to the media/mobile and found something in there was causing the menu to immediately show expanded and not closed or close down.

Now that the CSS is removed, it shows up closed, however the scrolling issue is back again and I have installed your code into the child CSS, but it still has an issue sometimes.

Could there be an issue with the number of items in the menu?
Should I still go in and turn the debug on in WordPress?

Thank you for your assistance on this.

May 1, 2018 at 06:53 #196488

nextgenerationyoga
Participant

I forgot to mention that I am using PHP 5.6 on my site.
May 2, 2018 at 18:26 #196605

Radu
Moderator
Hi,

No, no need to debug and there is no issue with the menu items…

Use this css will make the caret (+ sign ) to appear on expendable tabs nto sure why not appears
COPY CODE
```
#header .navbar-nav li .caret {
    width: 20px;
    height: 20px;
    background: #50485b !important;
    border-radius: 26px;
}
#header .navbar-nav li .caret:before {
    content:" + ";
    text-align:center;
    padding:3px;
    color:#fff;
}
```
So it should be ok from my point of view, right ?

Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?
May 2, 2018 at 23:36 #196654

nextgenerationyoga
Participant

I am gathering further information – but the website owner is very frustrated as it is still not working on her iPhone 6.

She said it does not scroll on her phone.

I will submit more information as soon as I receive it.

Thanks!

May 3, 2018 at 17:19 #196716

Radu
Moderator

Hi,

As how i said that should be by default not sure why that, maybe plugins custom css or child theme make menu like that. Anyway i’ve provided you a workaround, make sure to empty all caches/cloudflare/iphone cache.

Let me know if i can help you with something else.

Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?
Author

Posts