Toggle menu and search has no id for toggle menu on AMP

Hello @academicweek

Thank you for contacting us, Can you please help us understand which AMP compatibility plugin you installed?

I have AMP Generic Compat installed but finding it difficult to detect the necessary buttons to make the toggle and search work

Hello @academicweek

You will need to add some CSS to make it work.

1. Please add the name of divs and classes as shown in the screenshot 1

2. Add the CSS mentioned below in AMP Compatibility ->CSS make sure to enable it.

span.toggle-menu.active, div.main-menu.active ul.menu{
	display:block
}

div.main-menu.active ul.menu {
    margin: 0;
    list-style: none;
    text-align: left;
    z-index: 9999;
    background-color: #fff;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
}
div.main-menu.active ul.menu li {
	width:100%;
	margin: 0 10px;
}
span.toggle-menu.active i.ham {
	background-color:transparent;
}
span.toggle-menu.active i.ham:before {
	-webkit-transform: translateY(8px) rotateZ(-45deg);
    -moz-transform: translateY(8px) rotateZ(-45deg);
    -ms-transform: translateY(8px) rotateZ(-45deg);
    -o-transform: translateY(8px) rotateZ(-45deg);
	transform: translateY(8px) rotateZ(-45deg);
}
span.toggle-menu.active i.ham:after{
	-webkit-transform: translateY(-8px) rotateZ(45deg);
    -moz-transform: translateY(-8px) rotateZ(45deg);
    -ms-transform: translateY(-8px) rotateZ(45deg);
    -o-transform: translateY(-8px) rotateZ(45deg);
    transform: translateY(-8px) rotateZ(45deg);
}

}

PS: I have created this CSS code for the free magnitude theme as I don’t have access to the paid version.

I hope this helps!

Hello More, I appreciate your effort to assist me make the hamburger menu and search work in AMP, I have done just as directed in your reply but still it does not work. I am using Magnitude Pro is there any safer way to provide site logins for detailed help please.

Hello @academicweek

We can not access your site, also please do not share your login credentials on support forums, Please read WordPress support forum guidelines

I don’t see any changes being applied on your site, can you please make sure that that you have Enabled both Compatibility and CSS by click checkbox?

I will also recommend keeping those changes and not disabling them or deactivating the plugin so I can further check and provide changes as required.

PS: Please clear your site cache once you add changes.

I have enabled both compatibility and CSS by ticking the checkbox and adding the CSS code. The plugin is still activated

• This reply was modified 1 year, 5 months ago by Academicweek.

@academicweek

Please change action element from span to button in plugins settings

Also update the CSS and replace span with button

After changing the span to button in plugin settings and updating CSS, the hamburger menu now works perfectly except that the colour of the menu’s are white instead I want it to be black with the white background.

Hello @academicweek

Glad to know it’s working. Please also add the following CSS in AMP Compatibility plugins CSS section

.header-layout-compressed-full .main-navigation .menu-desktop > ul > li > a {
    color: #000;
}

Please after using the recent CSS code, the menu colour on the desktop which is supposed to be white is now black. I want it to be white on the desktop and black on the mobile since the desktop has a red background and the mobile has a white background.

• This reply was modified 1 year, 5 months ago by Academicweek.

I will suggest keeping the color white while changing the background color of menu to maroon (red)

Remove the previous CSS code from the reply ie.

.header-layout-compressed-full .main-navigation .menu-desktop > ul > li > a {
    color: #000;
}

Update the CSS class div.main-menu.active ul.menu

div.main-menu.active ul.menu {
    margin: 0;
    list-style: none;
    text-align: left;
    z-index: 9999;
    background-color: #fff;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #bb322a;
}

It also looks good on mobile and desktop.

I hope this helps!

The recent CSS code makes it even look much better, The hamburger menu issue has been fixed completely but how do I enable the search to work also please

Hello @academicweek

Please update AMP Compatibility Settings as per this screenshot

Also I made mistake in my previous CSS code snippet there are two background-color properties

Please replace the below CSS

div.main-menu.active ul.menu {
    margin: 0;
    list-style: none;
    text-align: left;
    z-index: 9999;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #bb322a;
}

I hope this helps!

The search icon now works, but please cant we make text of the menu’s of the and the background-colour white as the non-AMP version has. I appreciate your patience and support More

Hi More, I have changed the background-colour of the non AMP version to the background-colour in your CSS code and it now looks great. So far all my AMP issues have been solved. I just implemented AMP few days, how long will it take for it to fully work on the blog?