menu on mobile and tablet view

Hello, my site is currently running on Themify Ultra Child theme. I have noticed that the menu icon for both the mobile and tablet view are currently not working (there is no icon).

I received the following response back from Themify:
"Can you please check to see if you have header.php file in your child theme? The markup for the mobile menu is not valid, so it could be you have an older version of the file in your child theme. If you don't have header.php, please reinstall the parent theme to ensure all of its' filed are in place and up to date.

Also, your child theme stylesheet is loading in the wrong order, this can cause display issues. Please follow this tutorial to make your child theme: https//themify.me/docs/child-theme.

You don't need the @import "../themify-ultra/style.css rule in your style.css either, the theme loads that automatically in the proper place. "

Can you please assist me with any (or all) of these instructions, I'm not confident making these changes myself.

If you are unable to help can you please recommend a trusted WP Developer who can assist me?

Many thanks.

Kristen

  • Patrick Freitas

    Hi Kristen

    Sorry to hear about this issue.

    I had a close look, it appears that is missing the mobile button only, could you please provide the FTP access and I can have a closer look on header.php

    Note: Don't leave your login details in this ticket.

    Instead, you can send us your details using our contact form https://premium.wpmudev.org/contact/#i-have-a-different-question:
    Subject: "Attn: Patrick Freitas"
    - Site login URL
    - WordPress admin username
    - WordPress admin password
    - FTP credentials (host/username/password)
    - cPanel credentials (host/username/password)
    - Folder path to site in question
    - Link back to this thread for reference
    - Any other relevant urls/info
    Have a great day,
    Patrick Freitas

  • Patrick Freitas

    Hi Kristen

    Thank you for share the information, I had a closer look on this.
    I could realize that you were missing the button content between the tag.

    I created a very simple menu using a .png image and now I'm able to see the menu on front end.

    <a id="menu-icon" href="#mobile-menu"><img src="<?php get_site_url(); ?>wp-content/themes/themify-ultra child/images/burger-menu.png" alt=""></a>

    As I said this was very simple example for the problem, you can create a menu using css and HTML, you can find more about it here: https://www.w3schools.com/howto/howto_css_menu_icon.asp
    and you can check this link from our blog https://premium.wpmudev.org/blog/create-custom-animated-burger-menu/

    I would like to give you some advices, first one, be careful when you create any folder on WordPress, actually on any website development, you should use "-" instead spaces, for example the themify-ultra child folder should be themify-ultra-child you can avoid some future issues.

    The second is on this CSS:

    @media screen and (max-width: 979px)
    #headerwrap a#menu-icon {
    
    }

    You can use some position absolute, which would looks like:

    @media screen and (max-width: 979px)
    #headerwrap a#menu-icon {
        display: block;
        text-align: right;
        top: 37px;
        left: 11px;
        z-index: 9999;
        cursor: pointer;
        position: absolute;
    }

    Now you can move the menu and set the position if you want to change it.

    Let me know the results,
    Have a Great Day,
    Best Regards,
    Patrick Freias

  • Kristen

    Hi Patrick,

    Many thanks for your assistance. I can now see the burger menu on my home page in mobile view (thank you).

    Could you please let me know if you are able to assist me to let me know whether I do actaully have the header.php file in the child theme folder? I received the following back from Themify support (which wasn't very helpful):

    About the mobile menu issue, do you have a header.php template file in the child theme folder? The menu icon HTML markup is different than our Ultra theme: https://cl.ly/2d080m081B34. Try to rename the header.php template to something else first (so it will use the parent Ultra’s header.php template). If that fixes the issue, you just have to match the menu-icon HTML like our Ultra’s header.php.

    If I need to make sigifcant changes to the structure to rectify these isssues, I am considering changing themes. My concern is that because some of the content was developed using the Themify builder these changes will not easily transport across to a new theme. The original WP set up was completed by a 3rd party, so I do not know if it is the theme, or the original set up (e.g. creating folders) that are now causing me problems with the site. Any advice on recommended sites and transferability would be very much appreciated.

    Thanks again for your assistance Patrick.

  • Patrick Freitas

    Hi Kristen

    How are you today, as I said what I did was a workaround to show the menu burger icon, however thank you for paste Themify support ticket, I could fix using the screenshot.

    Let me explain.
    Creating a Child Theme allow you to extend the theme and update it later without problem, but when you create a header.php for example, the Parent Theme understands that you want to use the new.php file instead the Parent Theme. In this case you created a header.php and is recreating the struct of theme. I usually copy all content from Parent header.php to Child header.php and modify what I need to modify.

    You can see on the screenshot Themify support that the Parent menu struct is
    <span></span> and it has some classes pre defined.

    So I used:

    <a id="menu-icon" href="#mobile-menu">
              <span class="menu-icon-inner"></span>
    </a>

    Instead

    <a id="menu-icon" href="#mobile-menu">
                <img src="<?php get_site_url(); ?>wp-content/themes/themify-ultra child/images/burger-menu.png" alt="">
    </a>

    Now you are using the native class from Parent Theme, it can avoid the mobile and tablet issue.

    However I used some workaround on css to set the position, you can find on /themify-ultra child/style.css

    @media screen and (max-width: 979px){
       #headerwrap a#menu-icon {
        position:absolute;
        right:11px;
       }
    }
    
    @media screen and (max-width: 979px){
       body.fixed-header.page-loaded #headerwrap.fixed-header a#menu-icon{
        top:15px;
       }
    }

    Feel free to remove or edit it, It was only a workaround to set a menu position for the my reply.

    Have a Great Day,
    Best Regards,
    Patrick Freitas

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.