Nav Menu With Flags

Dears,
I am making a site which will operator in multiple countries i have some questions.

1: Want to make a Nav Menu with Country Flags.
2: Every Nav Menu has a Home Page When ever users click on one will redirect to Its Page and Current Country will be Selected in NAV Menu.

i need similar menu:-
https://gyazo.com/b9dfef90733f3a3c803a9348729bdaeb

Waiting for your feedback

Hello,

You will need a multilingual plugin. We recommend WPML cause it has been tested with our theme and we can guarantee its perfect operation https://wpml.org/

Best Regards

Dear Elise ,
I already have WPML Installed.
My site is dual language already. But now my concern not language i need this nav menu dropdown because we have different products based on different countries.

Waiting for your reply.

Hello,

Please refer the instructions provided in the documentation https://wpml.org/documentation/ Besides you can contact WPML support if you need help in configuration of the plugin.

Here are the instructions on how to set up the languages https://wpml.org/documentation/getting-started-guide/language-setup/ and you will find information on how to set flag and country in the language switcher.

Best Regards

Dear Elise,

You are misunderstanding.!
I Dont need any language switcher Menu .! i know about it very well. i already have it in my site.

Please gave a visit to the site.

1: I just want to make a nav Drop-down menu with Flags because i have different pages it will link to.

2: Nav Dropdown Menu has a Page When ever users click on one will redirect to Its Page and Current menu item will be Selected in NAV Dropdown Menu.

i hopes its clear. i also have linked a similar drop-down menu.

Hello,

If you mean just menu with pages there is no option to insert different flags in menu items.
You create pages accordingly > create the menu in Appearance > Menu > Add this menu in the Header builder by means of the Secondary menu element.

Best Regards

Dear Elise,

1: Followed your steps created secondary menu, its showing in main page now how to add flags to it ?
2: It redirects to page also but now how to make the selected item bold and up.

Waiting for your response.

Hello,

As I said there is no way to add the flags. This menu will work in the way any WordPress menu works. You will have to implement considerable customization to achieve your purpose.

Best Regards

Dear Elise,

I need to add this flag only to menu item, Would really appreciate if you provide me way, since when i was purchasing your theme your team said me on codecanyon that its best theme for customization because of HTML Blocks, so please provide me procedure to only add flag. my client need it very urgently.

Hello

1. Create menu in Appearance > Menu with the pages

2. Enter each item in the menu and add two classes: flag-image flag-image-1 into menu class field as shown: https://gyazo.com/f126b6e80ea5080ab49560f08f87bf2c Each item menu should have its own class, so change flag-image-1 into flag-image-2, flag-image-3 accordingly.

3. Upload flags images into your Media library

4. Add this custom code to the Theme settings > custom CSS:

.flag-image > .woodmart-nav-link:before {
    content: "";
    width: 20px;
    height: 15px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 7px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}
.flag-image > span {
    vertical-align: middle;
}
/* ADD YOUR FLAG IMAGE */
.flag-image-1 .woodmart-nav-link:before {
    background-image: url(http://web.com/wp-content/plugins/sitepress-multilingual-cms/res/flags/en.png);
}
.flag-image-2 .woodmart-nav-link:before {
    background-image: url(http://web.com/wp-content/plugins/sitepress-multilingual-cms/res/flags/en.png);
}
.flag-image-3 .woodmart-nav-link:before {
    background-image: url(http://web.com/wp-content/plugins/sitepress-multilingual-cms/res/flags/en.png);
}
.flag-image-4 .woodmart-nav-link:before {
    background-image: url(http://web.com/wp-content/plugins/sitepress-multilingual-cms/res/flags/en.png);
}
5.	Replace the background-image: url in the code provided with valid one from your Media library  

Best Regards

Dear Elise,
Really appreciate your efforts,
I have create menu with pages with flags all good but how to make current page selected bold and first options after redirection.

Hello,

I do not see your menu yet, add it and I will provide the CSS to make the current item bold. It is not possible to move menu items depending on redirection. They will remain the same.

Best Regards

Hello,

Have you uploaded images into Media? Have replaced the URls? I do not see the CSS we have provided.

Best Regards

i added the css in CSS GLOBAL here is the snapshot: https://gyazo.com/7bf856861ccb5d8e08ee7608ac645f68

And i have added the css in Menu -> https://gyazo.com/179497b9d2ab3c1063331d3e8113af27

i will use similar images same size thats why i didnt changed image source since they are perfectly visible through link.

Where we can see this menu on your website? Could you please send us a direct link where you added it and use our code?

its on home page under City drop-down. -> https://gyazo.com/a2b02bc35708af06fb061e1cd4610241

You have a wrong CSS code here https://prnt.sc/l14svl
You need to remove it and clear your cache to see the changes.

Dear Artem,
1: Flags is now perfect its appearing now next step? like when it moves to the pages item should be bold current menu item .

2: Dropdown menu bg color is red? want to make it white.

1. Add the following CSS also

.flag-image.current-menu-item a {
	font-weight: bold;
}

2. You need to remove this image from the menu http://prntscr.com/l1688k

Dear Sir Check Private Content

Hello,

All the links have been removed.

Best Regards

Kindly Check Reply/Post #79170

Hello,

They have been also removed.

Best Regards

Thanks alot,
Im having a issue while in checkout page. when the user is logged it also for the firstname,last name and etc details which should not be asked since a user is already logged in, should directly checkout with payments.

Waiting

Hello,

The checkout is the Woocommerce functionality and our theme does not influence that. You will have to find a plugin or customize Woocommerce.

Best Regards

[Author]

Posts