Parallax Pro Before Header – Only show on certain pages and make fixed

[ltucker7]

Hi there!

I'm using Parallax Pro, and I have a mailing list signup sitewide in the Before Header section, but I would like to remove it on certain pages (home, landing pages, etc). I have Googled and can't seem to find code for that. Does anyone have any suggestions?

I also notice that it scrolls with the site, and I would like it to be fixed. Suggestions?

Finally, on mobile the Before Header hook is showing before the menu. Any chance that can be changed?

Many thanks!

Laura

https://lauratucker.com/

[emasai]

You can hide it with css on certain pages. For that you need to find the page id, or give the pages a custom body class e.g."hidden" and then for the element you wish to hide use:

.hidden .before-header {
display: none;
}

To make it fixed on the page add

.before-header {
    background-color: #3399CC;
    padding-bottom: 5px;
    padding-top: 90px;
    width: 100%;
    position: fixed;
}

To make the .site-header show before the .before-header, change position: static to position: fixed and you will also need to modify the padding-top on .before-header

Personally I would remove the position: fixed on the .before-header on mobile, because it takes up too much screen real estate.

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[Victor Font]

How did you add the call to action to the before header area? Did you use Genesis Simple Hooks or add code to functions.php. Whatever the case, you need to add an is_page() conditional to the function. https://codex.wordpress.org/Conditional_Tags

The code would look something like this:

function call_to_action() {
    $pages_to_exclude = array('1', '2', '3');
    if (is_page($pages_to_exclude)) {
        return;
    } else {
       ...cta code ...
    }
}

To make the CTA area sticky requires a bit of CSS work. The interesting thing is that your before header area is displaying after the header because the CSS isn't right. The header has your logo and menu. This area has the position set to fixed. The before header header should also be fixed. You'll have to adjust the position top to position it correctly. If you really want the CTA to display as it does now, after the header, you need to use the after header hook, not the before header hook.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[ltucker7]

Victor and emasi, thank you so much! Both of those responses helped immensely.

I added it to the "after header" hook, and made it fixed on desktop. It's working very well. Thank you so much.

I have two additional questions for Victor's answer about the excluding pages code:

Because I'm using Paralax Pro, there isn't a page for "home", only the widget areas. How do I remove the "after header" hook on that page?

And just to confirm, the code I'm looking for here is this:

function call_to_action() {
    $pages_to_exclude = array('2786', '3497');
    if (is_page($pages_to_exclude)) {
        return;
    } else {
       add_action( 'genesis_after_header', 'mailing_list_post_widget' );
	function mailing_list_post_widget() {
		genesis_widget_area( 'mailing-list', array(
			'before' => '<div class="mailing-list widget-area"><div class="wrap">',
			'after' => '</div></div>',
	) );
}
    }
}

(Those numbers in the array are my page numbers, which obviously, you can't confirm. I'm just checking to see I've understood the process correctly.)

[ltucker7]

Also, my pages are floating over top of the fixed mailing list signup. Any thoughts on solving that?

[Author]

Posts