Need help? Check out our Support site, then


Multilingual menu

  1. I'm looking for a way to create a multilingual menu on my site.
    None of the solutions proposed in the WordPress support section is satisfactory.
    - Having two separate sites, one in each language, is a far from optimal solution for maintenance reasons.
    - The "language category" solution works only for posts, not for pages.
    I understand the solution lies in css (I've gone through several WordPress sites that use it), unfortunately I am not skilled enough in css to implement it myself.
    Can anyone help ?

    The blog I need help with is dariustechnologies.wordpress.com.

  2. Hello there,

    I'm not sure about what you mean as I unfortunately can't see your blog as it's set as private.

    However, since you talked about having a multilingual menu, I thought you were mentioning the main navigation menu, is that correct?
    One easy solution would be to create a custom menu featuring external links of your other language blog.
    I'm not sure that is clear to you, happy to explain it further if not :)

    Since you mentioned also some CSS tricks related to the solution, I've added the CSS tags on this thread so that our CSS wizard can notice it and come help you :)

  3. Hi stefaniamattana and thanks for your help.
    Actually the site I need help for is http://noemecd.com
    It is in French and I have prepared the pages for the English-speaking version, now the question is : how to navigate between both versions ?
    I would like to avoid managing two separate sites as it would make maintenance more difficult.
    I guess there is a solution involving css editing, but I am not sure how to do it.

  4. Hi @lmdarius2015,

    To be honest with you I don't know how to sort this out with CSS. As far as I know, CSS is supposed to get the 'skin' and appearance of a website, not the functional aspects.
    I hope some of the CSS people of this forum can help you out anyway.
    Can you also link me the websites you saw operate the CSS changes for that? Maybe if I get a look at them I'll get the picture and be able to give some advice :)

    Here the solutions I found for you meanwhile:

    • Having two posts in the same blog: write two different posts and link each other to send readers to the post with the other language. You can use tags and categories related to the different languages to sort them out, then create a nav/widget menu to orientate readers as I stated above.
    • Create two blogs: that's not really what you asked since you want to keep everything into one only blog, but if you can create another blog and then link them to each other, that would be the best solution. It may sound a bit difficult to manage but the My Sites and My Blogs features on the WordPress Dashboard makes that very easy to manage.

    Sorry for the long reply but I do hope that this can help you somehow :)

  5. stefaniamattana, you got it perfectly right.
    Thanks for having taken the time to comment.
    Here is an example of site that matches what I am trying to do : http://arboretumpouyouleix.com/
    When the "English" button is active, only the English menu is visible; conversely, when the "Fran├žais" button is active, only the French menu appears.
    I guess all owners of multilingual sites face the same problem, so there must be a solution.

  6. Hi there again,

    Thanks for posting this example.
    I think the owner of this website has set up as English homepage the 'overall' homepage (http://arboretumpouyouleix.com/) while putting as French main landing page another internal pages he'd created http://arboretumpouyouleix.com/arboretum-des-pouyouleix/

    From this, he's followed the following steps for creating this architecture: https://en.support.wordpress.com/set-up-a-multilingual-blog/#option-2-one-blog-two-posts.

    As for the menu, I think his theme features at least two menu he managed to place accordingly.

    It may look a bit complicated at a first glance but it gets easier once you start experimenting.

    I hope all makes sense to you!

  7. Thanks for your help, but I am still struggling with the issue.
    The difficulty is to have one menu in English and one in French.
    I think it requires CSS coding, but I have no idea how to do it.
    Managing two separate sites, one for each language, would be my least-preferred solution.

  8. Hi @lmdarius2015,

    I'm going to tag the thread to Staff attention. Unfortunately I don't have many ideas on how to solve your problem with CSS.

    If you haven't yet, please subscribe to the thread so to be notified when they reply to you.

    Sorry I can't be more helpful at this stage!

  9. Hi @lmdarius2015!

    It looks like the site owner of http://arboretumpouyouleix.com/ employed a series of CSS hacks to accomplish that. Since you are using the same theme (Edin), here's what you can do:

    1) Create two pages that will serve as your English and French homepages. 2) Assign either page as your site's Front Page in your Site Customizer:

    http://dariustechnologies.wordpress.com/wp-admin/customize.php

    3) Create a custom menu holding both your English and French menu items. Make each language homepage a main menu item, with their sub menu items falling under each:

    -English Homepage -- Home -- About -- Contact -French Homepage -- Accueil -- Sur -- Contact

    2) Assign the above custom menu as your Primary Menu.

    3) Then, copy the sample site's custom CSS that came from this URL:

    https://s0.wp.com/?custom-css=1&csblog=62oKl&cscache=6&csrev=20

    @media screen and (min-width: 1020px) {
    	.primary-navigation {
    		height: 0;
    		position: relative;
    		overflow: visible;
    	}
    
    	.menu-primary {
    		width: 900px;
    		position: relative;
    	}
    
    	.menu-primary ul {
    		position: absolute;
    		top: -150px;
    		right: 0;
    	}
    
    	.navigation-classic .primary-navigation li {
    		font-weight: normal;
    	}
    
    	.navigation-classic .primary-navigation .menu-primary > ul > li,
    			.navigation-classic .primary-navigation .menu-primary > ul > li:hover {
    		float: right;
    		position: static;
    		color: black;
    		background: none;
    	}
    
    	.navigation-classic .primary-navigation .menu-primary > ul > li > a,
    			.navigation-classic .primary-navigation .menu-primary > ul > li > a {
    		background: none;
    		font-weight: normal;
    		color: black;
    		font-size: 13px;
    		border-radius: 10px;
    		margin-left: 8px;
    		padding: 0;
    	}
    
    	.navigation-classic .primary-navigation .menu-primary > ul > li.current-menu-ancestor > a,
    			.navigation-classic .primary-navigation .menu-primary > ul > li.current_page_ancestor > a,
    			.navigation-classic .primary-navigation .menu-primary > ul > li.current-menu-item > a,
    			.navigation-classic .primary-navigation .menu-primary > ul > li.current_page_item > a {
    		background: #aaa;
    		color: white;
    		font-style: normal;
    	}
    
    	.primary-navigation ul li.current-menu-item > a,
    			.primary-navigation ul li.current_page_item > a {
    		background: none;
    		font-weight: bold;
    		color: black;
    		font-style: normal;
    	}
    
    	.navigation-classic .primary-navigation .menu-primary > ul > li.menu-item-has-children a,
    			.navigation-classic .primary-navigation .menu-primary > ul > li a {
    		padding: 3px 10px;
    	}
    
    	.navigation-classic .primary-navigation .menu-primary > ul > li:before {
    		content: none;
    	}
    
    	.navigation-classic .primary-navigation .menu-primary > ul > li.current-menu-ancestor > ul,
    			.navigation-classic .primary-navigation .menu-primary > ul > li.current-page-ancestor > ul,
    			.navigation-classic .primary-navigation .menu-primary > ul > li.current-menu-item > ul,
    			.navigation-classic .primary-navigation .menu-primary > ul > li.current_page_item > ul {
    		left: auto;
    	}
    
    	.navigation-classic .primary-navigation ul li:hover > ul,
    			.navigation-classic .primary-navigation ul li.focus > ul {
    		left: 999em;
    	}
    
    	.navigation-classic .primary-navigation ul ul {
    		right: 0;
    		width: 700px;
    		text-align: right;
    	}
    
    	.navigation-classic .primary-navigation ul ul:before {
    		content: none;
    	}
    
    	.navigation-classic .primary-navigation ul ul li {
    		display: inline-block;
    		width: auto;
    		padding: 0;
    		background: none;
    	}
    
    	.navigation-classic .primary-navigation ul ul li:last-of-type {
    		border-bottom: none;
    	}
    }

    And paste it in the Custom CSS section of your Site Customizer.

    4) Lastly, go to Theme Options in the Customizer and set your Menu Style to Classic.

    I hope that helps! If you have any other questions, please let me know.

  10. - stefaniamattana, many thanks again for your kind help
    - druesome, I've tried your solution and it works great!
    I have 2 more questions :
    . actually the site I need help with uses the Twenty Twelve theme (address http://noemecd.com) ; any idea where I can find the right CSS ?
    . do you know how to manage the sub-menus?
    Again, thanks a lot to both of you for your time, and greetings from Paris.

  11. druesome, I have switched to the Edin theme and applied the custom css you gave me.
    It is exactly what I needed; again, many thanks.
    How come WordPress does not offer any theme featuring a multilingual menu ?
    That is really baffling - there must be lots of WordPress users in my case, as most international-oriented, non-English-speaking sites must include an English version.
    I have seen many topics on the same subject on the forum - does WordPress intend to address that issue?

  12. Hi! Sorry about the slow reply. It's indeed a great idea to have an option to create multilingual menus. For now, this solution should do the trick and I'm glad it works for you! Rest assured that I'll pitch this idea to our team very soon. :)

  13. For your info, in its current form the menu displays first-level items only.
    To access second- and third-level pages the reader must use the breadcrumb.
    It is not perfect but it works.

Topic Closed

This topic has been closed to new replies.

About this Topic