A good one: how to add images to a submenu

Hi again, here it is a screenshot of what I’m talking about.

Thanks again!

Hi Cristobal,

This will not be possible straight out of the box as it is.

It will require some custom development work that either yourself or your web developer will need to implement unfortunately.

Please let me know how you get on with this.

All the best

Hi! Thanks for answering that fast!
Well… I’ve been doing some things, pushing some bottom, cuting here, pasting there… ??

I use the page ID page to assign a background image, them play a bit with the CSS. Here is what I got so far (on the menu go to ?HOLA!): LINK

Once again, the plugin is just awesome!

Hola Cristobal,

I love what you have done there with the menu, I didn’t think it was my plugin at first – great work!

As a side note, where are you from – would I be able to showcase your site on my site as examples of what can be done with a bit of customisation?

Thanks for the kind words and keep up the great work!

All the best

Wow!!! thanks! those words comming from you are very encouraging!!
Well, I’m from Argentina but I’ve left my country edges ago, now living in Barcelona. I’m a journalist and the site I’v show you is a sub domain I use as a test ground for my designs to my own magazine: Verb?ten.
My answering is yes! show it as example! It would be a great example because If i can do it, everybody can… ’cause I know almost nothing about coding. ??

But first I need to fix one thing and maybe you can show me the way…. it’s driving me crazy!
– On Safari the author’s thumbnail doesn’t display properly… something is happing with display: block;
When I fix it I would like to upload the changes to my real site first. The sub domian is changing all the time.

You make my day!

Best!

Hi Cristobal,

I’m glad I could make you happy, I really do like what you have done there though so thought I would say!

I am studying Spanish and used to live in Spain so when I saw your site in Spanish it made me interested!

Please provide me with a link to the author thumbnail problem and I will see if I can take a look for you and find a solution.

Have a great day!

Studying spanish? great! Spain has beautiful places, nice weather and a cool social life. Where are you planning to live? If you ever come to Barcelona I could invite u a cup of coffe, is the less I can do for using your plugin! ?? Are u in UK at moment, right?

Well… let’s get to work. The problem with the submenu thumbnails is temporary fixed. Safari doesn’t recognize de display: flex; so I’ve changed for this

.whatever {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

It works but I still have some problems. Something is pulling the submenu items to left and don’t let me use the “padding right” on the hover… these are just a couple of weird behaviour I’ve notice so far.

What I want to know is how to align the sub items horizontally, as you know the plugin do it vertically.

To upload images to the submenu I assign a background to the menu item straight from my CSS:

body li#menu-item-1528 {
  background-image: url('https://v10.verbo10.com/wp-content/uploads/2015/07/portrait-0.jpg');
  background-repeat: no-repeat;
  height: 300px;

I know isn’t the right way to do it but considering how much I know about codeing, someone should give a medal . ??

Well… I hope I explain myself good enough. It’s hard to talk in a foreign language about a subject that you don’t really know about! Thanks for your patience.

Hi Cristobal,

Thanks for the offer, if I am ever in Barcelona we can meet up for a little intercambio and a coffee!

In regards the links on the magazine site are you saying you want the links to be next to each other rather than lined one on top of eachother?

Also, with the alignment, do you mean that the hover on the sub menu links doesn’t quite cover the whole width?

Apart from this the menu seems to be behaving correctly unless I am misunderstanding somewhere (very likely!)

All the best

Hi!!! Here I’m again.
Finally I could figure this out, this week I’ll will upload it on my magazine’s site. I’ll let you know.
Also I was working on my other site and I ‘ve made some changes on the RM too. If is good enough you could use it also as an example on your site.

All the best!

Hi Cristobal,

I love that site, looks amazing and what you did with the menu is great!

Once I have my examples section setup I will definetely include yours on there!

Thanks again!

Thanks! I already upload the new design to my magazine, here is the link
But I still have problems with the submenu aligment. The pictures in QUIENES SOMOS are not at the center, they are to the left. If you can see, my own picture is stick to the left and there is no power on earth to move it from there! What I want is to align all the pictures at the center… the same distance from the left and right. I try with `text-align:center’, ‘margin:0;’… etc… but nothing happen…

When u have a couple minutes maybe u can give some tips.

best!

Hey Cristobal,

Very beautiful! I like what you did with the spinning ‘x’ – I may steal that for the next update if you don’t mind!

What about if you do this, does it work?

#responsive-menu .responsive-menu li
{
     background-position: center !important;
}

Try and let me know.

Many thanks

Yeahhh! finally! I need to make some adjustments but I think it ill work. THANKS!!!

About the X rotation, it’s cool. There are some many thing to do with a bit of knowledge of CSS. On the site I’m working on right now I use also the rotation on the X, so… when you click on the “tree lines” rotate 360o… and when you click on the “X” it does -360o… nice.

Best!!!

Hi Cristobal,

Great that it appears to work for you, hope it’s what you needed!

I’ll definitely look at adding the rotation affects as an option to a future version.

All the best!

Really really nice guys.