This topic has 4 replies, 2 voices, and was last updated 7 years, 9 months ago ago by Rose Tyler
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
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.
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
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.
You must be logged in to reply to this topic.Log in/Sign up