View Full Version : How do I put a Nivo Slider in Header

06-03-2012, 08:11 AM
New to Catalyst and am liking what I have been able to do so far.

I have been trying to put a Nivo Slider in the header so I can have several changing images in the header.

I have found several other post where others have done this but not how.

Could someone please help me here by showing what I need to do. I have watched some of the tutorials but I cannot see from them how to do what I would like.

Any help would be appreciated. Thanks!

06-03-2012, 08:44 AM
The easiest way to do this is to enable the homepage slider on the EZ settings page. (Catalyst > Dynamik Settings > EZ) In the area called "Homepage EZ-Widget Area Extras" you can activate the EZ slider area. It doesn't matter if you are using EZ for your homepage or not, this will give you that widget area where you can drop in the Nivo Slider shortcode. (Make sure the height on the EZ settings page and the height you specify on the Nivo Slider page is the same or it will look goofy!)

06-03-2012, 09:18 AM
Thank you atervort for your reply.

I have a Nivo slider and it works fine but what I am after is to have a nivo slider in the header part where the logo is.

I would like to use a nivo slider instead of the logo.


06-03-2012, 01:02 PM
Try this:

• Activate the NivoSlider plugin and create the slideshow
• Advanced Options > Custom Hook Boxes: create a CHB using catalyst_hook_in_header and Hooked. Put your slider shortcode in the text area
• Catalyst Options > Header > Header Right Options: uncheck Activate box
• Dynamik Options > Header > Header Dimensions: set Header Height as needed
• Dynamik Options > Hide > put this in the textarea:

#title, #tagline

06-03-2012, 06:19 PM
Thank you Justme,
I have done the changes as suggested above but it still doesn't work.

Do you have any other thoughts why this might be so?

06-03-2012, 06:22 PM
It worked fine on my test site. Can you provide a link to the site and your information from Core Options > Info > Version Information?

06-03-2012, 06:25 PM
Here is the link: http://new.tassiecelebrant.com.au/

PHP Version: 5.2.17

WordPress Version: 3.3.2

Theme Version: Catalyst 1.5.1

Child Theme Version: Dynamik 1.1

Thank you

06-03-2012, 06:39 PM
Okay I don’t see the slider code in the header in your source code. We need to make sure you have created the Custom Hook Box and assigned it to Layouts properly. This might be helpful:


06-03-2012, 11:03 PM
Sorry I wasn't much help, but it looks great now! Having a slider as header is a great idea.

06-03-2012, 11:35 PM
@justme Does using hide in the Dynamik settings do anything to the SEO of the site, or does it just affect the visual elements? I never noticed that option before, it seems pretty handy as long as it doesn't take things out of the site's SEO data (or whatever the correct term for that information is!)

Thanks for the cool tip. :)

06-04-2012, 03:00 AM
The function of Dynamik Options > Hide adds a display: none to the stylesheet so the elements are still in the code which the search engines will see.

06-04-2012, 06:06 AM
Thank you,
I have done everything above and I also watched the video but I am still unable to get it going.

I understand how to add the custom hook to a layout and have done this but I am unsure how this works with the header where I want to put the slider.
I do appreciate the help you have given, I guess I am just missing something.

Can I add the shortcode in the CSS builder using the #header element?

06-04-2012, 10:22 AM
The shortcode is not CSS so adding it to the CSS Builder wouldn’t work as far as I know.

A couple of thoughts:

1. It’s possible there may be some sort of conflict since you already have a nivo slider on the page. You might try deleting it and trying just the one in the header.

2. You could try deactivating all plugins at once and see if that resolves the issue. If it does, then you can reactivate them one at a time until you find the cause of the problem.

3. You could try using a Custom Widget Area rather than a Custom Hook Box. Add your shortcode to a Text widget in the CWA at Appearance > Widgets.

06-14-2012, 01:23 AM
I want to rotate clickable banner ads in the header right area. The Nivo Slider seems to allow only images. Is there any way to use a slider to rotate clickable banner ads?

06-14-2012, 03:20 AM
You would probably need to look at other sliders. There are quite a few on the market and they offer different capabilities. Off hand I wouldn’t know what to recommend. A quick search found:


You can find others there or elsewhere online.

06-14-2012, 04:31 PM
Thanks. I finally found a free plugin that works fairly well - Easing Slider - at http://www.easingslider.matthewruddy.com/. You can see how I use it as a banner ad rotator in my header at http://memorybuilder101.com/.