Support » Theme: Twenty Seventeen » Create sticky collapsable menu on mobile phone

  • Resolved carobcn

    (@carobcn)


    Hi there,

    I have used some CSS to make the menu of my site sticky on a smartphone, but I can’t get it to collapse after being clicked, and due to the proportions the menu then takes up most of the screen. (You can of course click to close it so this isn’t a disaster, it would just be better.)

    Is there some code to handle both the sticky menu AND collapse, or can someone suggest something for the collapsing part? It’s possibly due to my lack of knowledge with JQuery (/anything technical) that it’s not working as I have pasted a couple of pieces of code to no avail so far.

    Thank you so much!

    PS – here is the CSS I have used just for the sticky menu:

    @media screen and (max-width: 767px) {
    .navigation-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    }
    .admin-bar .navigation-top {
    padding-top: 45px; // Padding to allow space for the admin-bar when present
    }
    }

    The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)
  • 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

    Moderator Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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 πŸ™‚

    Moderator Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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.wordpress.org/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 1 year, 9 months 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)

    Moderator Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    @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://wordpress.org/support/theme/twentyseventeen/#new-post

    Sure. Thanks for the prompt reply : )

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Create sticky collapsable menu on mobile phone’ is closed to new replies.