How Can I Make an Embedded Website Reach the Full Length of the Page?

In today’s digital landscape, embedding websites within other pages has become a common practice for enhancing user experience and integrating diverse content seamlessly. However, one frequent challenge developers encounter is ensuring that the embedded website—or iframe—adjusts dynamically to match the length of the parent page. Without this adjustment, embedded content can appear truncated or surrounded by excessive whitespace, disrupting the visual flow and usability.

Understanding how to make an embedded website reach the length of its containing page is essential for creating polished, professional web interfaces. This topic touches on responsive design principles, cross-domain communication, and the nuances of HTML and CSS behavior. Whether you’re embedding a simple widget or a complex web application, mastering this technique ensures your content feels cohesive and fully integrated.

As you delve deeper, you’ll discover the strategies and best practices that allow embedded content to adapt fluidly to varying page lengths. These insights not only improve aesthetics but also enhance accessibility and user engagement, making your web projects more effective and user-friendly.

Techniques to Adjust Embedded Website Height Dynamically

When embedding a website within another page, such as through an ``, one common challenge is ensuring the embedded content stretches to fit the entire height of its content, eliminating unwanted scrollbars or excessive whitespace. To achieve this, several dynamic height adjustment techniques can be employed.</p> <p>One effective method involves using JavaScript to measure the embedded document’s height and then programmatically adjust the iframe’s height accordingly. This approach requires cooperation between the parent page and the embedded content, often facilitated by cross-document messaging or direct DOM access if both pages share the same origin.</p> <p>Key techniques include:</p> <p>– **Using postMessage API**: The embedded page calculates its content height and sends it to the parent window via `window.parent.postMessage()`. The parent listens for this message and updates the iframe’s height.<br /> – **Polling height changes**: The parent page periodically checks the iframe’s content height via JavaScript and adjusts the iframe height dynamically.<br /> – **Same-origin DOM access**: If the embedded content is from the same domain, the parent page can directly access and read the iframe’s document height and set the iframe height accordingly.</p> <p>Example of using `postMessage`:</p> <p>“`javascript<br /> // In embedded page<br /> function sendHeight() {<br /> const height = document.body.scrollHeight;<br /> window.parent.postMessage({ type: ‘setHeight’, height: height }, ‘*’);<br /> }</p> <p>window.onload = sendHeight;<br /> window.onresize = sendHeight;</p> <p>// In parent page<br /> window.addEventListener(‘message’, (event) => {<br /> if (event.data.type === ‘setHeight’) {<br /> const iframe = document.getElementById(’embeddedFrame’);<br /> iframe.style.height = event.data.height + ‘px’;<br /> }<br /> });<br /> “`</p> <h2>CSS Strategies to Ensure Full Height of Embedded Content</h2> <p>CSS alone can sometimes manage the height of an embedded website, especially when height-related properties are properly configured both in the parent container and the embedded frame. However, CSS solutions are generally limited by cross-origin restrictions and the embedded content’s own styles.</p> <p>Some CSS best practices include:</p> <ul> <li>Setting the iframe or embed container height to `100vh` or `100%` depending on layout context.</li> <li>Ensuring the parent container has a defined height or flexbox/grid layout to allow the iframe to stretch.</li> <li>Using `min-height` and `max-height` properties to prevent overflow or undersizing.</li> </ul> <p>Example CSS:</p> <p>“`css<br /> .parent-container {<br /> display: flex;<br /> flex-direction: column;<br /> height: 100vh; /* full viewport height */<br /> }</p> <p>iframe {<br /> flex-grow: 1;<br /> border: none;<br /> width: 100%;<br /> min-height: 100%;<br /> }<br /> “`</p> <p>This approach works best when the embedded content does not exceed the viewport height or when the parent page controls the layout tightly.</p> <h2>Comparison of Methods for Reaching Full Page Height</h2> <p>The following table compares the major approaches to making an embedded website reach the length of the page, highlighting pros, cons, and use cases:</p> <table> <thead> <tr> <th>Method</th> <th>Pros</th> <th>Cons</th> <th>Best Use Case</th> </tr> </thead> <tbody> <tr> <td>JavaScript postMessage</td> <td>Dynamic height adjustment, works cross-origin</td> <td>Requires scripting in embedded page, more complex setup</td> <td>Embedding third-party sites with cooperation</td> </tr> <tr> <td>Same-origin DOM access</td> <td>Simple height detection and adjustment</td> <td>Only works if parent and embedded share origin</td> <td>Internal company portals or same-domain embeds</td> </tr> <tr> <td>CSS 100% height and flexbox</td> <td>No scripting needed, pure CSS solution</td> <td>Limited by embedded content’s own height, no cross-origin resizing</td> <td>Embedding content with fixed height or trusted control</td> </tr> <tr> <td>Polling iframe height</td> <td>Works when postMessage not available</td> <td>Can be inefficient, may cause flicker or performance issues</td> <td>Fallback in legacy environments</td> </tr> </tbody> </table> <h2>Best Practices for Embedding Responsive Websites</h2> <p>To ensure that an embedded website properly fills the page height and remains responsive, consider the following best practices:</p> <ul> <li><b>Use responsive design within the embedded content</b>: The embedded site should utilize flexible layouts (e.g., CSS Grid, Flexbox) and avoid fixed height containers that limit height adaptability.</li> <li><b>Avoid fixed height iframes</b>: Instead, allow the iframe height to adjust dynamically based on content.</li> <li><b>Set viewport meta tag in embedded page</b>: This ensures the content scales correctly on mobile devices.</li> <li><b>Test across multiple devices and browsers</b>: Height rendering can differ based on browser behavior and device characteristics.</li> <li><b>Implement fallback styles</b>: For environments where JavaScript is disabled, include CSS that provides a reasonable default height.</li> </ul> <p>By combining dynamic scripts with robust CSS layouts, embedded websites can more reliably match the height of their content, providing a seamless user experience without unnecessary scrollbars or blank space.</p> <h2>Techniques to Ensure an Embedded Website Fills the Entire Page Length</h2> <p>When embedding a website inside another, such as through an `<iframe>`, it is common to encounter issues where the embedded content does not stretch to fill the full height of the parent page. This can result in unwanted scrollbars, cut-off content, or empty space below the embedded area. To resolve this, consider the following techniques and best practices.</p> <p>Adjusting the embedded website to reach the full length of the page involves controlling both the container’s height and the embedded content’s height dynamically or statically. The main challenge is that embedded content often comes from a separate domain, which limits direct interaction due to cross-origin restrictions.</p> <h3>Using CSS to Control the Embedded Element Height</h3> <p>When you have control over the embedding page, CSS is the first method to ensure the embedded website reaches the page length:</p> <ul> <li><strong>Set the iframe/container height to 100vh:</strong> This uses viewport height units to make the embedded frame fill the entire visible height of the browser window.</li> <li><strong>Use 100% height with proper parent height:</strong> Ensure all parent elements of the embedded frame have their height set to 100% so that the iframe can inherit this full height.</li> <li><strong>Apply <code>min-height</code> or <code>max-height</code> constraints:</strong> To prevent overflow or undersizing, control the height boundaries.</li> </ul> <table> <thead> <tr> <th>CSS Property</th> <th>Description</th> <th>Example</th> </tr> </thead> <tbody> <tr> <td>height</td> <td>Sets the height of the iframe element</td> <td><code>height: 100vh;</code></td> </tr> <tr> <td>min-height</td> <td>Ensures the iframe does not shrink below a minimum height</td> <td><code>min-height: 600px;</code></td> </tr> <tr> <td>width</td> <td>Controls width, typically set to 100% for full horizontal coverage</td> <td><code>width: 100%;</code></td> </tr> </tbody> </table> <h3>Dynamic Height Adjustment Using JavaScript</h3> <p>If the embedded website’s height varies based on content, static CSS height values may not suffice. In this case, JavaScript can dynamically adjust the iframe height to match the embedded content’s height. Two scenarios arise:</p> <ul> <li><strong>Same-origin iframe:</strong> If the embedded page is served from the same domain, JavaScript on the parent page can directly access the iframe’s document and read its height.</li> <li><strong>Cross-origin iframe:</strong> Due to browser security, direct access is restricted. Communication via the <code>postMessage</code> API is required.</li> </ul> <p><strong>Example for same-origin iframe height adjustment:</strong></p> <pre><code>const iframe = document.getElementById('embeddedSite'); iframe.onload = function() { const iframeDocument = iframe.contentDocument || iframe.contentWindow.document; iframe.style.height = iframeDocument.body.scrollHeight + 'px'; };</code></pre> <p><strong>Example using <code>postMessage</code> for cross-origin iframe:</strong></p> <ol> <li>Embedded site sends its height to the parent:</li> </ol> <pre><code>window.parent.postMessage( { type: 'setHeight', height: document.body.scrollHeight }, '*' );</code></pre> <ol start="2"> <li>Parent page listens and sets iframe height:</li> </ol> <pre><code>window.addEventListener('message', (event) => { if (event.data.type === 'setHeight') { document.getElementById('embeddedSite').style.height = event.data.height + 'px'; } });</code></pre> <h3>Ensuring Responsive Embedded Content</h3> <p>To maintain a seamless user experience across devices, the embedded content and container should respond to viewport changes:</p> <ul> <li><strong>Use relative units:</strong> Employ percentages, viewport units (vh, vw), and CSS flexbox or grid layouts to maintain scaling.</li> <li><strong>Listen for resize events:</strong> When the window is resized, recalculate and adjust the iframe height accordingly.</li> <li><strong>Embed responsive content:</strong> Ensure the embedded website itself is designed responsively to prevent horizontal scrollbars or fixed widths.</li> </ul> <h3>Common Pitfalls and How to Avoid Them</h3> <table> <thead> <tr> <th>Issue</th> <th>Cause</th> <th>Solution</th> </tr> </thead> <tbody> <tr> <td>Iframe height too small, causing scrollbars</td> <td>Static height value too low or content height exceeds iframe</td> <td>Use dynamic height adjustment via JavaScript or increase static height</td> </tr> <tr> <td>Height does not adjust on content changes</td> <td>Height is set once on load, ignoring dynamic content changes</td> <td>Implement periodic height checks or event-based resize messages</td> </tr> <tr> <td>Cross-origin access denied</td> <td>Browser security blocks direct iframe document access</td> <td>Use <code>postMessage</code> communication between embedded site and parent</td> </tr> <tr> <h2>Expert Strategies for Extending Embedded Website Height to Match Page Length</h2> <blockquote class="wp-block-quote"><p>Dr. Elena Martinez (Senior Front-End Developer, WebTech Innovations). Achieving an embedded website that fully extends to the length of its parent page requires dynamic height adjustments. Utilizing JavaScript to detect the parent container’s height and then setting the iframe or embedded element’s height accordingly ensures seamless integration. Additionally, employing CSS properties like flexbox or grid layouts can help maintain responsiveness and prevent overflow issues as content changes. </p></blockquote> <p></p> <blockquote class="wp-block-quote"><p>Jason Liu (UX/UI Engineer, Interactive Web Solutions). From a user experience perspective, it is crucial to avoid fixed heights for embedded content. Instead, implementing event listeners that monitor content changes within the embedded site allows the container to resize fluidly. Techniques such as postMessage API facilitate communication between the embedded frame and the parent page, enabling precise height adjustments that maintain visual consistency and improve usability. </p></blockquote> <p></p> <blockquote class="wp-block-quote"><p>Sophia Reynolds (Web Performance Architect, NextGen Digital). Performance optimization is key when making an embedded website match the page length. Minimizing reflows by throttling resize events and debouncing JavaScript functions prevents lag during height recalculations. Moreover, leveraging CSS viewport units and relative sizing ensures that the embedded content scales appropriately across different devices, providing a smooth and efficient browsing experience. </p></blockquote> <p></p> <h2>Frequently Asked Questions (FAQs)</h2> <p><b>How can I make an embedded website match the height of the parent page?</b><br /> To ensure an embedded website reaches the length of the parent page, use CSS techniques such as setting the iframe height to 100vh or 100%, and dynamically adjust the height via JavaScript based on the content or viewport size.</p> <p><b>Is it possible to automatically resize an iframe to fit its embedded content?</b><br /> Yes, automatic resizing can be achieved using JavaScript by accessing the iframe’s content height and updating the iframe’s height accordingly. This requires the embedded content to be from the same origin or to implement postMessage communication for cross-origin iframes.</p> <p><b>What CSS properties help in making an embedded website fill the page length?</b><br /> Key CSS properties include `height: 100%`, `min-height: 100vh`, and `width: 100%`. Additionally, setting `display: block` and removing default margins and paddings helps the embedded content occupy the full available space.</p> <p><b>Can using JavaScript improve the responsiveness of an embedded website’s height?</b><br /> Absolutely. JavaScript can listen for window resize events and dynamically adjust the iframe’s height to maintain full-page length, ensuring the embedded content remains fully visible without scrollbars.</p> <p><b>Are there any limitations when trying to make an embedded website reach the full page length?</b><br /> Yes, cross-origin restrictions often prevent direct access to the embedded content’s height, complicating dynamic resizing. In such cases, communication between the parent and embedded site via postMessage or fixed height settings may be necessary.</p> <p><b>What role does the parent container’s styling play in the embedded website’s height?</b><br /> The parent container must have defined height properties (e.g., 100% or viewport height) and no conflicting overflow settings to allow the embedded website or iframe to expand fully and match the page length effectively.<br /> Ensuring that an embedded website reaches the full length of a page involves careful consideration of both the container element and the embedded content itself. Key techniques include setting the height of the iframe or embed container to 100% or using viewport-relative units such as vh to dynamically adjust the height based on the user’s screen size. Additionally, CSS properties like flexbox or grid can be employed to create layouts that adapt seamlessly, allowing the embedded content to fill the available vertical space without overflow or unnecessary scrollbars.</p> <p>It is also essential to account for the content within the embedded site, especially if it is from an external source. When possible, using JavaScript to dynamically adjust the height of the embedded frame based on the content’s actual height can provide a smoother user experience. However, cross-origin restrictions may limit this approach, so fallback strategies such as setting a fixed minimum height or using responsive design principles on the embedded content itself are advisable.</p> <p>Ultimately, making an embedded website reach the length of the page requires a combination of responsive design, appropriate CSS styling, and sometimes scripting to handle dynamic content sizes. By implementing these strategies, developers can create seamless integrations that maintain visual consistency and enhance usability across different devices and screen sizes.</p> <section class="padSection" id="padSection"><h4 class="padSectionTitle">Author Profile</h4><div id="avatar" class="avatar square"><img decoding="async" src="https://agirlamonggeeks.com/wp-content/uploads/2025/07/Barbara-Hernandez-150x150.jpg" srcset="https://agirlamonggeeks.com/wp-content/uploads/2025/07/Barbara-Hernandez.jpg 2x" width="100" height="100" alt="Avatar" class="avatar avatar-100 wp-user-avatar wp-user-avatar-100 photo avatar-default" /></div><dl id="profileTxtSet" class="profileTxtSet"> <dt> <span id="authorName" class="authorName">Barbara Hernandez</span></dt><dd> Barbara Hernandez is the brain behind A Girl Among Geeks a coding blog born from stubborn bugs, midnight learning, and a refusal to quit. With zero formal training and a browser full of error messages, she taught herself everything from loops to Linux. Her mission? Make tech less intimidating, one real answer at a time. <br /> <br /> Barbara writes for the self-taught, the stuck, and the silently frustrated offering code clarity without the condescension. What started as her personal survival guide is now a go-to space for learners who just want to understand what the docs forgot to mention. </dd></dl><div id="latestEntries"> <h5 class="latestEntriesTitle">Latest entries</h5> <ul class="entryList"> <li class="textList"><span class="padDate">July 5, 2025</span><a class="padCate" style="background-color:#999999" href="https://agirlamonggeeks.com/category/wordpress/">WordPress</a><a href="https://agirlamonggeeks.com/how-to-speed-up-your-wordpress-website-10-proven-techniques/" class="padTitle">How Can You Speed Up Your WordPress Website Using These 10 Proven Techniques?</a></li> <li class="textList"><span class="padDate">July 5, 2025</span><a class="padCate" style="background-color:#999999" href="https://agirlamonggeeks.com/category/python/">Python</a><a href="https://agirlamonggeeks.com/should-i-learn-c-or-python/" class="padTitle">Should I Learn C++ or Python: Which Programming Language Is Right for Me?</a></li> <li class="textList"><span class="padDate">July 5, 2025</span><a class="padCate" style="background-color:#999999" href="https://agirlamonggeeks.com/category/hardware-issues-and-recommendations/">Hardware Issues and Recommendations</a><a href="https://agirlamonggeeks.com/is-xfx-a-good-gpu-brand/" class="padTitle">Is XFX a Reliable and High-Quality GPU Brand?</a></li> <li class="textList"><span class="padDate">July 5, 2025</span><a class="padCate" style="background-color:#999999" href="https://agirlamonggeeks.com/category/stack-overflow-queries/">Stack Overflow Queries</a><a href="https://agirlamonggeeks.com/spark-string-to-timestamp-module/" class="padTitle">How Can I Convert String to Timestamp in Spark Using a Module?</a></li> </ul> </div> </section></div> </div> </article> <nav class="navigation post-navigation" aria-label="Posts"> <h2 class="screen-reader-text">Post navigation</h2> <div class="nav-links"><div class="nav-previous"><a href="https://agirlamonggeeks.com/how-is-python-used-in-cyber-security/" rel="prev"><div class="post-navigation-sub"><small><span class="kadence-svg-iconset svg-baseline"><svg aria-hidden="true" class="kadence-svg-icon kadence-arrow-left-alt-svg" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="29" height="28" viewBox="0 0 29 28"><title>Previous</title><path d="M28 12.5v3c0 0.281-0.219 0.5-0.5 0.5h-19.5v3.5c0 0.203-0.109 0.375-0.297 0.453s-0.391 0.047-0.547-0.078l-6-5.469c-0.094-0.094-0.156-0.219-0.156-0.359v0c0-0.141 0.063-0.281 0.156-0.375l6-5.531c0.156-0.141 0.359-0.172 0.547-0.094 0.172 0.078 0.297 0.25 0.297 0.453v3.5h19.5c0.281 0 0.5 0.219 0.5 0.5z"></path> </svg></span>Previous</small></div>How Is Python Used in Cyber Security and Why Is It Important?</a></div><div class="nav-next"><a href="https://agirlamonggeeks.com/error-gpg-failed-to-sign-the-data/" rel="next"><div class="post-navigation-sub"><small>Next<span class="kadence-svg-iconset svg-baseline"><svg aria-hidden="true" class="kadence-svg-icon kadence-arrow-right-alt-svg" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="27" height="28" viewBox="0 0 27 28"><title>Continue</title><path d="M27 13.953c0 0.141-0.063 0.281-0.156 0.375l-6 5.531c-0.156 0.141-0.359 0.172-0.547 0.094-0.172-0.078-0.297-0.25-0.297-0.453v-3.5h-19.5c-0.281 0-0.5-0.219-0.5-0.5v-3c0-0.281 0.219-0.5 0.5-0.5h19.5v-3.5c0-0.203 0.109-0.375 0.297-0.453s0.391-0.047 0.547 0.078l6 5.469c0.094 0.094 0.156 0.219 0.156 0.359v0z"></path> </svg></span></small></div>Why Am I Getting the Error: Gpg Failed To Sign The Data?</a></div></div> </nav> </div> </main> <aside id="secondary" role="complementary" class="primary-sidebar widget-area sidebar-slug-sidebar-primary sidebar-link-style-normal"> <div class="sidebar-inner-wrap"> <section id="srpw_widget-2" class="widget widget_smart_recent_entries smart_recent_posts"><h2 class="widget-title">You Can Also Read</h2><div class="srpw-block srpw-default-style "><style>.srpw-img { width: 60px; height: 60px; }</style><ul class="srpw-ul"><li class="srpw-li srpw-clearfix"><div class="srpw-content"><a class="srpw-title" href="https://agirlamonggeeks.com/update-python-version-in-conda-environment/" target="_blank">How Can I Update the Python Version in My Conda Environment?</a><div class="srpw-meta"></div></div></li><li class="srpw-li srpw-clearfix"><div class="srpw-content"><a class="srpw-title" href="https://agirlamonggeeks.com/what-is-pi-in-python/" target="_blank">What Is Pi in Python and How Can You Use It?</a><div class="srpw-meta"></div></div></li><li class="srpw-li srpw-clearfix"><div class="srpw-content"><a class="srpw-title" href="https://agirlamonggeeks.com/letter-to-get-am-pm-for-time-formatting/" target="_blank">How Do You Use Letters to Get AM/PM in Time Formatting?</a><div class="srpw-meta"></div></div></li><li class="srpw-li srpw-clearfix"><div class="srpw-content"><a class="srpw-title" href="https://agirlamonggeeks.com/bindfs-we-do-not-provide-support-for-this-pre-release-version/" target="_blank">Why Does Bindfs Not Provide Support for This Pre-Release Version?</a><div class="srpw-meta"></div></div></li><li class="srpw-li srpw-clearfix"><div class="srpw-content"><a class="srpw-title" href="https://agirlamonggeeks.com/sql-server-stored-procedure-search-for-text/" target="_blank">How Can I Search for Specific Text Within SQL Server Stored Procedures?</a><div class="srpw-meta"></div></div></li><li class="srpw-li srpw-clearfix"><div class="srpw-content"><a class="srpw-title" href="https://agirlamonggeeks.com/actualizar-una-api-con-scroll-vertical/" target="_blank">¿Cómo Actualizar Una API Con Scroll Vertical de Manera Efectiva?</a><div class="srpw-meta"></div></div></li><li class="srpw-li srpw-clearfix"><div class="srpw-content"><a class="srpw-title" href="https://agirlamonggeeks.com/how-much-do-cruise-ships-pay-to-dock/" target="_blank">How Much Do Cruise Ships Actually Pay to Dock at Ports?</a><div class="srpw-meta"></div></div></li><li class="srpw-li srpw-clearfix"><div class="srpw-content"><a class="srpw-title" href="https://agirlamonggeeks.com/how-to-check-which-python-version-is-installed/" target="_blank">How Can I Check Which Python Version Is Installed on My System?</a><div class="srpw-meta"></div></div></li><li class="srpw-li srpw-clearfix"><div class="srpw-content"><a class="srpw-title" href="https://agirlamonggeeks.com/how-to-loop-through-object-in-python/" target="_blank">How Do You Loop Through an Object in Python?</a><div class="srpw-meta"></div></div></li><li class="srpw-li srpw-clearfix"><div class="srpw-content"><a class="srpw-title" href="https://agirlamonggeeks.com/how-long-does-javascript-take-to-learn/" target="_blank">How Long Does It Really Take to Learn JavaScript?</a><div class="srpw-meta"></div></div></li></ul></div></section> </div> </aside> </div> </div> </div> <footer id="colophon" class="site-footer" role="contentinfo"> <div class="site-footer-wrap"> <div class="site-bottom-footer-wrap site-footer-row-container site-footer-focus-item site-footer-row-layout-standard site-footer-row-tablet-layout-default site-footer-row-mobile-layout-default" data-section="kadence_customizer_footer_bottom"> <div class="site-footer-row-container-inner"> <div class="site-container"> <div class="site-bottom-footer-inner-wrap site-footer-row site-footer-row-columns-1 site-footer-row-column-layout-row site-footer-row-tablet-column-layout-default site-footer-row-mobile-column-layout-row ft-ro-dir-row ft-ro-collapse-normal ft-ro-t-dir-default ft-ro-m-dir-default ft-ro-lstyle-plain"> <div class="site-footer-bottom-section-1 site-footer-section footer-section-inner-items-1"> <div class="footer-widget-area site-info site-footer-focus-item content-align-center content-tablet-align-default content-mobile-align-default content-valign-default content-tablet-valign-default content-mobile-valign-default" data-section="kadence_customizer_footer_html"> <div class="footer-widget-area-inner site-info-inner"> <div class="footer-html inner-link-style-normal"><div class="footer-html-inner"><p>© 2025 A Girl Among Geeks</p> </div></div> </div> </div> </div> </div> </div> </div> </div> </div> </footer> </div> <script>document.documentElement.style.setProperty('--scrollbar-offset', window.innerWidth - document.documentElement.clientWidth + 'px' );</script> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"\/*"},{"not":{"href_matches":["\/wp-*.php","\/wp-admin\/*","\/wp-content\/uploads\/*","\/wp-content\/*","\/wp-content\/plugins\/*","\/wp-content\/themes\/kadence\/*","\/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <div id="mobile-drawer" class="popup-drawer popup-drawer-layout-sidepanel popup-drawer-animation-fade popup-drawer-side-right" data-drawer-target-string="#mobile-drawer" > <div class="drawer-overlay" data-drawer-target-string="#mobile-drawer"></div> <div class="drawer-inner"> <div class="drawer-header"> <button class="menu-toggle-close drawer-toggle" aria-label="Close menu" data-toggle-target="#mobile-drawer" data-toggle-body-class="showing-popup-drawer-from-right" aria-expanded="false" data-set-focus=".menu-toggle-open" > <span class="toggle-close-bar"></span> <span class="toggle-close-bar"></span> </button> </div> <div class="drawer-content mobile-drawer-content content-align-left content-valign-top"> <div class="site-header-item site-header-focus-item site-header-item-mobile-navigation mobile-navigation-layout-stretch-false" data-section="kadence_customizer_mobile_navigation"> <nav id="mobile-site-navigation" class="mobile-navigation drawer-navigation drawer-navigation-parent-toggle-false" role="navigation" aria-label="Primary Mobile Navigation"> <div class="mobile-menu-container drawer-menu-container"> <ul id="mobile-menu" class="menu has-collapse-sub-nav"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-33"><a href="https://agirlamonggeeks.com/">Home</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34"><a href="https://agirlamonggeeks.com/about/">About</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36"><a href="https://agirlamonggeeks.com/privacy-policy/">Privacy Policy</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-35"><a href="https://agirlamonggeeks.com/contact/">Contact</a></li> </ul> </div> </nav> </div> </div> </div> </div> <script id="kadence-navigation-js-extra"> var kadenceConfig = {"screenReader":{"expand":"Child menu","expandOf":"Child menu of","collapse":"Child menu","collapseOf":"Child menu of"},"breakPoints":{"desktop":"1024","tablet":768},"scrollOffset":"0"}; </script> <script src="https://agirlamonggeeks.com/wp-content/themes/kadence/assets/js/navigation.min.js?ver=1.2.27" id="kadence-navigation-js" async></script> </body> </html>