Today I will guide you how to add a custom content into Burger Menu (see screenshot)
#1. First, you need to create a section in Footer (suppose second section) > design your layout.
#2. Use this code to Design > Custom CSS or Website > Website Tools > Custom CSS to hide this section from Footer
footer.sections section:nth-child(2) {
display: none !important;
}
We need to use this code because, before #3 runs, the section might appear in the footer for a few seconds, before disappearing.
#3. Use this code to Code Injection > Footer to move section in to Burger Menu
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('footer.sections section:nth-child(2)').insertBefore('.header-menu-cta');
});
</script>
<style>
/* unset section height */
div.header-menu section {
min-height: unset !important;
}
</style>
We will have
#4. Add this code under to turn link to button
<style>
div.header-menu .html-block a {
color: white !important;
background-color: black;
padding: 0.3rem 1.5rem;
text-decoration: none !important;
}
</style>
Done. If you have any questions, just comment below.
