Docs

[Zeshan]

You’re welcome Julian 🙂

[luismac]

This reply has been marked as private.

[Lely]

Hello Luis,

Thanks for updating the thread and for the feedback.
We need more information before we can apply this is on you navigation. I see that you have Home Brands and Contact. On which menu do you want to add background image? Or do you want it for submenu? This is to ensure
that we can give you a more tailored CSS for your site.

[luismac]

It will be for the Brands Mega Menu

[Lely]

Hey There,

Please add the following CSS via Appearance > Customize > Custom > CSS:

.x-navbar-static-active .x-navbar .desktop .x-nav>li#menu-item-161>a>span{
text-indent: -99999px;
overflow: hidden; 
text-align: left !important;
display: block !important;
background-image: url('url-of-image-goes-here.jpg');
background-repeat:no-repeat;
}

Hope this helps.

[luismac]

Hello. Your reply is not for the sub-menu. I need for sub-menu when you hover over it I want the logo instead of the text there.

[Rue Nel]

Hello There,

Please try this code instead:

.x-navbar-static-active .x-navbar .desktop .x-nav #menu-item-8382>a>span{
    text-indent: -99999px;
    overflow: hidden; 
    text-align: left !important;
    display: block !important;
    background-image: url('http://placehold.it/120x120');
    background-repeat:no-repeat;
}

If you want to apply it to other menu items, you can duplicate this code with a different menu item ID in it. To find the menu item ID, please check out this link: http://wpsites.net/tools/find-nav-menu-item-i-d/

If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks!

[luismac]

Hello Staff. Thank you for your above reply. I will consider another thread per your recommendation. On the other hand, the above code you supplied still does not work. The logo does not display. I resized it to 120×120 and still to no prevail.

[Nico]

Hi There,

In your new thread, would you mind sharing us your admin credentials and the things done to your site so that it would be easier to trace everything.

Thank you so much.

[ChrisAlexander]

Working for me using javascript. javascript is probably easiest way to inject code and make it function correctly.

For example:

jQuery('li#menu-item-63 a span').after('<img src="http://www.themeco.com/wp-content/uploads/2015/10/featured-news-06-100x67.jpg" />')
// Inserting image within the <a> element so it's after the <span>

Will want to apply a bit of custom CSS to make it look right.

Hope that helps 😉

PS: Hey THEMECO, I VOTE for an easy way to do this! eg. One small checkbox within the custom menu options, pleeeease 🙂

[Paul R]

Thanks for sharing Chris!

We certainly appreciate the feedback! This is something we can add to our list of feature requests. This way it can be taken into consideration for future development. All of these items are discussed with our team internally and prioritized based on the amount of interest a particular feature might receive. Thanks!

[Author]

Posts