Create sticky collapsable menu on mobile phone

Actually I hope it’s ok to add something… I’ve just realised on checking another mobile phone (a big HOMTOM) that the menu isn’t centred like I thought (it looks it on my iPhone 5), and the right hand side of the menu goes off the right hand side of the screen. This means you can’t see sub menu items (we have three under our about us main menu item).

If it’s not too much trouble I’d love to know how to fix this problem too ??

Many thanks

but I can’t get it to collapse after being clicked

I can’t replicate this. When I emulate mobile using my browser I can press the “Menu” button to open the menu and close it. Would you be able to provide a list of steps to replicate the problem? Also, can you provide more details of the device that the issue occurs in?

and the right hand side of the menu goes off the right hand side of the screen

This might fix it..

.custom-logo-link img, 
body.home.title-tagline-hidden.has-header-image .custom-logo-link img, 
body.home.title-tagline-hidden.has-header-video .custom-logo-link img {
    max-width: 100%;
}

@media screen and (min-width: 550px) {
  .custom-logo-link img, 
    body.home.title-tagline-hidden.has-header-image .custom-logo-link img, 
    body.home.title-tagline-hidden.has-header-video .custom-logo-link img {
        max-width: 550px;
    }
}

Hi @anevins, sorry I think I was a bit unclear in my post – I can indeed click on ‘menu’ at the top and the menu closes, I was hoping that it would just ‘auto-collapse’ after getting to the correct place on the page. Maybe I’m being too fussy!!

I’m trying this on three phones – an iPhone 5, an iPhone 7 and a HOMTOM HT20.

The code hasn’t worked unfortunately. I’ve tried several different pieces of code to centre the logo and menu on mobile devices in the last day or so – again testing on all three phones – but nothing has worked so far!

Thanks for your help ??

Regarding the auto-collapsing, I see the issue. This will require some additional JavaScript.

I’m going to write this as though we didn’t have a converastion about main.js already, so that people who visit this topic in future can also implement the same thing.

This will require an additional JavaScript file, but you will need to set up a Child Theme first.

Steps:

1. Create a Child Theme: https://codex.www.ads-software.com/Child_Themes
2. Create a new ‘main.js’ file inside your Child Theme folder
3. Edit the ‘main.js’ file from inside your Child Theme and replace all of its contents with the contents of this Pastebin file: https://pastebin.com/BPMFMsMV
4. Edit your Child Theme functions.php file
5. Enqueue your ‘main.js’ file by adding the following PHP code:

   
   wp_enqueue_script('child-theme-scripts', get_theme_file_uri( '/main.js' ), array( 'jquery' ), false, true );
   

Let me know how that goes.

• This reply was modified 7 years, 1 month ago by Andrew Nevins.

Thank you Andrew
These steps resolve the issue perfect!
(I hadnt a main.js so far, but created a new one and I had no troubles running it together with the existing global.js)

I finally got around to this just now, and it worked perfectly! Thanks so much!

Hi, i am using twenty seventeen theme, i made some changes on my home page.
Now i have a problems when view it on mobile, the menu can’t click on.
Can anyone help me to solve this problems?

Thanks.

Hi there. I was looking for a solution to the mobile Twenty Seventeen menu closing when a link is clicked.
This works but, I have pop up windows (like lightbox) on my site for video and images (two different plugins that use PrettyPhoto and FancyBox)
The script mentioned here causes a problem with the pop-ups but only on Safari (it’s always Safari!!

Basically, with this code, when clicking the video or image lighbox popups, they don’t open and the Safari browser jumps to the top of the page. If you then scroll back down to the video / image, it will open . But, if you close the lighbox and try again, it scrolls to the top again.

Any ideas why this might be? (I Know this is quite an old initial topic)

@morphim, Sorry to hear you’re having problems. Would you be able to open a new thread about this? You can link back to this thread for reference.

https://www.ads-software.com/support/theme/twentyseventeen/#new-post

Sure. Thanks for the prompt reply : )