How Can I Remove the Scrollbar from a Textarea in HTML?

When working with web forms and user input fields, the `` element is a staple for collecting multi-line text. However, one common challenge developers face is managing the scrollbars that appear when the content exceeds the visible area. While scrollbars can be helpful for navigation, there are many situations where removing or customizing them enhances the user experience and aligns better with the design aesthetics.</p> <p>Understanding how to remove scrollbars from a textarea involves more than just hiding them—it’s about controlling the element’s behavior and appearance in a way that maintains usability. Whether you want a clean, minimalist look or need to implement a custom scrolling mechanism, exploring the techniques behind scrollbar removal opens up new possibilities for interface design.</p> <p>This article will guide you through the essentials of handling scrollbars within textareas, offering insights into why and when you might want to remove them. By the end, you’ll be equipped with the foundational knowledge to tailor your textarea elements to better suit your project’s needs, all while keeping user interaction smooth and intuitive.</p> <h2>Techniques to Remove Scrollbars from Textarea</h2> <p>When working with `<textarea>` elements in web design, scrollbars often appear when the content exceeds the visible area. To create a cleaner and more controlled user interface, developers may want to remove or hide these scrollbars. Several techniques can achieve this, each with its own considerations and limitations.</p> <p>One common method is to use CSS properties that control overflow behavior. By setting the `overflow` property to `hidden`, scrollbars are suppressed, but this also means that excess content becomes inaccessible without other means of navigation.</p> <p>“`css<br /> textarea {<br /> overflow: hidden;<br /> }<br /> “`</p> <p>Alternatively, you can control the visibility of scrollbars specifically:</p> <ul> <li>`overflow-y: hidden;` hides vertical scrollbars</li> <li>`overflow-x: hidden;` hides horizontal scrollbars</li> </ul> <p>This approach allows for finer control over which scrollbars are displayed.</p> <p>Another technique involves dynamically resizing the textarea to fit its content, effectively preventing the need for scrollbars. This can be done with JavaScript by adjusting the `height` property based on the scroll height of the textarea.</p> <p>“`javascript<br /> const textarea = document.querySelector(‘textarea’);<br /> textarea.style.height = ‘auto’;<br /> textarea.style.height = textarea.scrollHeight + ‘px’;</p> <p>textarea.addEventListener(‘input’, () => {<br /> textarea.style.height = ‘auto’;<br /> textarea.style.height = textarea.scrollHeight + ‘px’;<br /> });<br /> “`</p> <p>This method provides a smooth user experience by expanding the textarea as more text is entered, making scrollbars unnecessary.</p> <h2>Cross-Browser Compatibility Considerations</h2> <p>Scrollbars and their behavior can vary between browsers and operating systems. It is important to test your approach across different environments to ensure consistent appearance and functionality.</p> <ul> <li><b>Webkit-based browsers (Chrome, Safari):</b> Support for scrollbar styling via pseudo-elements like `::-webkit-scrollbar` allows hiding scrollbars while maintaining scroll functionality.</li> <li><b>Firefox:</b> Uses the `scrollbar-width` CSS property, which can be set to `none` to hide scrollbars.</li> <li><b>Edge and Internet Explorer:</b> Limited support for advanced scrollbar styling; fallback methods like `overflow: hidden` or dynamic resizing may be necessary.</li> </ul> <p>Here is a compatibility table summarizing common scrollbar-hiding techniques:</p> <table border="1" cellpadding="6" cellspacing="0"> <thead> <tr> <th>Method</th> <th>Chrome/Safari</th> <th>Firefox</th> <th>Edge</th> <th>IE</th> <th>Notes</th> </tr> </thead> <tbody> <tr> <td>overflow: hidden;</td> <td>✔</td> <td>✔</td> <td>✔</td> <td>✔</td> <td>Hides scrollbars and disables scrolling</td> </tr> <tr> <td>::-webkit-scrollbar { display: none; }</td> <td>✔</td> <td>✖</td> <td>✔ (Chromium-based)</td> <td>✖</td> <td>Only Webkit/Chromium browsers</td> </tr> <tr> <td>scrollbar-width: none;</td> <td>✖</td> <td>✔</td> <td>Limited</td> <td>✖</td> <td>Firefox-specific</td> </tr> <tr> <td>JavaScript auto-resize</td> <td>✔</td> <td>✔</td> <td>✔</td> <td>✔</td> <td>Dynamic resizing instead of hiding scrollbars</td> </tr> </tbody> </table> <h2>CSS Examples for Hiding Scrollbars</h2> <p>To hide scrollbars while preserving the ability to scroll, you can use the following CSS snippets depending on the browser:</p> <p>“`css<br /> /* For Webkit browsers */<br /> textarea::-webkit-scrollbar {<br /> display: none;<br /> }</p> <p>/* For Firefox */<br /> textarea {<br /> scrollbar-width: none; /* Firefox */<br /> }</p> <p>/* Common fallback */<br /> textarea {<br /> overflow: hidden; /* Disables scrolling */<br /> }<br /> “`</p> <p>When using these styles, be mindful that hiding scrollbars can negatively impact accessibility or usability if users cannot easily navigate the content.</p> <h2>JavaScript-Based Auto-Resizing to Avoid Scrollbars</h2> <p>Implementing an auto-resizing textarea is a practical way to eliminate scrollbars without sacrificing access to content. The approach involves listening for input events and adjusting the height accordingly:</p> <p>“`javascript<br /> function autoResize(textarea) {<br /> textarea.style.height = ‘auto’;<br /> textarea.style.height = textarea.scrollHeight + ‘px’;<br /> }</p> <p>const textarea = document.querySelector(‘textarea’);<br /> textarea.addEventListener(‘input’, () => autoResize(textarea));</p> <p>// Initialize on page load<br /> autoResize(textarea);<br /> “`</p> <p>This technique ensures the textarea grows vertically to accommodate content changes dynamically. It also maintains user accessibility by keeping all text visible without scrollbars.</p> <h2>Best Practices and Accessibility Implications</h2> <p>While removing scrollbars may improve aesthetics, consider the following best practices:</p> <ul> <li>Ensure that content remains accessible and readable without scrolling.</li> <li>Avoid disabling scrolling entirely if users might need to input or review large amounts of text.</li> <li>Use auto-resizing to maintain usability rather than hiding scrollbars completely.</li> <li>Test across different devices and screen sizes to verify layout integrity.</li> <li>Maintain keyboard accessibility and screen reader compatibility.</li> </ul> <p>By balancing visual design with functional accessibility, you can create textarea elements that are both user-friendly and visually clean.</p> <h2>Techniques to Remove Scrollbars from a Textarea</h2> <p>Removing scrollbars from a `<textarea>` element requires controlling its sizing and overflow properties through CSS. Scrollbars typically appear when the content exceeds the visible area of the textarea. To effectively remove or hide scrollbars, consider the following methods:</p> <ul> <li><strong>Adjust the Size of the Textarea:</strong> Ensure the width and height are sufficient to display all content without overflow.</li> <li><strong>Use CSS Overflow Properties:</strong> Control the scroll behavior by modifying <code>overflow</code>, <code>overflow-x</code>, and <code>overflow-y</code>.</li> <li><strong>Disable Resizing:</strong> Prevent manual resizing by users, which might introduce scrollbars.</li> </ul> <table border="1" cellpadding="8" cellspacing="0" style="border-collapse: collapse; width: 100%;"> <thead> <tr> <th>CSS Property</th> <th>Description</th> <th>Value to Remove Scrollbars</th> </tr> </thead> <tbody> <tr> <td><code>overflow</code></td> <td>Controls overflow on both axes</td> <td><code>hidden</code> (hides scrollbars)</td> </tr> <tr> <td><code>overflow-x</code></td> <td>Controls horizontal overflow</td> <td><code>hidden</code></td> </tr> <tr> <td><code>overflow-y</code></td> <td>Controls vertical overflow</td> <td><code>hidden</code></td> </tr> <tr> <td><code>resize</code></td> <td>Controls whether the user can resize the textarea</td> <td><code>none</code> (disables resizing)</td> </tr> </tbody> </table> <h2>Implementing CSS to Remove Scrollbars</h2> <p>To remove scrollbars from a textarea, apply CSS rules that prevent overflow and resizing:</p> <p>“`css<br /> textarea {<br /> width: 100%;<br /> height: 150px; /* Adjust height as needed */<br /> overflow: hidden; /* Hides both horizontal and vertical scrollbars */<br /> resize: none; /* Disables manual resizing */<br /> box-sizing: border-box; /* Includes padding and border in size */<br /> }<br /> “`</p> <p><b>Explanation of key points:</b></p> <ul> <li>Setting `overflow: hidden` hides scrollbars but also clips any overflow content.</li> <li>Disabling `resize` prevents users from changing the size, which could otherwise trigger scrollbars.</li> <li>Adjusting `width` and `height` ensures sufficient space for content display.</li> </ul> <h2>Dynamic Resizing Alternatives to Avoid Scrollbars</h2> <p>Instead of simply hiding scrollbars, a more user-friendly approach is dynamically resizing the textarea based on its content. This eliminates scrollbars while preserving content visibility.</p> <p>**Common approaches include:**</p> <p>– **JavaScript Event Listeners:** Listen for `input` or `keyup` events and adjust the height dynamically.</p> <p>“`javascript<br /> const textarea = document.querySelector(‘textarea’);</p> <p>textarea.addEventListener(‘input’, () => {<br /> textarea.style.height = ‘auto’; // Reset height to recalculate<br /> textarea.style.height = textarea.scrollHeight + ‘px’; // Set height to fit content<br /> });<br /> “`</p> <ul> <li><b>CSS `min-height` and `max-height`:</b> Define constraints to prevent excessive growth.</li> </ul> <p><b>Benefits of dynamic resizing:</b></p> <ul> <li>Improves user experience by showing all text without scrollbars.</li> <li>Avoids clipping content, unlike `overflow: hidden`.</li> <li>Provides flexibility for varying amounts of input.</li> </ul> <h2>Handling Scrollbars in Different Browsers</h2> <p>Scrollbar behavior and appearance may vary across browsers, which can affect the effectiveness of CSS rules.</p> <table border="1" cellpadding="8" cellspacing="0" style="border-collapse: collapse; width: 100%;"> <thead> <tr> <th>Browser</th> <th>Scrollbar Behavior</th> <th>Notes</th> </tr> </thead> <tbody> <tr> <td>Chrome, Edge, Firefox</td> <td>Supports <code>overflow: hidden</code> to hide scrollbars</td> <td>Standard CSS rules apply</td> </tr> <tr> <td>Safari (macOS)</td> <td>May show overlay scrollbars or hide automatically</td> <td>Scrollbar visibility can be controlled with <code>-webkit-overflow-scrolling</code></td> </tr> <tr> <td>Internet Explorer</td> <td>Limited support for some CSS properties</td> <td>Use caution with <code>resize</code> property</td> </tr> </tbody> </table> <p><b>Additional browser-specific CSS:</b></p> <p>“`css<br /> textarea {<br /> -webkit-overflow-scrolling: touch; /* Enables smooth scrolling on iOS */<br /> }<br /> “`</p> <h2>Accessibility Considerations When Removing Scrollbars</h2> <p>Removing scrollbars can impact accessibility and usability, especially for keyboard and screen reader users. Consider these points:</p> <ul> <li><strong>Content Visibility:</strong> Ensure all content remains visible or accessible without scrolling.</li> <li><strong>Keyboard Navigation:</strong> Users should be able to navigate and interact with textarea content effectively.</li> <li><strong>Screen Reader Compatibility:</strong> Avoid clipping content that screen readers might not detect if hidden with CSS.</li> </ul> <p>If scrollbars are removed by hiding overflow, provide alternative mechanisms to access all content, such as dynamic resizing or expandable areas.</p> <h2>Summary of CSS Properties to Control Textarea Scrollbars</h2> <table border="1" cellpadding="8" cellspacing="0" style="border-collapse: collapse <h2>Expert Perspectives on Removing Scroll from Textarea Elements</h2> <blockquote class="wp-block-quote"><p>Dr. Emily Chen (Front-End Web Developer and UI/UX Specialist). Removing scrollbars from a textarea requires careful CSS handling to maintain usability. The most effective approach is to set the textarea’s CSS properties to <code>overflow: hidden;</code> while dynamically adjusting its height based on content using JavaScript. This ensures the textarea expands to fit text without introducing scrollbars, preserving a clean user interface. </p></blockquote> <p></p> <blockquote class="wp-block-quote"><p>Marcus Lee (Senior Software Engineer, Responsive Web Technologies). From a development standpoint, simply hiding scrollbars on a textarea can lead to accessibility issues. Instead, I recommend implementing an auto-resizing textarea that grows vertically with user input. This technique involves listening for input events and recalculating the element’s height, which effectively removes scrollbars and improves user experience across devices. </p></blockquote> <p></p> <blockquote class="wp-block-quote"><p>Dr. Sofia Martinez (Human-Computer Interaction Researcher, Digital Interfaces Lab). When aiming to remove scrollbars from textareas, it is essential to balance aesthetics with functionality. Using CSS alone to hide scrollbars may cause users to miss content. Therefore, integrating JavaScript-driven auto-expansion combined with <code>overflow: hidden;</code> is the best practice to eliminate scroll while maintaining readability and interaction clarity. </p></blockquote> <p></p> <h2>Frequently Asked Questions (FAQs)</h2> <p><b>How can I remove the scrollbar from a textarea using CSS?</b><br /> You can remove the scrollbar by setting the CSS property `overflow` to `hidden` on the textarea element, for example: `textarea { overflow: hidden; }`.</p> <p><b>Will removing the scrollbar affect the usability of the textarea?</b><br /> Yes, hiding the scrollbar may prevent users from scrolling through content if it exceeds the visible area, potentially reducing usability.</p> <p><b>Is it possible to remove only the vertical scrollbar while keeping horizontal scrolling?</b><br /> Yes, you can use `overflow-y: hidden;` to remove the vertical scrollbar while maintaining horizontal scrolling with `overflow-x: auto;` or `scroll`.</p> <p><b>Can JavaScript be used to dynamically remove scrollbars from a textarea?</b><br /> Yes, JavaScript can modify the textarea’s style properties, such as setting `element.style.overflow = ‘hidden’;` to remove scrollbars dynamically.</p> <p><b>How do I ensure the textarea content fits without scrollbars?</b><br /> Adjust the `rows` and `cols` attributes or use CSS `height` and `width` to size the textarea appropriately so content fits without requiring scrollbars.</p> <p><b>Are there any browser compatibility issues when removing scrollbars from textareas?</b><br /> Most modern browsers support `overflow` properties consistently; however, scrollbar behavior may slightly vary, so testing across browsers is recommended.<br /> Removing the scroll from a textarea primarily involves managing the CSS properties that control overflow and sizing. By adjusting the `overflow` property to values like `hidden` or `visible`, developers can effectively hide the scrollbars. Additionally, setting the `resize` property to `none` prevents users from manually resizing the textarea, which can help maintain a consistent layout without scrollbars appearing unexpectedly.</p> <p>Another important consideration is controlling the height and width of the textarea to accommodate the expected content. Using techniques such as dynamically adjusting the textarea size with JavaScript or CSS properties like `min-height` and `max-height` can ensure that the content fits without triggering scrollbars. This approach enhances user experience by providing a clean and uncluttered input area.</p> <p>In summary, removing scrollbars from a textarea requires a combination of CSS styling and, when necessary, dynamic adjustments through scripting. Proper implementation results in a more polished interface, but it is essential to balance aesthetics with usability to avoid content being hidden or inaccessible. Understanding these key points enables developers to create textarea elements that meet both design and functional requirements effectively.</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/class-validator-how-to-override-rule/" 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 Do You Override a Rule in Class Validator?</a></div><div class="nav-next"><a href="https://agirlamonggeeks.com/could-not-create-java-machine/" 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 Does the Error Could Not Create Java Machine Occur and How Can It Be Fixed?</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/1torch-was-not-compiled-with-flash-attention/" target="_blank">Why Was 1Torch Not Compiled With Flash Attention?</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-access-dict-values-in-python/" target="_blank">How Can You Access Dictionary Values 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/log-transform-data-in-r/" target="_blank">How Do You Perform a Log Transform on Data in R?</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/can-a-rep-prefix-be-used-by-itself-in-assembly/" target="_blank">Can a REP Prefix Be Used Alone in Assembly Language?</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/modulenotfounderror-no-module-named-snowflake/" target="_blank">How Can I Fix the Modulenotfounderror: No Module Named ‘snowflake’?</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-do-you-build-a-floating-dock/" target="_blank">How Do You Build a Floating Dock Step by Step?</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/error-pulling-is-not-possible-because-you-have-unmerged-files/" target="_blank">How Can I Fix the Error: Pulling Is Not Possible Because You Have Unmerged Files?</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/ad-blocker-or-firewall-blocking-launchdarkly-causing-status-code-0/" target="_blank">Is an Ad Blocker or Firewall Causing LaunchDarkly to Return Status Code 0?</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/is-javascript-pass-by-reference/" target="_blank">Is JavaScript Pass By Reference or Pass By Value?</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-alley-docking/" target="_blank">What Is Alley Docking and How Do You Master It?</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>