show language drop-down

[francesco2424]

Hi,

I have Barber theme, on the top I have language drop-down menu:
http://portotheme.com/html/porto/8.0.0/feature-headers-classic-language-dropdown.html. (As suggested I used your code and was ok.)

I would like to show language drop-down menu also on mobile devices (next to phone number).
I found this on forum: http://www.okler.net/forums/search/?bbp_search=show+language+dropdown+mobile

Is it still possible to show language drop-down somewhere on mobile devices?
If can not show language drop-down, is there any other solution for different languages to show? (maybe in menu)
Thank you!

---

Template Version: barber with language dropdown row

[Support]

Hello, first thanks for your purchase.

We opt to hide the language dropdown on top header bacause we don’t have enough space to show on mobile devices. If even so you want to show the on mobile, just change the <li> class of language dropdown to:

<li class="nav-item dropdown nav-item-left-border nav-item-left-border-remove nav-item-left-border-md-show">

* Note that I just removed the classes d-none d-sm-block.

Another way is like you mentioned (add inside menu). For it please use this code as new menu item in the nav list:

<nav>
    <ul>
...
.........
......
                <li class="dropdown">
			<a href="#" class="dropdown-item dropdown-toggle">LANGUAGE</a>
			<ul class="dropdown-menu">
				<li><a class="dropdown-item" href="#"><img src="img/blank.gif" class="flag flag-us" alt="English" /> English</a></li>
				<li><a class="dropdown-item" href="#"><img src="img/blank.gif" class="flag flag-es" alt="English" /> Español</a></li>
				<li><a class="dropdown-item" href="#"><img src="img/blank.gif" class="flag flag-fr" alt="English" /> Française</a></li>
			</ul>
		</li>
	</ul>
</nav>

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[francesco2424]

Hi,

I like your second solution, to add language to menu.

Can I use this new menu item (language) only for mobile and turn off for desktop menu? (to leave existing language drop-down menu for desktop)

Thank you very much!

---

[Support]

Hello,

Oh, you are right! I forget the code to hide on large devices. Sorry!

Please try with this new HTML code:

<nav>
    <ul>
...
.........
......
                <li class="dropdown d-lg-none">
			<a href="#" class="dropdown-item dropdown-toggle">LANGUAGE</a>
			<ul class="dropdown-menu">
				<li><a class="dropdown-item" href="#"><img src="img/blank.gif" class="flag flag-us" alt="English" /> English</a></li>
				<li><a class="dropdown-item" href="#"><img src="img/blank.gif" class="flag flag-es" alt="English" /> Español</a></li>
				<li><a class="dropdown-item" href="#"><img src="img/blank.gif" class="flag flag-fr" alt="English" /> Française</a></li>
			</ul>
		</li>
	</ul>
</nav>

* Note <li class="dropdown d-lg-none">.

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[francesco2424]

Hi,

If not too much work, there is still:

Desktop: menu separator “white dot” is still there on the right side of last menu item.
*Another question: This menu separator can be changed?

Mobile: dropdown list text is transparent – no color.

Thank you very much!

---

[Support]

Hello,

Oh, right!

To remove the last dot on menu first please add this custom HTML class to <li> item before the <li> with language dropdown:

....
......
.......
...
    <li class="position-relative remove-menu-item-dot">
        <a class="dropdown-item background-transparent" data-hash data-hash-offset="68" href="#footer">Contact Us</a>
    </li>
    <li class="dropdown d-lg-none">
        <a href="#" class="dropdown-item dropdown-toggle">LANGUAGE</a>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#"><img src="img/blank.gif" class="flag flag-us" alt="English" /> English</a></li>
            <li><a class="dropdown-item" href="#"><img src="img/blank.gif" class="flag flag-es" alt="English" /> Español</a></li>
            <li><a class="dropdown-item" href="#"><img src="img/blank.gif" class="flag flag-fr" alt="English" /> Française</a></li>
        </ul>
    </li>
</ul>

* Note remove-menu-item-dot.

And add this code in (css/custom.css):

@media (min-width: 992px) {
    .remove-menu-item-dot > a:before {
        content: none !important;
    }
}

*Another question: This menu separator can be changed?

The dot is generetad trough pure CSS:

* You can use this same CSS rule inside the custom.css file and change as per your needs.

Mobile: dropdown list text is transparent – no color.

Change the class of anchor elements inside the language dropdown to (inside menu):

<li><a class="dropdown-item text-color-primary text-color-hover-light bg-transparent" href="#"><img src="img/blank.gif" class="flag flag-us" alt="English" /> English</a></li>
<li><a class="dropdown-item text-color-primary text-color-hover-light bg-transparent" href="#"><img src="img/blank.gif" class="flag flag-es" alt="English" /> Español</a></li>
<li><a class="dropdown-item text-color-primary text-color-hover-light bg-transparent" href="#"><img src="img/blank.gif" class="flag flag-fr" alt="English" /> Française</a></li>

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[francesco2424]

Hi Rodrigo,

1. Separator: I’ve added li class and custom css: the dot is gone but menu item like css code not working. Image below..
https://ibb.co/9qp7Dpf

2. mobile text: all ok.

3. mobile: I just saw that mobile menu is short. I have 4 languages in menu and menu only showing 2 even down is still place. It’s possible to increase mobile menu size height? Image below..

https://ibb.co/qrS4LzK

THANK YOU!

---

[Support]

Hello,

1) I did a new test here and the code works. Make sure to add the class remove-menu-item-dot on the <li> before the <li> with language dropdown. Also clear your browser cache to see the new changes at custom.css file. If even so still not works, please send a test online link with your website for us, so we can inspect your code and help you with that.

3) At really this is the expected behavior, since the menu is scollable. But you can increase the height with the code below in (css/custom.css):

@media (max-width: 991px) {
    #header .header-nav-main nav {
        max-height: 58vh;
    }
}

* Make sure to clear browser cache.

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[francesco2424]

Hi,

1. The code works. I lost ” in my code. Now ok.

3. all ok.

THANK YOU!

---

[Support]

Hello,

Great! 🙂

If you need further assistance, feel free to contact us.

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[Author]

Posts