social icons in mobile menu - Support | Kriesi.at

Tagged: events calendar, language switcher, mobile menu, social icons

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

Author

Posts
August 18, 2024 at 9:58 pm #1464865

Munford
Participant

HI
I am trying to add the social icons in the mobile menu – I have chosen the option to show them in the main header, but they are not there on mobile.
Also, the WPML language switcher looks like this on mobile: https://imgur.com/a/fLpqB53
Can the flags be side -by-side or at least with 0 padding on the lower one?

Could you also help me to show the socket only on the mobile pages? – in case the social icons look better there.

thanks
Nancy

August 19, 2024 at 5:27 am #1464870
Ismael
Moderator
Hey Munford,

Thank you for the inquiry.

The social icons and language switchers are intentionally hidden on mobile view due to the lack of space in the header. If you want to display them again, you can try this css code:
```
@media only screen and (max-width: 768px) {

  /* Add your Mobile Styles here */
  .responsive #top #wrap_all #header .social_bookmarks,
  .responsive #top #wrap_all #main .av-logo-container .social_bookmarks {
    display: block;
  }

  #top .av-burger-menu-main.menu-item-avia-special {
    left: auto;
  }
}
```
Best regards,
Ismael
August 19, 2024 at 10:27 am #1464891

Munford
Participant

Hi
The language switcher isn’t hidden, but I’d like the flags inline with each other.
I will try the social icons code.
I saw in the social icons admin area that they can be added to the footer, but I don’t see any options there.
Does that still have to be coded in?
thanks
Nancy

August 19, 2024 at 12:04 pm #1464899
Ismael
Moderator
Hi,

Where would you like to position the language switcher exactly? Please provide a screenshot. You can display them again in mobile view using this css code:
```
@media only screen and (max-width: 768px) {

  /* Add your Mobile Styles here */
  .responsive #top .av-main-nav .menu-item-language {
    display: inline-block;
  }
}
```
To display the social icons in the footer, go to the Enfold > Footer panel, then toggle the Social Icons option.

Best regards,
Ismael
August 19, 2024 at 4:50 pm #1464913
Munford
Participant
OK I figured that out.
Can you help me with another thing?
I have a video I am trying to upload to the site.
I added it via FTP but I can’t see how to access it – it’s not in the media library.
If I add the url it doesn’t load.
Can this be done? I don’t really want to deal with the file size limit thing.
thanks
Nancy
- This reply was modified 4 months ago by Munford.
August 19, 2024 at 7:39 pm #1464927

Rikard
Keymaster

Hi,

You need to upload files under Media in WordPress, otherwise they won’t show up in the gallery. The link to the video shows a 404 page on my end, did you check the URL of the file?

Best regards,
Rikard

August 20, 2024 at 5:30 pm #1464995

Munford
Participant

Hi Again
I worked out the video issue, thanks.

sorry, I want the language swtichers to be in the fly out menu on mobile, like they are now, but they aren’t lined up becuse it’s in a list.
Can they be in one line side by side or lined up on the left side?

thanks
Nancy

August 21, 2024 at 5:29 am #1465023
Ismael
Moderator
Hi,

Thank you for the screenshot.

To align the flags, please add this css code:
```
@media only screen and (max-width: 768px) {

  /* Add your Mobile Styles here */
  .responsive #top #wrap_all .menu-item-wpml-ls-58-en a, .responsive #top #wrap_all .menu-item-wpml-ls-58-da a {
    padding: 0 !important;
  }

  #top #wrap_all #header #av-burger-menu-ul li.menu-item-wpml-ls-58-en, #top #wrap_all #header #av-burger-menu-ul li.menu-item-wpml-ls-58-da {
    width: 100px;
    display: flex;
    flex-direction: row;
    left: 50px;
    position: relative;
    top: 30px;
  }

  .responsive #top #wrap_all .menu-item-wpml-ls-58-en .sub-menu, .responsive #top #wrap_all .menu-item-wpml-ls-58-da .sub-menu{
    margin-left: 10px;
    margin-top: 2px;
  }
}
```
Best regards,
Ismael
August 21, 2024 at 11:42 am #1465061

Munford
Participant

Hi
Thanks that worked.
Could you look at one other thing?
I am using the Events Calendar and want the overview and single pages to look similar but I am seeing a big padding at the top of the single events pages. See below. The overview page has a bit of extra spacing and that header which is added to the EC settings.
Can I get them to match?
thanks
Nancy

August 21, 2024 at 1:43 pm #1465077
Munford
Participant
actually the flag thing didn’t work – it only hid the active language.
see below
- This reply was modified 4 months ago by Munford.
August 23, 2024 at 4:45 am #1465199

Ismael
Moderator

Hi,

actually the flag thing didn’t work – it only hid the active language.

Would you mind adding the css code again or providing the login details in the private field? We checked the page, but the css code is not applied, so we’re not able to see the issue.

If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks!

Best regards,
Ismael

August 23, 2024 at 9:54 am #1465221

Munford
Participant

Hi
sorry about adding to this thread.

The css code was there added to the theme files, but I re-added it and it’s still not working.
thanks for taking a look
Nancy

August 25, 2024 at 6:04 pm #1465363
Mike
Moderator
Hi,
For the language switcher in your mobile menu, your setting will only show the language that is not active, to always show both you need to use this option:

and this css:
```
@media only screen and (max-width: 768px) {
#top #wrap_all #header #av-burger-menu-ul li.menu-item-wpml-ls-58-en, #top #wrap_all #header #av-burger-menu-ul li.menu-item-wpml-ls-58-da {
        width: 50px;
        display: inline-block;
        top: 30px;
}
}
```
I did this for you:

Please clear your browser cache and check.

Best regards,
Mike
Author

Posts

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

You must be logged in to reply to this topic.