Navigation

YPNUS Navigation Menu — Drop-In Component

Your YPNUS.com
Navigation Menu

This is the drop-in nav component built from your actual server file structure. It includes all your real pages — lead type pages, market pages, blog posts, tools, and legal. Fully responsive with a mobile drawer, dropdown menus, and scroll effects.

✅ Copied! Paste inside your <body> tag.

What's included

Desktop dropdowns, mobile drawer, scroll shadow, active page indicator, keyboard navigation, ARIA labels.

Your pages mapped

Platform, Features, Lead Types (Probate/Divorce/Marriage), Markets (CA + 4 cities), Blog, Pricing, About.

How to use

Copy the <nav> block + <style> + <script> into the top of every .html file on your server.

📋 How to Add This Nav to Every Page

1

Copy the 3 blocks

You need: the <style> block, the <nav> + #ypn-mobile-drawer HTML, and the <script>. Click the button above or grab them from this file.

2

Paste into each page

Put the <style> inside <head>. Put the <nav> + drawer as the very first elements inside <body>. Put the <script> just before </body>.

3

Add padding-top to body

The nav is fixed at 68px tall. Your page CSS needs body { padding-top: 68px; } or your hero section will sit under the nav. (Already included in the style block.)

4

WordPress users: use a header template

If you want this on WordPress without touching every page, paste the nav HTML into your theme's header.php, or use the Code Snippets plugin to inject it via wp_body_open hook. One paste = every page.

5

Update links to match your live domain

All links use root-relative paths (e.g. /blog/index.html). If your site is in a subfolder, prefix them. If you rename a page, just update the matching href in the nav.

-->\n\n${styleStr}\n\n${htmlStr}\n\n${scriptStr}`;navigator.clipboard.writeText(full).then(() => { const msg = document.getElementById('copy-msg'); msg.classList.add('show'); setTimeout(() => msg.classList.remove('show'), 3000); }); }