• Resolved traffickitty

    (@traffickitty)


    Hi,

    I would like to know if theres a way to add a special menu for amp pages, instead of the regular one I use on desktop.

    I read some old posts, but hope there is a solution by now.

    Thanks a lot.

Viewing 14 replies - 1 through 14 (of 14 total)
  • Plugin Support Milind More

    (@milindmore22)

    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.

    Thread Starter traffickitty

    (@traffickitty)

    Hi,

    Thanks for your reply. Im using the theme colorlib.

    And my site is: instantwithdrawals org

    Thanks a lot.

    Plugin Support Milind More

    (@milindmore22)

    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.

    Thread Starter traffickitty

    (@traffickitty)

    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 ??

    Plugin Support Milind More

    (@milindmore22)

    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%;
    	}
    }
    Thread Starter traffickitty

    (@traffickitty)

    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 ??

    Plugin Support Milind More

    (@milindmore22)

    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%;
    	}
    }
    Thread Starter traffickitty

    (@traffickitty)

    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.

    Plugin Support Milind More

    (@milindmore22)

    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;
        }
    }
    Thread Starter traffickitty

    (@traffickitty)

    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.

    Plugin Support Milind More

    (@milindmore22)

    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!

    Thread Starter traffickitty

    (@traffickitty)

    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.

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Menu for AMP’ is closed to new replies.