Sticky Header

  • jlhb01 · Member ·

    Hi,
    I’m not sure if anyone here can help me. I am in need of some CSS customization. I’d like to keep the sticky header on my main/home page, but have it scroll up (unsticky) on my posts/pages. I have tried to contact the theme developer to no avail. It’s a third-party theme unfortunately. The only option I have now is to completely remove the header on my posts/pages, which I’d rather not do for navigational purposes.

    This is my site:
    https://randymeisnerretrospective.com/

    The blog I need help with is: (visible only to logged in users)

  • rawalplawit · Member ·

    Hey there, since you are on the professional plan, I’d suggest you use the live chat feature provided to customers with paid plan. https://wordpress.com/help/contact
    Someone from the official team will help you resolve this quicker.

    Did you add the code directly to your .php file or from an option in the customizer page? I believe the theme(Elsie) you are using is available here at wordpress.com too.
    You can also post your question at https://wordpress.org/support/theme/elsie/ for help regarding your theme.

  • jlhb01 · Member ·

    Hi,
    Thanks for responding.

    I tried the live chat feature, but WordPress can’t help me because I (unfortunately) have a third-party theme. I have also tried multiple times to contact the theme developer, but have received no response. The sticky header option is part of the theme. But you can’t toggle the sticky feature on posts/pages. The only option is to remove the header completely.

  • rawalplawit · Member ·

    Ah okay,

    You might have change to a theme that provides a functionality then.

    It’s still possible to achieve that, but you will have to add php code to it. Either by installing a code snippet plugin or editing your theme files directly. Are you comfortable with that?

  • jlhb01 · Member ·

    Yes, I suppose I’m comfortable with it. I’m not familiar with that plugin, but I’d be willing to give it a try.

    The WordPress person I chatted with earlier said this could be fixed with CSS customization. I’m more familiar with that. Unfortunately, they couldn’t help me further since it’s a third-party theme.

  • rawalplawit · Member ·

    I don’t think it’s doable with css alone but it can be done by javascript too.

    But the cleanest and recommended way is to remove it using a filter hook.

    The has-sticky-header class is added to <body class="...., has-sticky-header"> if it’s enabled via the customizer.
    To remove it, and have it only on front page, place the following code either in functions.php or with a code snippet plugin.

    
/**
 * Remove the class <code>has-sticky-tag</code> from pages besides the front page.
 */
if ( ! is_front_page() )
{    
	add_filter( 'body_class', 'remove_body_sticky_class' );    
	function remove_body_sticky_class( $classes )
	{        
		$target_class = ['has-sticky-header'];        
		$classes = array_diff( $classes, $target_class );        
		return $classes;    
	}
}

    Let me know if this works for you. :)

  • jlhb01 · Member ·

    Hi,
    I tried adding it with the code snippet plugin, this is the message I received.

    “Don’t Panic
    The code snippet you are trying to save produced a fatal error on line 6:

    syntax error, unexpected ‘&’
    The previous version of the snippet is unchanged, and the rest of this site should be functioning normally as before.

    Please use the back button in your browser to return to the previous page and try to fix the code error. If you prefer, you can close this page and discard the changes you just made. No changes will be made to this site.”

    I really appreciate your help with this.

  • rawalplawit · Member ·

    Hmm, weird. I tested in my local installation both from snippet plugin and placing it in functions.php and it’s working properly.

    Can you provide more details like which plugin you installed(if you used one) or where you put it in and step by step process of how you did it? Does this error show up when you place it in functions.php directly if you haven’t already?

  • jlhb01 · Member ·

    I installed the Code Snippets plugin by Code Snippets Pro. I just installed it directly from the Plugin area on my WordPress dashboard. It was the plugin with the most installations, so I figured it was ok.

    I just clicked “Add New” and copy/pasted the code you gave me. Perhaps I did something wrong. Here is a screenshot of what I did before clicking “Save Changes and Activate”

    https://photos.app.goo.gl/34s758idmFY8VKr26

  • rawalplawit · Member ·

    Sorry, but I’m not able to reproduce this issue. Can you try adding it in functions.php? Maybe you could ask the support for help?

  • jlhb01 · Member ·

    I’m not sure they’ll help me because my theme is a third-party theme.

    If I add it to the functions.php file, do I add it at the very end or is there a certain line I should add it?

  • rawalplawit · Member ·

    Yes, you can place it at the end of the file functions.php.

    Please see the steps at https://i.imgur.com/lHpF798.png . I’ve added steps to it too :)

  • jlhb01 · Member ·

    Thank you! I really appreciate it. I’ll give it a try and pray I don’t crash the whole site! I made sure I have a backup.

  • jlhb01 · Member ·

    Ok, I tried it but it didn’t work. It removed the sticky header from the main page, which is where I wanted to keep it. It also didn’t remove it from the posts/pages, which is where I wanted it to scroll up.

  • normalusername52 · Member ·

    Hi there,

    How about a different approach?

    You could try uninstalling the plugin and adding the header stickiness only to the homepage.

    Go to Appearance → Additional CSS. Create a new CSS class with the property “position : sticky;”.
    To read more about the sticky property go here: https://www.w3schools.com/howto/howto_css_sticky_element.asp

    Then in the homepage, edit the template. Select header you want to make sticky. Go to Block → Advanced. Under Additional CSS class(es), add the class you just created.

    To read more about editing the template of the page while working on it, go here: https://wordpress.com/support/templates/#access-the-template-editor-via-the-page-post-editor

    Hope that works!

  • rawalplawit · Member ·

    Sorry for that. I just realized my error… The code below should work 

    
/**
 * Remove the class 'has-sticky-tag' from pages besides the front page.
 */
add_filter( 'body_class', 'remove_body_sticky_class', 20 );    
function remove_body_sticky_class( $classes )
{        
	if( is_front_page() ) {
		return $classes;
	}
	$target_class = ['has-sticky-header'];        
	$classes = array_diff( $classes, $target_class );        
	return $classes;    
}
  • jlhb01 · Member ·

    That worked!! Thank you SO much. I’m thrilled. I really appreciate all the help!

  • rawalplawit · Member ·

    Ah, I forgot to mention that the code in functions.php will be overridden after a theme update so please be aware of that.

    For this you could try to use the code snippets plugin or create a child theme. I hope this helps.

  • rawalplawit · Member ·

    Awesome!

    I’m glad it worked for you :) Let me know if you have any other questions.

  • jlhb01 · Member ·

    That’s good to know about the theme updates. I’ve heard of the child themes, but don’t quite understand them. Now would be a good time to learn!

    Again, I really appreciate your help. You made it very easy.

1 2
  • The topic ‘Sticky Header’ is closed to new replies.