[Support request] inserting page title in sticky header

[Henry]

I want to put the ‘Content Title’ in the sticky heading, but I do not want that to happen on the home page. What is happening now is that the title appears in the heading by some mysterious means, and whatever does that ignores the GP ‘disable elements’ setting.

I dug around in your support forums and found what I thought was the answer. So I installed the Code Snippets plugin http://wordpress.org/plugins/code-snippets/ and added the snip below.

My problems are:
1) I don’t know where the Content Title is getting inserted into the sticky header. If I could find that, I could move the conditional logic below to that function, which would fix whatever magic function ignores the GP ‘disable elements’ setting.
2) If I could disable that magic, I still have a problem that the_title() returns null. How do I get the title of the page within this generate_inside_navigation hook?

add_action( 'generate_inside_navigation','generate_site_title_navigation' );
function generate_site_title_navigation()
{
    ?>
    <p class="menu-site-title">
        <a href="http://crystal.creates.today">
	      <img src="http://crystal.creates.today/wp-content/uploads/sites/6/2018/06/crystal-logo-5.png" />
	    </a>
		<span class = 'sticky-entry-title'  >
            <?php 
                $thetitle = the_title(); 
//              if (trim($thetitle) <> 'Home') echo $thetitle ; else echo '&nbsp';
// echo ' title goes here'; // test1
// echo $thetitle ; // test2
//  var_dump($thetitle); // null // test3
            ?>
          </span>
   	</p>  
    <?php
}

[David]

Hi Henry,

instead of that method you could simply do this function:

add_action( 'generate_inside_navigation','generate_insert_into_navigation' );
function generate_insert_into_navigation()
{
	if ( ! is_front_page() && ! is_home() ) {
		the_title( '<span class="sticky-entry-title">', '</span>' );
	}
}

You may want to replace the span tags for H1 – if you are disabling the content title.
And then use this CSS instead to style it and remove it from the navigation when it’s not sticky.

.sticky-entry-title {
	float: left;
	line-height: 60px;
	color: #fff;
}
.main-navigation:not(.is_stuck) .sticky-entry-title {
	display: none;
}

The logo can then be added to the sticky navigation in the Customiser > Layout > Primary Navigation: Logo and set it to Sticky Only.

[Henry]

Thanks. This put me on the right track.

Everything works perfectly now, except 1 thing: On the sticky mobile header I have the logo on the left and the hamburger on the right. So I would like to have sticky row under that with the page title. Any suggestions?

When I’m done I will post the complete solution here in case somebody else wants to do this

[David]

Hi Henry, how does it look if you switch off the mobile header?

[Henry]

When I tried turning of the mobile header the only change seems to be that the hamburger is centered.

[David]

Hi Henry, if you are using the code i provided above and don’t use the Mobile Header then the result should be the same on desktop and mobile.

[Author]

Posts