Title: Inside navigation
Last modified: December 25, 2019

---

# Inside navigation

 *  Resolved [callaloo](https://wordpress.org/support/users/callaloo/)
 * (@callaloo)
 * [6 years, 5 months ago](https://wordpress.org/support/topic/inside-navigation/)
 * Hi Tom. I am trying to use [this method](https://sabe.io/tutorials/how-to-create-modal-popup-box)
   to show a popup on my site. But when I put the code inside navigation using the
   generate_inside_navigation hook, the menu is wrapped up in the ‘modal’ class (
   checked using inspect element) and it appears hidden. In fact, the whole `<-Inside
   navigation->` is wrapped in the ‘modal’ class [http://prntscr.com/qfljmw](http://prntscr.com/qfljmw).
   Even increasing priority does not help. How to resolve this?

Viewing 15 replies - 1 through 15 (of 21 total)

1 [2](https://wordpress.org/support/topic/inside-navigation/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/inside-navigation/page/2/?output_format=md)

 *  Theme Author [Tom](https://wordpress.org/support/users/edge22/)
 * (@edge22)
 * [6 years, 5 months ago](https://wordpress.org/support/topic/inside-navigation/#post-12270044)
 * Hi there,
 * What happens if you add the actual modal HTML in another hook?
 * For example, add the toggle to `generate_inside_navigation`, and the modal HTML
   to `wp_footer`.
 *  Thread Starter [callaloo](https://wordpress.org/support/users/callaloo/)
 * (@callaloo)
 * [6 years, 5 months ago](https://wordpress.org/support/topic/inside-navigation/#post-12270240)
 * I am actually separating the code as you have suggested. I just forgot to indicate
   that in the previous post. The same issue happens. I have the script in the footer(
   with the hook) and the code itself in the inside navigation hook and the CSS 
   in the customiser. I checked GP files and found `generate_after_primary_menu`
   and it tends to work well but not aligned with the rest. I should Also Indicate
   I have the site name hooked inside the navigation and `position:absolute`(sticks
   to the left).
 *  Thread Starter [callaloo](https://wordpress.org/support/users/callaloo/)
 * (@callaloo)
 * [6 years, 5 months ago](https://wordpress.org/support/topic/inside-navigation/#post-12270423)
 * Resolved. The problem was due to the shortcode being called using [this code](https://docs.generatepress.com/article/creating-a-shortcode/)
   on GP docs. I had to change IT to `function custom_shortcode() {
    ?>code here
   <?php }` for it to work. It took me long to diagnose it.
 *  Theme Author [Tom](https://wordpress.org/support/users/edge22/)
 * (@edge22)
 * [6 years, 5 months ago](https://wordpress.org/support/topic/inside-navigation/#post-12271480)
 * Glad you got it working 🙂
 *  Thread Starter [callaloo](https://wordpress.org/support/users/callaloo/)
 * (@callaloo)
 * [6 years, 5 months ago](https://wordpress.org/support/topic/inside-navigation/#post-12272104)
 * Would you be aware why calling the shortcode the GP way would hijack the menu?
   The shortcode was a Mailchimp form.
 *  Theme Author [Tom](https://wordpress.org/support/users/edge22/)
 * (@edge22)
 * [6 years, 5 months ago](https://wordpress.org/support/topic/inside-navigation/#post-12272279)
 * Removing the output buffering stuff fixed the issue? (`ob_start()` and `ob_get_clean()`)
 *  Thread Starter [callaloo](https://wordpress.org/support/users/callaloo/)
 * (@callaloo)
 * [6 years, 5 months ago](https://wordpress.org/support/topic/inside-navigation/#post-12273043)
 * Yes, including the `echo`. The `echo` didn’t work at first, so I changed it to`
   return` and it worked. Then when I tried to call the shortcode `inside_navigation`,
   that’s when the error appeared. This is an example of what worked.
 *     ```
       function custom_shortcode() {
       ?>
       <form action="/action_page.php">
         First name:<br>
         <input type="text" name="firstname" value="Mickey">
         <br>
         Last name:<br>
         <input type="text" name="lastname" value="Mouse">
         <br><br>
         <input type="submit" value="Submit">
       </form>
       <?php }
       ```
   
 * Whe
 *  Theme Author [Tom](https://wordpress.org/support/users/edge22/)
 * (@edge22)
 * [6 years, 5 months ago](https://wordpress.org/support/topic/inside-navigation/#post-12273915)
 * Can you try the updated code?: [https://docs.generatepress.com/article/creating-a-shortcode/](https://docs.generatepress.com/article/creating-a-shortcode/)
 *  Thread Starter [callaloo](https://wordpress.org/support/users/callaloo/)
 * (@callaloo)
 * [6 years, 5 months ago](https://wordpress.org/support/topic/inside-navigation/#post-12275727)
 * The result is just a number 1 [http://prntscr.com/qgtzkf](http://prntscr.com/qgtzkf).
   The code I am trying to call is the Mailchimp embed form, but I have wrapped 
   it in some div classes.
 *  Theme Author [Tom](https://wordpress.org/support/users/edge22/)
 * (@edge22)
 * [6 years, 5 months ago](https://wordpress.org/support/topic/inside-navigation/#post-12275940)
 * Can you share your full function with me?
 *  Thread Starter [callaloo](https://wordpress.org/support/users/callaloo/)
 * (@callaloo)
 * [6 years, 5 months ago](https://wordpress.org/support/topic/inside-navigation/#post-12276329)
 * Here is a modified version of it and the only one that is working. (I copied 
   the HTML from another website using inspect element and modified it extensively,
   but retained the classes.)
 *     ```
       function wp_social_box() {
       ?>
       	<div class="social-cta container column">
       	    <div class="social-cta__header">
       			Follow Us	<div>
       				<div class="social-cta__column social-cta__column--social">
       				<div class="social-cta__type social-cta__type--social">Be Sociable</div>
       				<span class="social-cta__desc social-cta__desc--social">
       					like and see our stories			</span>
       								<a href="https://www.facebook.com/example" class="social-cta__button social-cta__button--facebook" target="_blank"><svg xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm3 8h-1.35c-.538 0-.65.221-.65.778v1.222h2l-.209 2h-1.791v7h-3v-7h-2v-2h2v-2.308c0-1.769.931-2.692 3.029-2.692h1.971v3z"/></svg>Like Example <span class="sub-counter">100 Likes</span></a>
       								<a href="https://twitter.com/example" class="social-cta__button social-cta__button--twitter" target="_blank"><svg xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.066 9.645c.183 4.04-2.83 8.544-8.164 8.544-1.622 0-3.131-.476-4.402-1.291 1.524.18 3.045-.244 4.252-1.189-1.256-.023-2.317-.854-2.684-1.995.451.086.895.061 1.298-.049-1.381-.278-2.335-1.522-2.304-2.853.388.215.83.344 1.301.359-1.279-.855-1.641-2.544-.889-3.835 1.416 1.738 3.533 2.881 5.92 3.001-.419-1.796.944-3.527 2.799-3.527.825 0 1.572.349 2.096.907.654-.128 1.27-.368 1.824-.697-.215.671-.67 1.233-1.263 1.589.581-.07 1.135-.224 1.649-.453-.384.578-.87 1.084-1.433 1.489z"/></svg>Follow Example <span class="sub-counter">1k Followers</span></a>		
       			</div>
       				<div class="social-cta__column social-cta__column--email">
       				<div class="social-cta__type social-cta__type--email">Newsletter</div>
       				<span class="social-cta__desc social-cta__desc--email">
       					Get our weekly newsletter in your inbox		</span>
       				<!-- Begin Mailchimp Signup Form -->
       	<form action="https://example.us14.list-manage.com/subscribe/post?u=xxxxxxxxxxxxxxxxxxx&id=xxxxxxxx" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
       		<span class="social-cta__input-wrapper">
       		<input class="social-cta__input" type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Your Email..." required>
       				</span>
       	    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
       	    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_xxxxxxxxxxxxxx_xxxxxxxx" tabindex="-1" value=""></div>
       	    <div class="social-cta__button"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
       	</form>
       	<!--End mc_embed_signup-->
       		</div>
       	</div
       <?php 
       }
       add_shortcode( 'social_box', 'wp_social_box' );
       ```
   
 *  Theme Author [Tom](https://wordpress.org/support/users/edge22/)
 * (@edge22)
 * [6 years, 5 months ago](https://wordpress.org/support/topic/inside-navigation/#post-12276545)
 * Shortcodes need to be returned without output buffering.
 * So you’d do this instead:
 *     ```
       function wp_social_box() {
           ob_start();
           ?>
               Your HTML in here
           <?php 
           return ob_get_clean();
       }
       add_shortcode( 'social_box', 'wp_social_box' );
       ```
   
 *  Thread Starter [callaloo](https://wordpress.org/support/users/callaloo/)
 * (@callaloo)
 * [6 years, 5 months ago](https://wordpress.org/support/topic/inside-navigation/#post-12276604)
 * It works now. Thanks.
 *  Thread Starter [callaloo](https://wordpress.org/support/users/callaloo/)
 * (@callaloo)
 * [6 years, 5 months ago](https://wordpress.org/support/topic/inside-navigation/#post-12277237)
 * Last question, [will this code](https://wordpress.org/support/topic/how-to-remove-featured-image-on-single-posts/#post-11140323)
   affect my SEO (image indexing by google) or open graph tags? I read a response
   by Leo that hiding certain elements with PHP is better than using `display:none;`
   in the customizer.
 *  Theme Author [Tom](https://wordpress.org/support/users/edge22/)
 * (@edge22)
 * [6 years, 5 months ago](https://wordpress.org/support/topic/inside-navigation/#post-12277652)
 * That code will remove the element from the HTML. It won’t touch your existing
   open graph tags.

Viewing 15 replies - 1 through 15 (of 21 total)

1 [2](https://wordpress.org/support/topic/inside-navigation/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/inside-navigation/page/2/?output_format=md)

The topic ‘Inside navigation’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/generatepress/3.6.1/screenshot.
   png)
 * GeneratePress
 * [Support Threads](https://wordpress.org/support/theme/generatepress/)
 * [Active Topics](https://wordpress.org/support/theme/generatepress/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/generatepress/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/generatepress/reviews/)

 * 21 replies
 * 2 participants
 * Last reply from: [Tom](https://wordpress.org/support/users/edge22/)
 * Last activity: [6 years, 5 months ago](https://wordpress.org/support/topic/inside-navigation/page/2/#post-12283000)
 * Status: resolved