Home › Forums › Support › Wpml translation flags: is it possible to have these next to the menu toggle?
- This topic has 16 replies, 3 voices, and was last updated 2 years, 1 month ago by David.
-
AuthorPosts
-
March 16, 2022 at 12:48 am #2156250kayleigh
Hi
I have used wpm to create a website with generate press. My client has now told me they would prefer the website to show first in the second language, I can see that this is not possible alternatively they would like the English and French flag next to the menu toggle on mobile view as opposed to within the drop down menu.
Is this possible?
Many thanks
KayleighMarch 16, 2022 at 1:36 am #2156300Fernando Customer SupportHi Kayleigh,
Yes, it’s possible. Based on this article, you can hook the Language switcher through PHP or its shortcode: https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/#custom-locations
For instance, you may create a Hook Element with hook generate_menu_bar_items as such: https://share.getcloudapp.com/geumYZP1
or: https://share.getcloudapp.com/d5u9bY24
Then after you’ve added it as such, if you can provide the link to the site in question, we can use custom CSS to adjust its position and visibility if needed.
Here is a thread which may help as well: https://generatepress.com/forums/topic/generatepress-hooks-to-add-wpml-menu-switcher-next-to-toggle-on-mobile/
Hope this helps. 🙂
March 16, 2022 at 3:42 am #2156425kayleighThank you, I have managed to add this to the header. The next issue is the hamburger menu is off center and cannot find the option to change this to the the center.
March 16, 2022 at 5:15 am #2156531DavidStaffCustomer SupportHi there,
can you edit the Header Widget and make sure there is no Empty Paragraph before the shortcode.
March 16, 2022 at 6:18 am #2156586kayleighIm confused? I have not entered anything before the shortcode? also how do I change the place of the flag on desktop so it is inline with the main header?
March 16, 2022 at 6:26 am #2156597DavidStaffCustomer SupportOk, its not uncommon for WP to insert empty Paragraphs with shortcodes.
Add this CSS to remove the space its creating and to align the flag icon:.header-widget .widget p { margin-bottom: 0; }
March 16, 2022 at 6:31 am #2156600kayleighAh perfect that has worked, and now how do I move the hamburger menu to be central beneath the logo on mobile please
March 16, 2022 at 6:38 am #2156607DavidStaffCustomer SupportAdd this CSS to center the hamburger:
.mobile-menu-control-wrapper { margin-right: auto; }
March 16, 2022 at 6:52 am #2156636kayleighAmazing thank you so much for your help!
March 16, 2022 at 6:53 am #2156638DavidStaffCustomer SupportYou’re welcome
March 16, 2022 at 8:55 am #2156908kayleighSorry last question the client has asked to move the flag up so the header isn’t too deep. Also to move the logo header to center on mobile
I apologise for my lack of coding knowledge on this, finding more time to learn is proving tough!
March 16, 2022 at 9:30 am #2156942DavidStaffCustomer SupportNo apologies necessary – we’re more then happy to help 🙂
Try adding this CSS:
@media (max-width: 768px) { .site-heasder .inside-header { justify-content: center; } .site-logo { flex-basis: 100%; text-align: center; } .site-logo img { width: 200px !important; } nav.mobile-menu-control-wrapper { margin-left: unset; } .main-navigation + .main-navigation { order: 50; } .site-header .header-widget{ flex-basis: auto !important; margin: unset !important; } }
It will position the Hamburger left and the Flag to the Right. And center the logo and set its width to 200px.
Also if you need – you can reduce the Customizer > Layout > Header > Padding just for mobile if need be.
March 16, 2022 at 9:32 am #2156944kayleighThank you, so glad I paid for the pro version!
Thank you but is there a way to change this so the toggle is centred and the flag under?
March 16, 2022 at 9:37 am #2156950kayleighSorry ignore that the client is happy with it like that!
Thank you so much for your help!
March 16, 2022 at 9:40 am #2156959DavidStaffCustomer SupportSo glad to hear that !
-
AuthorPosts
- You must be logged in to reply to this topic.