BugWP logo BugWP
Back to Community
Home / Community / Theme → Total

How to Remove or Hide Breadcrumbs in the Total Theme

32 threads Sep 16, 2025 Theme → Total

Content

Many users of the Total WordPress theme find the breadcrumb navigation bar (the section that displays a path like "Home / About Us") unnecessary for their design, especially on the homepage. This guide will walk you through the most common and effective methods to remove it.

Why Would You Want to Remove Breadcrumbs?

Breadcrumbs are a helpful navigational aid for users on large websites. However, on simpler sites or single-page designs, they can be seen as visual clutter. A frequent request is to remove them from the homepage to create a cleaner, more focused landing page for visitors.

Method 1: The CSS Solution (Quick & Easy)

The most straightforward way to hide the breadcrumb section on all pages is by adding a small snippet of CSS code. This method is non-destructive and won't affect your theme files.

  1. From your WordPress dashboard, navigate to Appearance > Customize.
  2. Click on Additional CSS.
  3. Paste the following code into the CSS editor: 
    .ht-main-header {
    display: none;
}
  4. Click Publish to save your changes.

This CSS targets the class of the header bar that contains both the page title and the breadcrumbs, hiding the entire element.

Method 2: Hide the Title and Breadcrumbs Individually

If you only want to remove the breadcrumbs but keep the main page title visible, you can use a different CSS approach. The Total theme includes an action hook for the breadcrumbs specifically.

  1. Go to Appearance > Customize > Additional CSS.
  2. Paste this code to target just the breadcrumbs: 
    .ht-main-header .total-breadcrumbs {
    display: none;
}
  3. Click Publish.

Method 3: Per-Page Control

The Total theme often includes a meta box on individual page and post editing screens that allows you to control elements on a per-page basis.

  1. Edit the page where you want to hide the breadcrumbs.
  2. Scroll down to the page settings meta box (often labeled "Total Page Settings").
  3. Look for an option such as "Hide Title" or "Disable Breadcrumbs" and enable it.
  4. Update or Publish the page.

Note: The availability and labeling of this option can vary. If you cannot find it, the CSS method (Method 1 or 2) is your best bet.

Troubleshooting

  • CSS Not Working? Always clear your website's cache and your browser's cache after adding new CSS to ensure you are seeing the latest version of the site.
  • Only Targeting the Homepage: To hide the breadcrumbs only on the homepage, prefix the CSS with .home. For example: 
    .home .ht-main-header {
    display: none;
}

By using these methods, you can easily tailor the appearance of your Total theme to create a more minimalist and focused user experience.

Related Support Threads Support