How to add AMP Sidebar in wordpress website

I did not understand, can you send me a screen short so that it will easy for me to understand.
For non-amp version .dl-menuwrapper { display: block;}
For amp version .menu-button { display: block;}

https://creativesystems.0438cfd.netsolhost.com/category/creativesystem-blog/?amp
https://creativesystems.0438cfd.netsolhost.com/
Please see both versions. if there anyother possibility to do that.
one more thing [amp] is not working in css

• This reply was modified 5 years, 2 months ago by franks123.
• This reply was modified 5 years, 2 months ago by franks123.
• This reply was modified 5 years, 2 months ago by franks123.

@franks123 I don’t have the same setup as your site, so I don’t think a screenshot would assist.

To remove the non amp-sidebar button you can apply something like the below to your themes style.css.
html[amp] button.dl-trigger {display: none;}
You also have that button between another div (header-btns-mobile) which you probably don’t want appearing in your AMP URLs.

You can do the opposite for you non AMP. But please confirm that works on your AMP URLs first.

Using the html[amp] selector before any class will ensure it applies to AMP URLs only.

@jamesosborne , after doing above tricks, amp version looks fine. now there are two issues appearing in non-amp version. I am applying display: none; in styles.css but in vain. you can see on this link as well
https://creativesystems.0438cfd.netsolhost.com/

Two more thing,
1) i need to ask about amp sidebar css that i have added in head tag tag in header.php. Should i add “html[amp]” in whole css code or not?

2) “html[amp]” will work on styles.css as well or not? I have added this in styles.css but it is not working. it in only working in head tag in header.php.

Please tell me about above non-amp version issue and the above 2 questions as well.

• This reply was modified 5 years, 2 months ago by franks123.

@franks123 You can add the following to your theme’s style.css file:
.header-btns-mobile {display: none;}

You can add the html[amp] selector for rules which you want to apply to AMP URLs only.

The html[amp] selector works fine for AMP content, when you mention it’s not working if you can provide more information on how it’s not working I can hopefully assist. You can apply any such code to the bottom of your theme’s style.css file so it would trigger after all other CSS rules.

it is not working. I am saying that some amp things like “=” and “x” are showing in non-amp version. I want to remove them.
.header-btns-mobile {display: none;} is removing the search icon and mobile no. which i don,t want to remove. I want that “=” and “x” icons are removed from non-amp version.
Please tell me how to resolve them
creativesystems.0438cfd.netsolhost.com

@franks123 In that case why don’t you add a class to the specific elements, and use those classes to toggle visibility via CSS. You don’t have any class assigned to the “x” or “=” at present, but you can still target them specifically using something similar to the below:

.menu-button button{display:none}
html[amp] .menu-button button{display:block}

You can do something similar for the “x” button. For any other CSS please use similar rules, making use of the [amp] selector to restrict rules to AMP.

@jamesosborne , Mobile menu issue is resolved. thank you for your support.
There are little bit issues more, if you help me in resolving these issue. i will be grateful to you.

There is issue of featured images height in amp version. a lot of white space below every image is appearing. You can check on this link
https://creativesystems.0438cfd.netsolhost.com/wood-fiber/?amp
On non-amp version, there is no space. Please see this link as well
https://creativesystems.0438cfd.netsolhost.com/wood-fiber/

Please tell me how to resolve this issue

@franks123 Please open a new support topic for other issues. Be advised we can only offer assistance in relation to the AMP plugin. Rendering issues may be as a result of incompatible themes or plugins, but we can check after you open a new support topic.

ok i am creating the new ticket. but it is relative to amp plugin