In the tutorial requests Trello board, a user asked:
Hi Sridhar, just wondering if you can please do a tutorial on how to add a welcome/stick message widget in Infinity Pro theme above the navigation menu, visible throughout the different pages e.g. homepage, blog, contact etc...example of this on website:http://katenorthrup.com/ Many thanks
This tutorial provides the steps to register a custom Notice Bar widget area, combine it with the header and make the combination fixed in Infinity Pro.
Screenshots:
Homepage:
When scrolled:
An inner page:
Tested in Infinity Pro v1.1.2
Step 1
In functions.php add
I can’t find the exact code in step 2 a) in global.js is there a typo?
There is no typo.
Look at lines 13 and 14 in that file (https://demo.studiopress.com/infinity/wp-content/themes/infinity-pro/js/global.js).
For some reason my global.js is missing the top part of the file completely which is why I don’t see that code. Mine starts at:
$(document).ready(function() {
// Match height for content and sidebar.
$( '.content, .sidebar' ).matchHeight({
property: 'min-height'
});
etc..
I don’t think I have even touched this file! Should I add the missing part back in?
Can you provide the URL of your site?
What version of Infinity Pro are you using?
Hi Sridhar,
Version: 1.0.0
https://bork.co.nz/
As mentioned in the tutorial, this was tested in and written for 1.1.2 of the theme.
If time permits, I can work on implementing this in v1.0.0 and share the solution with you. Can you send me a zip file of v1.0.0 of the theme via https://sridharkatakam.com/contact?
For v1.0.0 of Infinity Pro:
Step 1 remains the same.
Step 2
global.js: https://pastebin.com/raw/UkvXZTDd
Step 3:
style.css: https://pastebin.com/raw/2p4nSmrS
Sorry, missed the version number. I have sent you a zip file, thank you!
Works wonderfully, thank you!
Thanks for this tutorial, Sridhar! I applied it with some modification to digital pro. Thank you for splitting the sections into Take This and Change This. It helped so much more than just having the entire page’s code changed. I often have to search out WHAT you changed because I had made significant modifications to the style.css or functions.php page already.
It works like a charm, thanks!
I have got the widget to appear, but it scrolls up with the page instead of being fixed
Can you provide the URL of your site?
Hi, I’ve used this code but the widget is transparent instead of colored, and disappears as I scroll down. url is http://www.islandstyledance.com and I am using version 1.1.3
sorry please disregard this comment. I decided to switch things up and am using a different theme now
Hi Sridhar,
First, thank you for this tutorial. It’s just what I needed.
I’m having a problem. The header scrolls on mobile devices and tablets. I’ve reviewed all your instructions several time. Can you take a look?
Here’s the url:
https://www.pacificcoasthospitality.com/
Thanks,
Linda