BugWP logo BugWP
Back to Community
Home / Community / Theme → Twenty twenty

How to Remove or Modify the Back to Top Button in Twenty Twenty Theme

11 threads Sep 10, 2025 Theme → Twenty twenty

Content

Many users of the Twenty Twenty theme appreciate its clean design but wish to remove the "Back to Top" button that appears in the lower-right corner of the screen. This button is a core part of the theme's design, intended to improve user experience on long-scrolling pages. However, it may not be necessary for all sites, especially those with minimal vertical content or a specific design aesthetic.

Fortunately, removing this element is a straightforward process that can be accomplished with a small snippet of custom CSS, eliminating the need to edit core theme files.

Solution: Hide the Button with CSS

The most common and effective method to remove the "Back to Top" button is by adding Custom CSS through the WordPress Customizer. This approach is safe and will not be overwritten by future theme updates, provided the CSS is added correctly.

To implement this solution, follow these steps:

  1. Navigate to your WordPress Dashboard.
  2. Go to Appearance → Customize.
  3. In the Customizer panel, locate and click on the Additional CSS option. This is typically found at the very bottom of the menu.
  4. A text box will appear where you can enter your custom CSS. Copy and paste the following code snippet into the box:

    #site-footer .to-the-top {
      display: none;
    }
  5. Click the Publish button to save your changes.

The "Back to Top" button should now be hidden from view on your site.

How It Works

The CSS selector #site-footer .to-the-top specifically targets the container of the "Back to Top" button. The display: none; property tells the browser not to render this element, effectively removing it from the page layout without affecting any other functionality.

Important Considerations

This method is a visual fix and does not alter the underlying theme code. It is the recommended way to make such a design change. Before making any modifications, it is always a good practice to ensure you are using a child theme. This protects your customizations from being lost when the parent Twenty Twenty theme receives an update.

If the CSS does not work immediately, you may need to clear your site's cache (if you are using a caching plugin) and your browser's cache to see the changes take effect.

Related Support Threads Support