Title: AMP Menú Reader Mode
Last modified: April 20, 2020

---

# AMP Menú Reader Mode

 *  Resolved [ghost51](https://wordpress.org/support/users/juangose/)
 * (@juangose)
 * [6 years, 1 month ago](https://wordpress.org/support/topic/amp-menu-reader-mode/)
 * Hello again. I would like to add a navigation menu under the header or in the
   header on the AMP pages.
 * I see that the plugin doesn’t have any option for that. I have also installed
   the mini plugin “AMP Reader Nav Menu” and there is still no navigation menu on
   AMP pages.
 * Here is an example of an AMP URL without menu:
 * [https://expertopc.com/riesgos-de-usar-mejortorrent/amp/](https://expertopc.com/riesgos-de-usar-mejortorrent/amp/)
 * What can I do? Thank you in advance.

Viewing 9 replies - 1 through 9 (of 9 total)

 *  [James Osborne](https://wordpress.org/support/users/jamesosborne/)
 * (@jamesosborne)
 * [6 years, 1 month ago](https://wordpress.org/support/topic/amp-menu-reader-mode/#post-12701848)
 * [@juangose](https://wordpress.org/support/users/juangose/) If you’ve created 
   your own AMP reader mode templates, or if your theme features it’s own templates
   these may override the mini plugin addition. In your case it looks like the Jannah
   theme does provide it’s own AMP [templates](https://jannah.tielabs.com/demo/2016/10/28/success-is-not-a-good-teacher-failure-makes-you-humble/amp/).
 * With the mini plugin you have installed you can rename/remove your themes header-
   bar.php overwrite, which should be located within your `wp-content/themes/jannah/
   amp` directory.
 *  Thread Starter [ghost51](https://wordpress.org/support/users/juangose/)
 * (@juangose)
 * [6 years, 1 month ago](https://wordpress.org/support/topic/amp-menu-reader-mode/#post-12701971)
 * Thanks, I wasn’t aware that Jannah uses her own template for AMP. I tried to 
   rename the file header-bar.php and no header or menu is shown.
 * This is the code for header-bar.php:
 *     ```
       <header id="#top" class="amp-wp-header">
       	<div>
       		<a href="<?php echo esc_url( $this->get( 'home_url' ) ); ?>">
       			<?php echo esc_html( $this->get( 'blog_name' ) ); ?>
       		</a>
       	</div>
       </header>
   
       <?php
       	// below Header Ad
       	if( tie_get_option( 'amp_ad_below_header' ) ){ ?>
       		<div class="amp-custom-ad amp-below-header-ad amp-ad">
       			<?php echo tie_get_option( 'amp_ad_below_header' ); ?>
       		</div>
       	<?php
       	}
       ?>
       ```
   
 * Can I add something to it so that the menu is displayed?
 *  [James Osborne](https://wordpress.org/support/users/jamesosborne/)
 * (@jamesosborne)
 * [6 years, 1 month ago](https://wordpress.org/support/topic/amp-menu-reader-mode/#post-12702090)
 * [@juangose](https://wordpress.org/support/users/juangose/) Can you try and install
   [this](https://wordpress.org/plugins/amp-sidebar-hamburger-menu/#installation)
   plugin and then use the following:
 *     ```
       <header id="#top" class="amp-wp-header">
       	<div>
       		<a href="<?php echo esc_url( $this->get( 'home_url' ) ); ?>">
       			<?php echo esc_html( $this->get( 'blog_name' ) ); ?>
       		</a>
                      <?php echo do_shortcode('[jz-sidebar]'); ?>
       	</div>
       </header>
   
       <?php
       	// below Header Ad
       	if( tie_get_option( 'amp_ad_below_header' ) ){ ?>
       		<div class="amp-custom-ad amp-below-header-ad amp-ad">
       			<?php echo tie_get_option( 'amp_ad_below_header' ); ?>
       		</div>
       	<?php
       	}
       ?>
       ```
   
 * Let me know if that works, you may need to style and position the navigation 
   button.
 *  Thread Starter [ghost51](https://wordpress.org/support/users/juangose/)
 * (@juangose)
 * [6 years, 1 month ago](https://wordpress.org/support/topic/amp-menu-reader-mode/#post-12702445)
 * I’ve installed it and it doesn’t show anything. I think the code you are indicating
   is the same as the default, maybe you forgot to add something.
 *  [James Osborne](https://wordpress.org/support/users/jamesosborne/)
 * (@jamesosborne)
 * [6 years, 1 month ago](https://wordpress.org/support/topic/amp-menu-reader-mode/#post-12702482)
 * [@juangose](https://wordpress.org/support/users/juangose/) I can see the [button](https://i.imgur.com/AaFbMMg.png)
   when looking at your source code, but the problem is your logo is covering the
   full width. Please try the below.
 *     ```
       <header id="#top" class="amp-wp-header">
       	<div>
       		<a href="<?php echo esc_url( $this->get( 'home_url' ) ); ?>">
       			<?php echo esc_html( $this->get( 'blog_name' ) ); ?>
       		</a>
       	</div>
        <?php echo do_shortcode('[jz-sidebar]'); ?>
       </header>
   
       <?php
       	// below Header Ad
       	if( tie_get_option( 'amp_ad_below_header' ) ){ ?>
       		<div class="amp-custom-ad amp-below-header-ad amp-ad">
       			<?php echo tie_get_option( 'amp_ad_below_header' ); ?>
       		</div>
       	<?php
       	}
       ?>
       ```
   
 *  Thread Starter [ghost51](https://wordpress.org/support/users/juangose/)
 * (@juangose)
 * [6 years, 1 month ago](https://wordpress.org/support/topic/amp-menu-reader-mode/#post-12702887)
 * Now I see the button. How can I add CSS to style the button? If I add it to the
   additional CSS section of WordPress or Jannah it doesn’t load in AMP :/
 *  [James Osborne](https://wordpress.org/support/users/jamesosborne/)
 * (@jamesosborne)
 * [6 years, 1 month ago](https://wordpress.org/support/topic/amp-menu-reader-mode/#post-12702910)
 * [@juangose](https://wordpress.org/support/users/juangose/) You can add css to
   reader mode templates using the below template, added to your themes functions.
   php or preferabley a custom plugin (so it doesn’t get overwritten):
 *     ```
       add_action( 'amp_post_template_css', function() {
               ?>
               /* Put Custom CSS here */
               <?php
       } );
       ```
   
 * As you can image we can’t provide the particular styling for users own sites,
   but you can use Stackoverflow or online resources to learn CSS if you’re unsure.
   If you’re able to use the default reader mode templates the button should be 
   placed automatically.
 *  Thread Starter [ghost51](https://wordpress.org/support/users/juangose/)
 * (@juangose)
 * [6 years, 1 month ago](https://wordpress.org/support/topic/amp-menu-reader-mode/#post-12703041)
 * Okay, I got it, only 3 lines of CSS were enough. Finally I have a nice and useful
   menu in AMP pages. Thank you very much [@jamesosborne](https://wordpress.org/support/users/jamesosborne/),
   very kind.
 *  [James Osborne](https://wordpress.org/support/users/jamesosborne/)
 * (@jamesosborne)
 * [6 years, 1 month ago](https://wordpress.org/support/topic/amp-menu-reader-mode/#post-12703197)
 * [@juangose](https://wordpress.org/support/users/juangose/) Nice work with your
   styling, it looks great.
 * Feel free to leave the plugin a [review](https://wordpress.org/support/plugin/amp/reviews/#new-topic-0)
   now that you’re viewers can navigate your side in reader mode.

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘AMP Menú Reader Mode’ is closed to new replies.

 * ![](https://ps.w.org/amp/assets/icon.svg?rev=2527602)
 * [AMP](https://wordpress.org/plugins/amp/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/amp/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/amp/)
 * [Active Topics](https://wordpress.org/support/plugin/amp/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/amp/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/amp/reviews/)

## Tags

 * [menu](https://wordpress.org/support/topic-tag/menu/)

 * 9 replies
 * 2 participants
 * Last reply from: [James Osborne](https://wordpress.org/support/users/jamesosborne/)
 * Last activity: [6 years, 1 month ago](https://wordpress.org/support/topic/amp-menu-reader-mode/#post-12703197)
 * Status: resolved