Activello header with Sparkling theme

I’d like to use the Activello header with the Sparkling theme. I prefer Activello’s display of the menu and logo, along with Sparkling’s content layout.

The holdup appears to be the search form. When I use this html from Activello, it blanks out the page content:

					`<?php activello_header_menu(); // main navigation ?>

					<div class="nav-search"><?php 
                        add_filter('get_search_form', 'activello_header_search_filter',10,3);
                        echo get_search_form();
                        remove_filter('get_search_form', 'activello_header_search_filter');?>							
					</div>`

I’ve picked up the <header> section from header.php and the Navigation section from style.css in Activello and copied it into Sparkling. I’ve also copied over search.php and searchform.php from Activello.

Can any code-savvy users point out any html and css I might have missed?

Hi @slobjones,

I hope you are well today and thank you for your question.

It is not all about html and css, you have to create child theme of Sparkling theme and develop custom code in it using PHP and CSS to achieve this by overwriting header.php file of theme.

You can try achieving this by using the attached custom child theme of Sparkling theme that contains some custom code.

Best Regards,
Movin

Movin, thanks very much for this child theme. Just one difficult issue I’m encountering, and only in Firefox: The search icon breaks after the search form. See the attached file for an illustration.

The icon does not break in Safari and Chrome, but it does appear to align with the top of the form, instead of centering or aligning with the bottom of the form.

I’ve tried various CSS edits, without improving the situation.

Thanks again for your assistance!

Could you please share me your site URL where it’s happening so that i can troubleshoot it?

Thanks for your reply, Movin. Unfortunately, my site is on a localhost server (I’m still working on it, prior to launch), so I don’t have a public link to share.

Are you able to re-create the error by loading the child theme in Firefox on your end? I’d be curious to see what you find.

Meanwhile, I’ve found the problem goes away and the button appears beside the search form in all browsers when I add this custom CSS:

#searchsubmit {
display: none;
}

Now, that should not work. In fact, it should hide the search button entirely. Is it possible the button is being invoked twice?

I already tested it on my test site and it is working fine as shown in the attached screenshot.

If you have made any changes in the shard child theme then could you please share the modified child theme so that i can troubleshoot it?

Thanks for your reply, Movin.

I actually haven’t made any changes to the child theme. However, custom CSS to hide #searchsubmit does seem to solve the problem that I’m having with the search icon in Firefox, if not explain it.

Awesome great to see you got that solved.

You are always welcome here :slight_smile: