Return to previous page

Menu image not working - by richems - on WordPress WooCommerce support

This topic has 4 replies, 2 voices, and was last updated 7 years, 11 months ago ago by Rose Tyler

richems

Participant

March 22, 2017 at 14:06

Hi,

I’m trying to create a menu similar to the one in the example (my menu didn’t populate with the demo data install).

The menu I’m looking at has an image on the right hand side like the attached.

When I add the image using ‘Upload menu item image’ on the edit-menu screen, then it breaks the menu – by adding this extra piece of code above the menu in the html:

<style>.menu-item-943 .nav-sublist-dropdown { background-image: url(http://www.beautifulwishes.co.uk/newsite/wp-content/uploads/2017/03/x43-Place-Cards-3.jpg);}</style>

When I remove this code the menu appears as I expect. Am I doing something wrong?

Thanks in advance,
Richard

#157527 Copied

3 Answers

Rose Tyler

Support staff

March 23, 2017 at 10:25

Hello,

Please watch video tutorial https://www.youtube.com/watch?v=9cj6o9ZRovY
There are screenshots of our demo menu http://prntscr.com/enfe40 http://prntscr.com/enfel1 http://prntscr.com/enfedq

Regards,
Rose Tyler.

#157659 Copied

richems

Participant

March 23, 2017 at 14:28

That’s great – thank you for sending the reply on how to do this – the video and screenshots had a couple of different ways of doing it, but the one with screenshots works.. Although the menu is still broken (some items being pushed onto another line).

I’ve been looking at the code and found that there’s something strange that happens to the css when <style> is located above <div class="menu-main-menu-container">:

The css class .header-type-3 .logo-with-menu + div, .header-type-4 .logo-with-menu + div is not being applied to the div <div class="menu-main-menu-container">.
So therefore the css attributes display: table-cell; vertical-align: middle; aren’t being used. I’ve found making an over-ride of a new css class called .menu-main-menu-container and apply the above css attributes to make the menu work as desired. Hooray!

I’m not sure if this will break anything else in the mean time though?

Hopefully it may help with others that could have the same trouble too, and possibly be used as a fix in the future 🙂

Many thanks,
Richard

#157706 Copied

Rose Tyler

Support staff

March 24, 2017 at 12:00

Hello,

We’re glad to hear that your issue was solved.
Feel free to ask if you need any other help. We need wp-admin access to check the effect of code on your site.
Thank you for the notice.
Have a nice day!

Regards,
Rose Tyler.

#157808 Copied
Tagged: best selling themes, image not working, menu image, seo friendly, woocommerce themes
Viewing 4 results - 1 through 4 (of 4 total)