Hey Site Origin team!
Hope things are great, Ill just drop a quick one. ¿Is there a simple way to create a dropdown menu like this in vantage? (Im talking about the menu at the top right of the page where you select the language)
http://www.fruitylife.eu/en/
We finished translating http://www.rabita.mx (english version: http://www.en.rabita.mx) and would like to add a easy way for visitors to switch between languages.
Thanks to all!
J.
URL: http://rabita.mx/
Hi Jose
I’ve had a look around and the only plugin I can see which will allow you to create the menu you want is this one
https://wordpress.org/support/plugin/multisite-language-switcher
Integration instructions are here
http://msls.co/functions-classes-and-methods/
Hope this helps you out
Magus
Magus,
thanks for your quick reply! Any chance you would like to work with us?
Thanks,
J.
In other things,
I kinda managed to find a simple way to solve the problem posted by adding a custom menu item and aligning it to the far right but now I would like to reduce the submenu width so it only covers the background of the text in the submenu.
I have tried a bunch of tweaks to my custom CSS without any succesfull results.
Here is what I have by now:
/* Last Menu Item Alignment */ .main-navigation ul li:last-of-type { float: right; } /* Vantage Sub Menu Width */ .main-navigation ul ul li:last-of-type { min-width: 250px; white-space: nowrap; width: 100%; } .main-navigation ul ul a li:last-of-type { width: auto !important; }Is there an easy way to add an custom icon with the flag to the custom menu? (or maybe a world icon from fontawesome?)
It would also be great if we could get the submenu to only show when the user clics on it, not when he hovers.
Thanks again!
J
Hi Jose
Your last entry target is wrong. It should be
.main-navigation ul ul :last-of-type a { width: auto !important; }and change the min-width setting in the one above to 0px.
To add a font-awesome globe to the menu, navigate to Appearance->Menu. Click on the Screen Options tab at the top and tick the option for CSS Classes.
Expand your custom menu, and in the CSS Class for each item add this
you can change the size by using the options listed here
http://fortawesome.github.io/Font-Awesome/examples/
Let us know how you get on
Magus
Hi Jose
Would you mind confirming if you have this solved? If not, let us know we jump right to it.
Cheers
Hey Addo,
with the help of Magus I could chage the width of the last Item Sub Menu, but I could not add the globe icon to the menu.
If you could help me out it would be great.
Also I would like to remove the hover background of that Last Menu Item and remove the hover dropdown, instead I would like it to drop down on click!
Thanks,
J
Addo, Magus, Andrew, anyone;
we just realized using last of type in the custom css also affected the other menu items (see link) http://rabita.mx/wp-content/uploads/2015/04/Screen-shot-2015-04-28-at-3.48.43-PM.png
Is there a way to only target the last item of the whole menu. The one that changes the language?
Thanks we appreciate the support very much!
J
(ps we currently removed the Last Of Type CSS so the menu looked normal)
Hey Jose
If you don’t mind adding a plugin then try: https://wordpress.org/plugins/menu-icons/. It makes it really easy to add icons to link items, something Vantage can’t do natively. You could use that plugin to add the globe icon you’re after.
I’m coming in a bit late here, hopefully I understand. If you want to make the translation drop down menu width smaller, I’d say just the following, nothing else should be needed:
.main-navigation ul li:last-of-type ul a { width: 100px; }Andrew,
thanks for the great solution! works like magic.
Now is there any way I could modify the last menu item (the one we have been talking about) and its submenu item so that they have a different background and hover effect from the rest of the menu.
Thanks,
J
PS. I noticed page builder is not translated, if you need help with spanish I would be glad to help! Anything to keep your great products living on! Just let me know :)
Thanks for your offer to help with Page Builder, much appreciated. Spanish should now be available. You can check the translation project here: https://poeditor.com/join/project?hash=82847115cc12f5d35ec3d066495dca1a.
If your WordPress core lang setting is set to Spanish and you’re running the latest version of Page Builder then I’d think it would be translated. Perhaps you can confirm that for us.
Andrew,
I changed it from Spanish (Mexico) to Spanish and some parts of the page builder translated ok. Others are still in english (mostly in the widgets side) but it looks like it is working! and the translations are pretty good.
Congrats!
Super, thanks for your feedback. The Widgets Bundle is up next for translation so hopefully we’ll be filling in the blanks there quite soon.
Give these rules a try, hopefully they help:
/* Top Level Item */ .main-navigation ul li:last-of-type > a { background-color: #fff; color: #000; } /* Top Level Item Hover */ .main-navigation ul li:last-of-type:hover > a { background-color: #fff; color: #000; } /* Drop Down Item */ .main-navigation ul li:last-of-type ul li > a { background-color: #fff; color: #000; } /* Drop Down Item Hover */ .main-navigation ul li:last-of-type ul li:hover > a { background-color: #fff; color: #000; }Just need to adjust all the color values as required.