Astra Pro Advanced Headers Module

I love using the Astra Page Header (Advanced Headers) in Astra Pro. However, the page title takes up way too much space on the image. Also, the default white text of the page title often fails to contrast with photos, especially when they are not dark.

In the Astra Page Header settings, you can make the page title colour darker, but in my opinion the result does not look good. You can also add an overlay colour to the image. I don’t like this because my photographs are essential to website visitors and should remain clearly visible.

The Astra Page Header module does not natively support a graduated background for the page title, which would help it stand out. I previously used CSS for this effect, but I now disable the page title on images and position it below the photographs instead. More about how to disable and reposition the page title later on in this post.

If you are interested in using CSS to add a graduated background behind the page title (when using Astra Pro’s Advanced Header module), below is an example of how I used to achieve this.

CSS code to add a graduated background behind the page title

/* Target Astra Page Header on desktop */

@media only screen and (min-width: 1440px) {
.postid-xxxxx .ast-advanced-headers-title {
  font-size: 1.25em;
  line-height: 34px;
  color: #ffffff;
  font-weight: 300;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  margin-left: 15%;
  margin-right: 15%;
  padding-top: 20px;
  padding-bottom: 20px;
   }
} 

/* Target Astra Page Header on narrow screens */

@media only screen and (max-width: 1440px) {
.postid-xxxxx .ast-advanced-headers-title {
  font-size: 1em;
  color: #ffffff;
  font-weight: 400;
  background: rgba(0, 0, 0, 0.20);
  border-radius: 5px;
  margin-left: 0%;
  margin-right: 0%;
  padding-top: 15px;
  padding-bottom: 12px;
  line-height: 24px;
  }
}

Disclaimer: I am not an expert in CSS coding. The above CSS is not intended to be an example of best practice in CSS. However, the code works perfectly in my environment, which is Astra Pro, Gutenberg and Spectra Legacy.

How to Disable the Astra Page Title and Reposition it Below the Header

It is possible to disable the page title in the Astra Pro page header module and instead reposition it below; the process is easy.

The procedure is detailed in an Astra Pro documentation page located here, where you will find two blocks of PHP code that will enable this.

Copy The Two Blocks of PHP Code

PHP first block of code

add_filter( 'astra_advanced_header_title', 'remove_page_header_title' );
function remove_page_header_title() {
  return;
}

PHP second block of code

add_filter( 'astra_the_title_enabled', 'display_page_title', 999 );
function display_page_title() {
  return true;
}

You can use the Code Snippets plugin for this

I added the above two blocks of code as separate snippets using the Code Snippets plugin. Activate each snippet with the setting Only run on site front end. The link to the Code Snippets plugin is at the end of this post.

Now go to your post or page that uses an Astra Page Header (or does not use an Astra Page Header), refresh it, and observe that the page title has been removed from the page header image. It has also been repositioned under the image, as in the page header example shown at the top of this post. If you are not using a post or page that has an Astra Pro Page Header, your page title will still be repositioned under the header.

If you implement the official Astra snippets above, you will notice a strange side effect when editing your pages and posts. In modern versions of WordPress, clicking on your main title block reveals a small Disable Title toggle or Eye Icon designed to let you hide the title on a post-by-post basis.

Once you add Astra’s two PHP blocks, the eye icon stops working entirely. No matter how many times you toggle it to “hidden” and update your post, the title always remains visible on your live site.

This happens because the official snippet uses an absolute command (return true;) running at a massive priority level of 999. It acts as a strong signal, completely overriding the choices you save in the editor’s settings.

Instead of the second PHP block shown in Astra’s documentation (linked to above), use this PHP snippet.

add_filter( 'astra_the_title_enabled', 'display_page_title_except_when_hidden', 999 );

function display_page_title_except_when_hidden( $title_enabled ) {
    // 1. Grab the unique ID of the post currently being loaded
    $post_id = get_the_ID();
    
    if ( $post_id ) {
        // 2. Query the database to see if the Astra Eye Icon has been toggled off
        $title_status = get_post_meta( $post_id, 'site-post-title', true );
        
        // 3. If the user clicked the eye icon, respect that choice and hide it
        if ( 'disabled' === $title_status ) {
            return false; 
        }
    }
    
    // 4. Otherwise, maintain the Advanced Header layout default
    return true; 
}

This solution works perfectly in my WordPress environment.

Have you come across this issue in your Astra Page Header or any posts/pages, and did the solution outlined in this post help you? I would love to hear from you in the comments section below.

External Links

Astra Pro: How to Remove Page Header

Code Snippets plugin at WordPress.org

---

Enjoy reading my commentary? Add South Coast View as a Preferred Source on Google to see new posts first.

Posts in Computers and Internet. View all in this subject.