Reply To: Nav Menu With Flags

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