Support » Plugin: AMP » Kadence hamburger mobile menu

  • Hi,

    I want my website to go AMP standard, but my hamburger mobile menu is not working. It is a straightforward one layer menu with four links.

    I am using the Kadence theme with a child where I customise some CSS. Nothing too terrible (pasted at the bottom of the message).

    Here is the list of my active plugins (no website builder nonsense):
    – Cookie and Consent Solution for the GDPR & ePrivacy https://wordpress.org/plugins/iubenda-cookie-law-solution/
    – Google Authenticator https://wordpress.org/plugins/google-authenticator/
    – Gravity Forms: https://www.gravityforms.com/
    – Gragrid: Gravity Forms + SendGrid https://wordpress.org/plugins/gragrid/
    – Gravity Forms Multilingual: https://wpml.org/documentation/related-projects/gravity-forms-multilingual/
    – Gravity Forms SendGrid Add-On: https://www.gravityforms.com/add-ons/sendgrid/
    – Heroic Knowledge Base https://herothemes.com/
    – Redirection WPML Multilingual CMS
    – Site Kit by Google https://wordpress.org/plugins/google-site-kit/
    – WPML Multilingual CMS https://wpml.org/

    I am hosted on AWS with CloudFront and use the standard aws bitnami image.

    I’ve left AMP standard ON so you can have a look even if my menu does not work on mobile as my traffic is currently minimal, and I would love to sort this out now before I grow.

    Thank you very much for your advice.

    Henri

    /*!
    Theme Name: DearReal using Kadence Child
    Theme URI: https://www.kadencewp.com/kadence-theme/
    Template: kadence
    Author: Kadence WP
    Author URI: https://www.kadencewp.com/
    Description: A child theme for the Kadence Theme.
    Version: 1.0.1
    License: GNU General Public License v3.0 (or later)
    License URI: https://www.gnu.org/licenses/gpl-3.0.html
    Text Domain: kadence-child
    */
    
    /* Theme customisation starts here
    -------------------------------------------------------------- */
    .wp-block-column img {
    	display: flex;
    	margin-left: auto;
    	margin-right: auto;
    }
    .block-burgundy, .block-pink, .block-paleblue, .block-white {
    	display: flex;
    	max-width: 1290px;
    	min-height: 200px;
    	margin-right: auto;
    	margin-left: auto;
    	margin-bottom: 0 !important;
    }
    .block-burgundy h2, .hkb-searchbox__title, .archive-title {
    	color: white;
    	font-weight: 400;
    }
    .block-burgundy h1 {
    	color: white;
    	font-weight: 400;
    	font-size: 45px;
    }
    .block-burgundy {
    	background-color: #a74646;
    	color: white;
    }
    .block-pink {
    	background-color: #fff5f5;
    }
    .block-paleblue {
    	background-color: #E8F3F6;
    }
    .block-white {
    	background-color: #ffffff;
    }
    
    .side-for-big-screens-burgundy, .side-for-big-screens-pink, .side-for-big-screens-paleblue, .side-for-big-screens-white {
    	margin-bottom: 0 !important;
    }
    .side-for-big-screens-burgundy {
    	background-color: #a74646;
    }
    .side-for-big-screens-pink {
    	background-color: #fff5f5;
    }
    .side-for-big-screens-paleblue {
    	background-color: #E8F3F6;
    }
    .side-for-big-screens-white {
    	background-color: #ffffff;
    }
    
    .page-header {
    	height: 130px;
    }
    .page-header h2 {
    	text-align: center;
    	margin-top: 16px !important;
    }
    .page-header p {
    	text-align: center;
    }
    
    .phone-image-cut-bottom {
    	padding-top: 24px;
    	align-items: flex-end;
    }
    .phone-image-cut-top {
    	padding-bottom: 24px;
    	align-items: flex-start;
    }
    .image-top-bottom-space {
    	padding-bottom: 16px;
    	padding-top: 16px;
    }
    
    .block-why{
    	height: 170px;
    }
    .why-boxes {
    	background-color: white;
    	height: 300px;
    	display: flex;
    	z-index: 1;
    	flex-direction: column;
    	align-items: center;
    	color: #2D3748;
    	margin-bottom: 20px;
    	margin-left: auto;
    	margin-right: auto;
    	font-size: 15px;
    	max-width: 280px;
    	border-radius: 80px;
    	border-style: solid;
    	border-width: 4px;
    	border-color: #994040;
    }
    .why-boxes H3 {
    	padding-top: 20px;
    }
    .why-boxes .wp-block-image {
    	margin-bottom: 8px !important;
    }	
    /* End Of content blocks */
    
    /* Language switcher */
    
    .wpml-ls {
    	margin: auto;
    }
    
    .wpml-ls-native {
    	color: white;
    	font-size: 16px;
    	padding-top: 10px;
    	padding-right: 10px;
    	padding-bottom: 10px;
    	padding-left: 25px;
    }
    
    .wpml-ls-flag {
    	width: 54px;
    	height: 36px;
    }
    .wpml-ls-flag:hover {
    	transition: .5s ease;
    	opacity: 0.5;
    }
    .wpml-ls-native:hover {
    	transition-duration:0.5s;
    	color: #343434 !important;
    }
    
    /* End Of Language switcher */
    
    .site-footer a {
    	font-weight: 400;
    }
    
    .widget-area a:hover {
    	text-decoration: none !important;
    }
    
    #menu-footer-menu-1 a:link, #menu-footer-menu-1-french a:link, #menu-footer-menu-1-french a:visited, #menu-footer-menu-2 a:link, #menu-footer-menu-1 a:visited, #menu-footer-menu-2-french a:link, #menu-footer-menu-2 a:visited, #menu-footer-menu-2-french a:visited {
    	color: white !important;
    	width: 150px;
    	height: 50px;
    }
    
    #menu-footer-menu-1 a:hover, #menu-footer-menu-1-french a:hover, #menu-footer-menu-2 a:hover, #menu-footer-menu-2-french a:hover {
    	text-decoration: none;
    	color: #8A8A8A !important;
    	width: 150px;
    	height: 50px;
    	transition-duration:0.5s;
    }
    
    /* primary menu links */
    #primary-menu li {
    	flex-grow: 1;
    }
    /* mobile */
    
    @media screen and (max-width: 783px), @media screen and (max-width: 783px) and (orientation: landscape) {
    /* Formating the footer */
    	.site-top-footer-inner-wrap {
    		grid-template-columns: 1fr 1fr !important; 
    	}
    	.site-footer-top-section-1 {
    		grid-column-end: span 2;
    	}
    	.site-footer-top-section-4 {
    		grid-column-end: span 2;
    	}	
    	
    /* formating diversity icons on the why page */
    	.foryou-nowrap {
    		flex-wrap: nowrap;
    	}
    /* changing the order of the images */
    	.onmobile-change-image-to-one {
    		order: 1;
    	}
    	.onmobile-change-text-to-two {
    		order: 2;
    		margin-bottom: 16px;
    	}
    	
    	/* making two images appear side by side */
    	.profiles-nowrap {
    		flex-wrap: nowrap;
    	}
    
    /* moving why boxes burgundy over pink */
    	.block-why{
    		min-height: 620px;
    	}
    	.why-boxes {
    		position: relative;
    		top: -8px;
    	}
    
    }
    
    /* desktop and tablet */
    @media screen and (min-width: 783px) {
    	.mainmenu-link-css a, .mainmenu-link-css a:visited {
    		color: #2D3748 !important;
    		display: block;
    		flex-grow: 1;
      		text-align: center;
    	}	
    	.mainmenu-link-css a:active, .mainmenu-link-css a:hover {
    		color: #A74646 !important;
      		display: block;
    		flex-grow: 1;
    	}
    	
    /* moving why boxes burgundy over pink */
    	.why-boxes {
    		position: relative;
    		top: 80px;
    	}
    }
    
    @media only screen and (max-width: 1290px) {
    	 .block-burgundy, .block-pink,  .block-paleblue, .block-white {
    		padding-left: 8px;
    		padding-right: 8px;
    	}
    }
    
    /* Format forms  */
    
    	.gform_validation_container, .gfield_label {
    		display:none;
    	}
    
    	.gform_button {
    		margin: 0;
    		height: 50px;
    		width: 300px;
    		border-bottom-left-radius: 0 !important;
    		border-top-left-radius: 0 !important;
    }
    
    	.ginput_container input {
    		border-bottom-right-radius: 0 !important;
    		border-top-right-radius: 0 !important;
    }
    
    	.call-to-action {
      align-items: center;
    }
    
    @media only screen and (max-width: 600px) {
    		.ginput_container input {
    			border-bottom-right-radius: 0 !important;
    			border-bottom-left-radius: 0 !important;
    			border-top-right-radius: 3px !important;
    			border-top-left-radius: 3px !important;
    	}
    
    		.gform_button {
    			border-bottom-left-radius: 3px !important;
    			border-bottom-right-radius: 3px !important;
    			border-top-left-radius: 0 !important;
    			border-top-right-radius: 0 !important;
    	}
    }
    
    /* Format for Form 3 Early Bird (english)  */
    
    body #gform_wrapper_3 form {
    	display: grid;
    	grid-auto-flow: column;
    	grid-template-columns: 50% 50%;
    	grid-gap: 0;
    }
    body #gform_wrapper_3 .gform_body {
    	justify-self: right;
    }
    
    body #gform_wrapper_3 .gform_footer {
    	margin-top: 0;
    	padding-top: 0;
    }
    #input_3_1 {
    	width: 300px;
    	height: 50px;
    }
    #field_3_1 > div {
    	width: 300px;
    }
    
    /* Format for Form 5 Press reg (english)  */
    body #gform_wrapper_5 form {
    	display: grid;
    	grid-auto-flow: column;
    	grid-template-columns: 50% 50%;
    	grid-gap: 0;
    }
    body #gform_wrapper_5 .gform_body {
    	justify-self: right;
    }
    
    body #gform_wrapper_5 .gform_footer {
    	margin-top: 0;
    	padding-top: 0;
    }
    #input_5_1 {
    	width: 300px;
    	height: 50px;
    }
    #field_5_1 > div {
    	width: 300px;
    }
    
    @media only screen and (max-width: 600px) {
        body #gform_wrapper_3 form {
            display: grid;
            justify-content: center;
            grid-template-rows: 50px 1fr;
            grid-template-columns: auto;
        }
    }
    /* End Form 3 Early Bird formatting */
    
    /* Format for Form 4 Early Bird (french)  */
    body #gform_wrapper_4 form {
    	display: grid;
    	grid-auto-flow: column;
    	grid-template-columns: 50% 50%;
    	grid-gap: 0;
    }
    body #gform_wrapper_4 .gform_body {
    	justify-self: right;
    }
    
    body #gform_wrapper_4 .gform_footer {
    	margin-top: 0;
    	padding-top: 0;
    }
    #input_4_1 {
    	width: 300px;
    	height: 50px;
    }
    #field_4_1 > div {
    	width: 300px;
    }
    
    @media only screen and (max-width: 600px) {
        body #gform_wrapper_4 form {
        	display: grid;
            justify-content: center;
            grid-template-rows: 50px 1fr;
            grid-template-columns: auto;
    	}
    }
    /* End Form 4 Early Bird formatting */

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

Viewing 15 replies - 1 through 15 (of 21 total)
  • Plugin Support James Osborne

    (@jamesosborne)

    Thanks for reaching out. I’ve checked and I don’t see any hamburger menu issues on my side when testing the latest version of the Kadence theme in standard mode, so the base theme without modification seems fine.

    From checking the plugins you have active I don’t see why any of these would be impacting your navigation menu. There may be some changes with the CSS you’ve applied to your child theme, or it could even be a case of your CSS budget bring reached.

    In order to determine more on this can you switch to transitional mode temporarily so I can test the AMP version of your site, while comparing it with the non AMP version? I don’t see AMP in standard mode active at present. After we determine any possible causes and make any modifications necessary you’ll be ready to switch to standard mode.

    Thread Starter henripro

    (@henripro)

    Hi James,

    Very grateful you checked my website.
    Apologies but I got second thoughts with my menu not working on my live website with a couple of important emails going out this AM.

    I have now created a password-protected version that has AMP-activated.
    https://3.10.70.14/
    Password: Speed

    Best regards,
    Henri

    Plugin Support James Osborne

    (@jamesosborne)

    Hi Henri,

    Unfortunately we’re unable to login to users sites, whether development or staging sites. I can however check for any issues if you want to let me know when you have any public site live while in transitional mode.

    Thread Starter henripro

    (@henripro)

    Hi James,

    Got it!

    I just took the password protection off the site and added the no-follow for search engines.

    Grateful for your feedback.
    Henri

    Thread Starter henripro

    (@henripro)

    Plugin Support James Osborne

    (@jamesosborne)

    Many thanks for sharing. I’ve inspected your test site and compared it to a Kadence theme test on my side. I noticed some difference in the markup of your own AMP URLs compared to my own.

    Unfortunately I can’t check the canonical (non AMP) version as it looks like you have the plugin set to standard mode. I can however perform some additional checks if you’d like to share the following:

    1. Did you apply any of the Kadence theme starter templates? I ask as I’m unsure where amp-state element is added to your demo site.
    2. Other than the CSS changes you mentioned above did you make any other theme customizations, in particular any AMP component additions?
    Thread Starter henripro

    (@henripro)

    1. I have used the Kadence theme and then built my pages from scratch.

    2. No other theme customization.

    The Bitnami WordPress version is hosted on AWS. Maybe my issue comes from Bitnami modifications? I really can’t think of anything I have done for these modifications to occur.
    Doing some research to answer your questions, I see the following sentence on the Bitnami AMP support page.

    “NOTE: As of this writing, the AMP plugin only works for WordPress posts and not pages.”

    https://docs.bitnami.com/aws-templates/apps/wordpress/configuration/install-plugins-amp/

    I’ve also just opened a ticket with the Bitani team: https://community.bitnami.com/t/amp-plugin-not-working-wpml-not-working-french-to-english/101320

    Very grateful for your support James.

    Plugin Support James Osborne

    (@jamesosborne)

    Many thanks for the update.

    The Bitnami WordPress version is hosted on AWS. Maybe my issue comes from Bitnami modifications?

    Very interesting. While I’m unfamiliar with a Bitnami setup I don’t think it would make changes to the AMP version of your URLs. If you’d like to share your Site Health information using our user submission form I would be happy to investigate your setup.

    You could also see if the same occurs if using only the AMP plugin with the Kadence theme, and no other plugins active. You can do this using the Health Check & Troubleshooting plugin. We have a guide for this on the plugin website.

    “NOTE: As of this writing, the AMP plugin only works for WordPress posts and not pages.”

    This was the case for the first version of the plugin. I’ve provided feedback on this reference now within that article on the link you provided. Hopefully this will be updated accordingly. The plugin now works for all content types when using transitional or standard mode.

    Once you share your Site Health information I’ll inspect your setup. On the testing site please also switch to transitional mode so I can compare your non AMP URLs with my own which I’ve setup for this purpose.

    Thread Starter henripro

    (@henripro)

    Hi James,

    Thank you for everything you are doing.

    I have submitted the IP site’s health info using your form (the IP URL. Thus, there are SSL issues).
    I have switched the IP site’s AMP plugin to transitional.

    I have had problems with the Check & Troubleshooting plugin. It crashed my IP site’s themes. The great thing is that it made me dig into my themes settings.
    Which made me realize that I had some CSS stuck in the customize panel of the main Kadence theme (on top of my child’s custom CSS). I had started without a child theme initially.

    Here is the first message I got from the Check and Troubleshooting plugin:
    When switching the active theme to kadence-child, a site failure occurred. Because of this, we reverted the theme to the one you used previously. (that is Twenty-Twenty)

    When I try and activate the AMP plugin, I get the message:
    When enabling the plugin, amp, a site failure occurred. Because of this the change was automatically reverted.

    When trying to activate the Kandence theme (not the child one), I get this message.
    When switching the active theme to kadence, a site failure occurred. Because of this we reverted the theme to the one you used previously.

    Now, if I go to check the theme, I get the following error message.
    The active theme is broken. Reverting to the default theme.
    Error: Stylesheet is missing.

    Looking at other changes the child theme could bring, the only file in the folder is the function.php pasted content below.

    <?php
    /**
     * Enqueue child styles.
     */
    function child_enqueue_styles() {
    	wp_enqueue_style( 'child-theme', get_stylesheet_directory_uri() . '/style.css', array(), 100 );
    }
    
    add_action( 'wp_enqueue_scripts', 'child_enqueue_styles', 11 ); // Remove the // from the beginning of this line if you want the child theme style.css file to load on the front end of your site.
    
    /**
     * Add custom functions here
     */
    Plugin Support James Osborne

    (@jamesosborne)

    Many thanks for sharing. I’ve been performing some additional checks on your site and while I’m unable to determine the cause just yet. If you’d like to share a copy of your current theme with any of the modifications you’ve applied I can install it inspect this further. You can use the same form previously used to share a link to the zip file.

    So I can compare the mobile navigation toggle in your non AMP version it would be great it you could keep the plugin in transitional mode and also disable the mobile redirection option.

    Thread Starter henripro

    (@henripro)

    I have just made the changes to the mobile redirection in AMP.

    I made a zip file of my child template through your form.

    I am not sure this is of interest but mentioning this anyway.

    The Bitnami functioning with CloudFront has required me to change the wp-config.php for HomeURL and SiteURL formula for the below:
    define('WP_SITEURL', 'hidden link' . $_SERVER['HTTP_HOST'] . '/');
    define('WP_HOME', 'hidden link' . $_SERVER['HTTP_HOST'] . '/');
    if (isset($_SERVER['HTTP_CLOUDFRONT_FORWARDED_PROTO'])
    && $_SERVER['HTTP_CLOUDFRONT_FORWARDED_PROTO'] === 'https') {
    $_SERVER['HTTPS'] = 'on';
    }

    The HomeURL and SiteURL fields both show https://3.10.70.14 (https://www.DearReal.com on the other site).

    Best,
    Henri

    Thread Starter henripro

    (@henripro)

    Hi James,

    I hope the weekend was grand?

    Henri 🙂

    Plugin Support James Osborne

    (@jamesosborne)

    Hi there @henripro.

    All good, I hope with yourself also. I have the steps below which can help you use your Jannah theme in transitional or standard mode. It won’t be your themes native navigation menu and it looks like the logo used the picture element, which isn’t supported in AMP. This however will be addressed once the below has been shipped:
    https://github.com/ampproject/amp-wp/issues/6676

    In order to get a working navigation menu on your RTL screen please follow the steps below and inform me how you get on:

    1. Install and activate this plugin
    2. In your Jannah child theme add the following small CSS tweeks (Appearance > Customizer > Additional CSS)
      .jzsidebar_container   {
        padding-top:12px !important}
      .jzsidebar_container svg {
        transform: scale(0.5) !important;}
       
      html[amp] .tie-icon-navicon{
      	display:none !important
      }
    3. Navigate to “Appearance > Menus” and tick the option to display your menu in the AMP sidemenu menu position (AMP sidebar menu)
    4. Next you’ll need to add the <?php echo do_shortcode('[jz-sidebar]'); ?> snippet to your child themes header.php file, right below the existing themes hamburger menu. I’ve made a code snippet of how it should look.

    After performing the above visit the AMP version of your site after switching to transitional mode. Let me know once you’ve performed the above and I can also check your site

    Thread Starter henripro

    (@henripro)

    Thank you, James!

    I use the Kadence theme, not the Jannah. Does this still apply?

    Henri

    Plugin Support James Osborne

    (@jamesosborne)

    Apologies, I had that response prepared for another topic. I’ll take a look at the zip and get back to you here. It may be tomorrow before I have an update if that’s ok?

Viewing 15 replies - 1 through 15 (of 21 total)
  • You must be logged in to reply to this topic.