Menu for AMP

Hello @traffickitty

Can you please send some additional information like which template mode and theme you are using for AMP pages?

Also, please share your site URL so we can check and provide helpful suggestions.

Hi,

Thanks for your reply. Im using the theme colorlib.

And my site is: instantwithdrawals org

Thanks a lot.

Hello @traffickitty

For navigation on mobile please download the following plugin as a zip file and install it by following these instructions

Plugin: https://github.com/milindmore22/amp-generic-compat

Once the plugin is installed, active it and follow the next steps mobile navigation.

1. Goto AMP -> AMP Compatibility
2. click Enable checkbox
3. Add the details in input boxes in one row the final result will be someing like this screenshot
4. Add div below Element
5. Add navbar-collapse below Element Class
6. Add in below Element Toggle Class
7. Add button below Action Element
8. Add navbar-toggle below Action Element class
9. Add active below Action Element Toggle Class
10. Once all inputs are in place click save

You also need to add additional CSS goto
Themes -> Customize -> Addtional CSS -> paste below CSS

@media only screen and (max-width: 768px) { 
	html[amp] .navbar-nav > li > .dropdown-menu {
		display: block;
		position: relative;
		background: transparent;
		box-shadow: none;
	}

	html[amp] .dropdown-menu > li > a {
		color:#fff;
	}

	html[amp] .navbar-default .navbar-nav > li > a{
		width:100%;
	}
}

Check the AMP page and verify navigation working (You may need to clear Site cache )
Please let me know if you run into issues.

Hi, thanks a lot.

I see the menu is working, but it doesn’t look good. It uses the top menu I have on my desktop version that has 2 levels, and it opens the first option with all its sublevels by default, instead of working as a cascade. Then the second menu option also has sublevels but it wont open at all.

Can you also help me with this? Thanks a lot, a lot ??

Hello @traffickitty

I added code keeping in default Sparkling theme in mind, no worries we need to slightly update our previous CSS code

just replace the previous CSS code with this new one

@media only screen and (max-width: 768px) { 
	html[amp] .navbar-nav > li > .dropdown-menu {
		display: block;
		position: relative;
		background: transparent;
		box-shadow: none;
                width: 100%;
                padding-left: 30px;
	}

	html[amp] .dropdown-menu > li > a {
		color:#fff;
	}

	html[amp] .navbar-default .navbar-nav > li > a{
		width:100%;
	}
}

Hi,

Thanks a lot for your help. Now the menu looks good but when clicking on the options that have sublevels, those sublevels dont appear, just the main level is clickable, even if there are suboptions.

Can you send me a new fix? Thanks so so much ??

Hello @traffickitty

The fix for the submenu is already included in the CSS snippet, I don’t see it applied can you please confirm if you have added updated CSS in

Appearance -> Customize-> Additional CSS

check if the following CSS exists if not then please add it.

@media only screen and (max-width: 768px) { 
	html[amp] .navbar-nav > li > .dropdown-menu {
		display: block;
		position: relative;
		background: transparent;
		box-shadow: none;
                width: 100%;
                padding-left: 30px;
	}

	html[amp] .dropdown-menu > li > a {
		color:#fff;
	}

	html[amp] .navbar-default .navbar-nav > li > a{
		width:100%;
	}
}

Hi,

I copied this option but I cant open the 2d level options from the menu. If you see the website, you can see that the first level are visible, but when clicking on one of the options that have a sublevel, they dont open.

Do you know what can be wrong? Thanks again for your patience and assistance.

Hello @traffickitty

Can you please try this updated CSS the result should be like this screenshot

Please note that the submenus should be pre-expanded.

@media only screen and (max-width: 768px) { 
    html[amp] .dropdown-menu {
        display:block;
        width:100%;
        position:relative;
        background:transparent;
        padding-left:30px;
        box-shadow:none;
    }

    html[amp] .dropdown-menu>li>a {
        color:#fff;
    }
}

Is not possible to make them expand on click? this menu will literally take the whole screen if I do it this way, as this is not a good solution.
Thanks a lot for your help.

Hello @traffickitty

I will recommend trying AMP plugins reader mode, where you can choose a different AMP Compatible theme of AMP pages.

here is a detailed video explaining how you can use reader mode.

@traffickitty As we haven’t received a response, I’ll mark this as resolved. Feel free to open a new support topic if you continue to encounter issues, or reopen this topic and we’d be happy to assist. Thank you!

It was not solved.

I had no choice but to switch back to another AMP plugin, because I couldnt solve my menu issues.
Thanks a lot for your reply though, but sadly the issue was not solved.

@traffickitty Sorry to hear that we weren’t able to resolve your issue, but thank you for letting us know. If you every do decide to retry the AMP plugin, feel free to get in touch if you need any assistance.