Nav Menu With Flags

This topic has 24 replies, 3 voices, and was last updated 6 years, 2 months ago by Elise Noromit.

Viewing 25 posts - 1 through 25 (of 25 total)

Author

Posts
September 26, 2018 at 7:06 am #79089

muhammad
Participant

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

September 26, 2018 at 7:27 am #79097

Elise Noromit
Member

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

September 26, 2018 at 7:33 am #79098

muhammad
Participant

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.

September 26, 2018 at 8:01 am #79101

Elise Noromit
Member

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

September 26, 2018 at 8:10 am #79104

muhammad
Participant

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.

September 26, 2018 at 9:29 am #79125

Elise Noromit
Member

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

September 26, 2018 at 9:34 am #79126

muhammad
Participant

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.

September 26, 2018 at 10:11 am #79134

Elise Noromit
Member

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

September 26, 2018 at 10:51 am #79147

muhammad
Participant

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.

September 26, 2018 at 11:54 am #79170
Elise Noromit
Member
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
September 27, 2018 at 8:12 am #79396

muhammad
Participant

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.

September 27, 2018 at 9:30 am #79415

Elise Noromit
Member

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

September 30, 2018 at 11:10 am #79908

Elise Noromit
Member

Hello,

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

Best Regards

September 30, 2018 at 1:14 pm #79928

muhammad
Participant

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.

September 30, 2018 at 2:23 pm #79931

Artem Temos
Keymaster

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?

October 2, 2018 at 6:33 am #80248

muhammad
Participant

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

October 2, 2018 at 7:03 am #80257

Artem Temos
Keymaster

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

October 2, 2018 at 8:42 am #80287

muhammad
Participant

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.

October 2, 2018 at 9:01 am #80298
Artem Temos
Keymaster
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
October 8, 2018 at 8:19 am #81542

muhammad
Participant

Dear Sir Check Private Content

October 8, 2018 at 9:34 am #81575

Elise Noromit
Member

Hello,

All the links have been removed.

Best Regards

October 8, 2018 at 11:11 am #81597

muhammad
Participant

Kindly Check Reply/Post #79170

October 8, 2018 at 11:57 am #81609

Elise Noromit
Member

Hello,

They have been also removed.

Best Regards

October 9, 2018 at 12:54 pm #81772

muhammad
Participant

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

October 9, 2018 at 1:06 pm #81779

Elise Noromit
Member

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