Archived topic
Wanted: PHP Code for Fixed Main Navigation
7 replies · Started by Mark on August 10, 2020
I am following up on what I did to one of my sites as mentioned here: https://generatepress.com/forums/topic/old-html-site-to-gp-premium/.
I want to replace the static navigation bar on my page above with the dynamic one now generated by GP and GPP (for example: https://www.anabaptists.org/sips/).
I spent two or three hours today trying to find out how to do that. It seems I should be able to find the original PHP code and put that in my custom page template so that I end up with something along these lines conceptually:
<?php
/**
* Template Name: HTML Home
*/
PHP CODE SNIPPET FOR THE BAR SHOWN AT THE TOP OF https://www.anabaptists.org/sips/
?>
Can this be done?
If so, where do I find the code for this that GP normally inserts in the header.
Thanks,
Mark
Hi there,
is your custom template devoid of any them elements such as the GP Header and Navigation ?
Good morning, David, and thank you for your reply.
Yes, the template is devoid of any elements (or any other PHP code) beyond what I give above.
I tried to find a way to add the code that generates this:
<a class="screen-reader-text skip-link" href="#content" title="Skip to content">Skip to content</a> <nav id="site-navigation" class="has-branding main-navigation" itemtype="https://schema.org/SiteNavigationElement" itemscope>
<div class="inside-navigation grid-container grid-parent">
<div class="navigation-branding"><div class="site-logo">
<a href="https://www.anabaptists.org/" title="Anabaptists" rel="home">
<img class="header-image" alt="Anabaptists" src="https://www.anabaptists.org/cms/wp-content/uploads/anabaptists-2017.png" title="Anabaptists" />
</a>
</div></div><form method="get" class="search-form navigation-search" action="https://www.anabaptists.org/">
<input type="search" class="search-field" value="" name="s" title="Search" />
</form> <div class="mobile-bar-items">
<span class="search-item">
<a aria-label="Open Search Bar" href="#">
</a>
</span>
</div><!-- .mobile-bar-items -->
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">
<span class="mobile-menu">Menu</span> </button>
<div id="primary-menu" class="main-nav"><ul id="menu-main-cms-menu" class=" menu sf-menu"><li id="menu-item-551" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-551"><a href="https://www.anabaptists.org/essays/articles/">Articles</a></li>
<li id="menu-item-524" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-524"><a href="https://www.anabaptists.org/essays/meditations/">Mark’s Meditations</a></li>
<li id="menu-item-522" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-522"><a href="https://www.anabaptists.org/clp/youth/">Thoughts for the Week</a></li>
<li id="menu-item-537" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-537"><a title="Audio" href="https://www.anabaptists.org/talks/">Audio</a></li>
<li id="menu-item-523" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-523"><a href="https://www.anabaptists.org/books/">Books</a></li>
<li id="menu-item-552" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-552"><a href="https://www.anabaptists.org/sips/">Sips & Snips</a></li>
<li class="search-item"><a aria-label="Open Search Bar" href="#"></a></li></ul></div> </div><!-- .inside-navigation -->
</nav><!-- #site-navigation -->
I don't want to use wp_head() because I don't want everything else it generates at this point. :D
Thanks,
Mark
Thats a problem as the JS and CSS required is reliant on the theme templates markup. Without it i cannot say what would happen lol
You could of course just use the position: sticky; CSS property to create that same effect.
Thank you again, David, for replying.
I got sidetracked with more pressing issues, so I've been gone from here a few days.
Your last sentence makes me think you misunderstood what I wanted to accomplish.
Whatever the case, I ended up taking a different route...
1. I modified my page template to add get_header(); before closing the PHP code at the top.
2. I took out everything down to and including the body tag.
3. I removed the static header code I was using.
And that was that for the page template.
Next I disabled all elements except the navigation for the page that uses that template.
Finally, I used functions.php to add my own javascripts, stylesheet, and custom CSS for this page only.
The result is here: https://www.anabaptists.org.
I still have one problem that I don't know how to resolve: When GP collapses the top menu bar into the hamburger thing, clicking the hamburger does nothing. (Maybe the code for it is in the GP footer, which I have disabled.)
If you have any hamburger direction, I'd be grateful. :)
Thanks,
Mark
You need to include the wp_footer() function in the footer so javascript is loaded.
Right now you're not loading any of the theme JS, which is why the menu toggle isn't working.
Thank you, Tom. That resolved the issue, alright. (No surprise to you, I'm sure.) :)
Glad I could help :)
