Add some info and links to bottom of Overlay MENU on mobile

Hello there,

I will like to add some information at the very bottom of the overlay menu on mobile. Similar to this: example: https://giancarlovalle.com/ Thanks so much in advance!

Hi,

This is possible, but what is your site url? We can help easier

Hi @tuanphan, My site is https://www.lacalifornie.es
Thank you for looking into this!

On 11/26/2023 at 11:41 PM, LucyBold said:

Hi @tuanphan, My site is https://www.lacalifornie.es
Thank you for looking into this!

Hi,

Add to red box, or add it under Search input?

Something like this @tuanphan

Add this to Bottom of Code Injection > Footer

<script>
  $(document).ready(function(){
    $('<div class="mobile-custom-info"><p><a href="https://Instagram">Instagram</a><p><p><a href="mailto:abc@gmail.com">Email</a><p></div>').insertBefore('.header-menu-actions.social-accounts');
});
</script>
<style>
  .mobile-custom-info a {
    font-family: var(--site-navigation-font-font-family);
    margin-left: 5vw;
}
</style>

Great! thanks so much @tuanphan can I now add some CSS to adjust tweak type size and spacing between this two new links?

You can change this code

<style>
  .mobile-custom-info a {
    font-family: var(--site-navigation-font-font-family);
    margin-left: 5vw;
}
</style>

to this

<style>
  .mobile-custom-info a {
    font-family: var(--site-navigation-font-font-family);
    margin-left: 5vw;
    font-size: 17px !important;
    margin-bottom: 20px;
}
</style>

Thanks for getting into so much detail @tuanphan this is the spacing (in red) i will like to tweak?  I can'y make it work with the code you provided. 

Thank you so much @tuanphan