Archived topic
DIfferent Image icons on Secondary Menu
6 replies · Started by Joseph on January 6, 2016
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.
Hi there,
A plugin like this may be your best bet: https://wordpress.org/plugins/menu-image/
Let me know :)
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!!
Glad I could help! :)
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"
<?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!
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!
Glad you found the fix! :)
Thanks! Let me know if you have any other questions.