How to rebuilt the nav bar from the PRO template 'header - starter: hero' with icons that fill color when hover

[pcreemers]

Hi there,

I can’t figure out how I can remake the navbar from the pro template ‘starter: hero header’. I’ve selected the icons for each page in the wordpress dashboard but I don’t know how to make the icons fill with color when hover like in the template. I’ve tried a lot in the settings of the header but nothing works. In the first screenshots you’ll see the template nav bar icon change when hover. In the last screenshot the first six icons are mine (they don’t fill when hover like in the template). The other icons (right) are the originals in the navbar.

thanks!

[marc_a]

Hi Peter,

Thanks for reaching out.

To better help you with your concern, please give us the following information in a Secure Note.

• WordPress Login URL
• Admin level username and password

You can find the Secure Note button at the bottom of your posts.

Thank you.

[prakash_s]

Hello Peter,

To recreate a new Header from “Starter: Hero” Please follow these steps.

1. Go to Dashboard -->Pro–Header
2. Click on “Use Template” then select the “Starter: Hero” from the select box
3. Enter the name of the new Header–>Create

Please have a look at the given screenshot

To change the icon of the Header menu items. Go to Appearance -->Menu– Select the Icons from Icon Primary & Icon Secondary.

Please have a look at the given screenshot

To change the Menu items Icon colour.

1. Go to Pro–>Header–Select your Header and click on Edit
2. Select the Navigation Inline element—>Top Links – > Graphics Icons—>Color

Please have a look at the given screenshot below.

Thanks

[pcreemers]

Hi,

Thanks, but this is what I’ve already did. My question is: how can I make the icon fill when there is interaction, like in the standard template: for ex when you place the mouse on: ‘WORK’, the folder icon get filled (my second screenshot in my first post); ‘SHOP’ the box icon get filled with a check and background color (3rd screenshot); ‘ABOUT’ the circle icon shows an ‘i’ with background color (4th screenshot).

Or do I need special icons?

[christian]

Hey Peter,

We’re sorry for the confusion here. You only need to enable the Secondary Icon of a navigation link then set the Primary and Secondary Icons in Appearance > Menus. The Secondary Icon is what will show on hover.

Hope that helps.

[pcreemers]

Done! The only thing I was doing wrong was the setting of the icon secondary, my mistake.

Thank you!

[marc_a]

Hi Peter,

You’re welcome and it’s our pleasure to help you. If you have any other concerns, feel free to reach us.

Thank you.