We’re with you. JoomShaper is offering a 20% Discount on all plans due to the impact of COVID-19.

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

How to change position of language flags

Featured Lock Resolved Issue
Hi,

I'd like to move my flag module on the right side..next to menù.
Can you please help me? I tried several position but no result.
If I change position modifying padding I got problem with mobile and tablet visualization so...can you give me some hints?

Regards, Bmbsoluzioni

Attachments (1)

  • screen.png
    screen.png 680.7 KB

13 Answers

Paul Frankowski - Staff

3 weeks ago #Permalink
Sometimes using a custom CSS is necessary to match something.
Each column has a reserved area, like a box, so it cannot go outside.
----
If you want to have this
foto_4365_2020.jpg

Inside your custom CSS you have to add also this line:

.sp-module-content .mod-languages ul.lang-inline {right: 5px;}

Attachments (1)

  • foto_4365_2020.jpg
    foto_4365_2020.jpg 8.4 KB

Paul Frankowski - Staff

3 weeks ago #Permalink
Hi,
1) Select the "menu" position for it
2) Then share website URL
I sent you the credentials in pvt, thanks.

Paul Frankowski - Staff

3 weeks ago #Permalink
thanks,
checking

Paul Frankowski - Staff

3 weeks ago #Permalink
Are you sure that you published language module in "menu" position?
I see it in "logo" area
Are you sure that you published language module in "menu" position?
I see it in "logo" area
I tried all the position as I said in the first post...now is in menu position.
As you can see the languages are not next to menu and more important in tablet and mobile visualization are in vertical over hamburger-menu.
I found a good compromise with "Logo" position but unfortunately we need to put it on the right :\

Thank you for your support

Regards, BMBSoluzioni

Paul Frankowski - Staff

3 weeks ago #Permalink
But using position: absolute; as you did, it may not be a perfect solution for the mobile view.
So it requests a few more lines.


@media (max-width: 580px) {
.sp-module-content .mod-languages ul.lang-inline
{top:5px; right: 5px; margin-right:10px}
}


foto_4366_2020.jpg

Attachments (1)

  • foto_4366_2020.jpg
    foto_4366_2020.jpg 25.8 KB
Hi Paul,

thank you for support. It's not possible to put flags next to the last menu item?
With this solution now I can't select the language...mouse arrow catch only mega menu :/

I adjusted it...now it's ok :)


Regards, BMBSoluzioni

Paul Frankowski - Staff

3 weeks ago #Permalink
Yes, it's possible to have inside this same row as a menu, but I recommend using a custom header with 3 columns.

Logo, Menu, top3 (where language module should be)

https://www.joomshaper.com/documentation/helix-framework/helixultimate#layout-builder

Read: How to create a custom header
Yes, it's possible to have inside this same row as a menu, but I recommend using a custom header with 3 columns.

Logo, Menu, top3 (where language module should be)

https://www.joomshaper.com/documentation/helix-framework/helixultimate#layout-builder

Read: How to create a custom header







I read the documentation and I created a custom header ... but now I have two problems: the menu must remain attached at the top like the preset header (I have not found the option) and flags disappear in mobile view .... I also have removed the custom css referred to the language switcher.

Paul Frankowski - Staff

3 weeks ago #Permalink
I have feeling that you didn't read whole documentation with focus. Step 5 is very important to keep header fixed, sticky.

---
About flags. I guess it's also a problem with settings.
Besides you can publish 2nd Language module inside "offcanvas" position
I have feeling that you didn't read whole documentation with focus. Step 5 is very important to keep header fixed, sticky.

---
About flags. I guess it's also a problem with settings.
Besides you can publish 2nd Language module inside "offcanvas" position


Thanks for replies.
You are right..I changed name "Header" in "Custom Header" so it didn't stick on the top.

I prefered to use custom css ... Because I found other problems in the mobile version so I had to move it anyway with the code, I managed it in this way with the code you gave me at the beginning.

Thanks again for you helpful hint!

Regards, BMBSoluzioni


There are no replies made for this post yet.
Be one of the first to reply to this post!

126

Templates

333389

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us