[Support request] secondary menu not responding on mobile & can't move menu location

[Michael Loguidice]

Hi there,

I have a secondary menu that works fine on desktop. But for mobile there are 2 issues:

1. It is all the way to the very bottom of the page on mobile, way below all the comments, content, etc., way too hard to find… I would like this at the top of the page in a prominent location. How to do this?

2. Also, the secondary menu is unresponsive in mobile, it won’t open. I use android, but have no iphone option to test on…

Can you suggest any fixes for these issues?

Thank you,
Michael

[Tom]

Hi there,

We can use javascript to clone the menu and display it under the header.

1. Create a Hook Element: https://docs.generatepress.com/article/hooks-element-overview/
2. Add wp_footer as the hook.
3. Add this as the content:

<script>
    var target, nav, clone;
    nav = document.getElementById( 'secondary-navigation' );
    if ( nav ) {
        clone = nav.cloneNode( true );
        clone.className += ' sidebar-nav-mobile';
        clone.setAttribute( 'aria-label', 'Mobile Menu' );
        target = document.getElementById( 'site-navigation' );
        if ( target ) {
            target.insertAdjacentHTML( 'afterend', clone.outerHTML );
        } else {
            document.body.insertAdjacentHTML( 'afterbegin', clone.outerHTML )
        }
    }
</script>

4. Set the Display Rules to “Entire Site”.

I’m not sure why the mobile menu isn’t opening. Any chance you can deactivate your other plugins to check for conflicts?

Let me know 🙂

[Michael Loguidice]

Hi Tom,

I did add the code in wp_footer, but now it is actually above the main menu. I don’t know if there would be any other options for placement, if not maybe I could just name it something different?

Also, it still won’t open and I’ve disabled all plugins to check it. Actually, I don’t know if it has ever worked on mobile, I’m not sure I actually tried b/c it had always been hidden so far down the page. But there are no problems on desktop.

Any other ideas?

Thanks!
Michael

[Tom]

I just adjusted the code above so it should appear after the primary navigation.

As for the toggle issue, there must be a conflict somewhere.

Any javascript added to the site? Maybe via Hooks? Everything using the latest versions?

[Michael Loguidice]

OK, so I applied the new code and its perfect, secondary menu is under the primary menu. DONE!

I don’t know where any javascript might be, other than Hooks and Custom CSS, and here’s all I have…

…in the GP Hooks:

“before Header”

<script id=”mcjs”>!function(c,h,i,m,p){m=c.createElement(h),p=c.getElementsByTagName(h)[0],m.async=1,m.src=i,p.parentNode.insertBefore(m,p)}(document,”script”,”https://chimpstatic.com/mcjs-connected/js/users/daa4c357c19a9237371335e9e/5cd483ca5067840676b79731b.js&#8221;);</script>

“after Footer content”

<script>
(function(i,s,o,g,r,a,m){i[‘GoogleAnalyticsObject’]=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,’script’,’//www.google-analytics.com/analytics.js’,’ga’);

ga(‘create’, ‘UA-60618800-1’, ‘auto’);
ga(‘send’, ‘pageview’);

</script>

In the Custom CSS I have this:

.wp-caption .wp-caption-text {
background: transparent;
padding: 2px 0;
color: #616149;
text-align: center;
position: relative;
}

@media (max-width: 768px) {
.site-header {
background-position: top center;
padding-top: 240px;
background-size: 200px;
}

[Tom]

Are you using the latest version of the theme and GP Premium? What if you disable that first hook?

[Michael Loguidice]

Sorry for the delay. Disabling that hook didn’t help. And I’m not using premium, could that be the difference??

[Tom]

How are you not using Premium if you’re using Hooks and the Secondary Nav?

[Michael Loguidice]

No actually, you’re correct I am using premium. It never occurred to me. Sorry.

Do you still think it’s a conflict issue somewhere?

[Tom]

There must be a conflict, as it’s working on all of my tests and we haven’t received any other reports of it not working.

Do you have a staging site you can test on? That way you can deactivate all plugins, custom CSS and functions and I can take a look at it without affecting your live site.

Let me know 🙂

[Michael Loguidice]

Yes, I have a staging site set up now. Do you need back office access?

[Michael Loguidice]

I have deactivated all the plugins including custom CSS plugin…

https://staging1.truehealthtruelife.com/

Let me know if you need me to activate any plugin, etc.

Thank you!!

[Tom]

Cool! Looks like it’s behind a username/password. Feel free to send us access through our contact form: https://generatepress.com/contact

Just be sure to mention this topic.

Thanks! 🙂

[Author]

Posts