[Resolved] DIfferent Image icons on Secondary Menu

[Joseph]

While the secondary menu has an image insert option, I am trying to add a different image/icon to each menu tab in the Secondary Menu. Is the best way to do this through CSS using something like:

li menu-item-# a{background-image: url(‘######’) no-repeat;}

I tried this to no avail.

If you notice the menu tabs under the slider, Presentation, Brochures, Foundry services…..there is an icon to the left here: industrialprojectsolutions.com.

I moved the GP Secondary menu via the child function theme under the slider and the placement is good. I added an orange “test” icon for my visual use as to where the image using the Customization would appear as seen here:
provinciawebdesign.com/client/ips/

Can you share some ingight, it is much appreciated.

Thanking you in advance.

[Tom]

Hi there,

A plugin like this may be your best bet: https://wordpress.org/plugins/menu-image/

Let me know 🙂

[Joseph]

Thank you Tom, that was easy enough. I get weary of having a lot of plugins, sometime they conflict but this solved all, you’re the best!!

[Tom]

Glad I could help! 🙂

[Joseph]

Tom, I tried searching for a thread on this fix. The secondary menu with images works fine on the home page nestled under the slider which I set on GPHooks as the following:
AFTER HEADER:
<?php if ( is_page( ‘2’ ) ) : ?>
[smartslider2 slider=”1″]
<?php endif; ?>

All I wanted to do now is set a small image 100% across in place of where the slider was using the ID$ for the page in question. The images will be different and as mentioned I can control that with the Page ID#. However now the secondary menu looks to have lost the CSS on after I added the image with this code in GPHooks:

<?php if ( is_page( ’25’ ) ) : ?>
<img style=”width:100%” src=”http://provinciawebdesign.com/client/ips/wp-content/uploads/2016/01/About_top.jpg&#8221;
<?php endif; ?>

If I remove the code the secondary menu works fine. If you look at the About IPS page you can see what I’m talking about vs the Home page. provinciawebdesign.com/client/ips/about-ips.

Here is the code used to move the secondary menu down below the slider/images in the child theme functions.

add_action(‘after_setup_theme’,’generate_move_secondary_nav’);
function generate_move_secondary_nav()
{
remove_action( ‘generate_after_header’, ‘generate_add_secondary_navigation_after_header’, 7 );
add_action( ‘generate_after_header’, ‘generate_add_secondary_navigation_after_header’, 11 );
}

Just pulling what little hair I have left. Any help is appreciated.

Thanks!

[Joseph]

Never mind Tom, I guess it would help if I close the <img src…. I’m going to bed.
I’ll buy a cup of coffee Friday, you are always on point on support.

Thanks!

[Tom]

Glad you found the fix! 🙂

Thanks! Let me know if you have any other questions.

[Author]

Posts