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:
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?
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.
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 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 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.