Customize mobile menu with links that are not in main navigation

Hey 🙂

I want to customize my mobile menu from my site https://www.smart-and-agile.de/

1. The links from the folder "Services" should appear as individual links (without the folder). A dividing line should be placed underneath.
2. The pages from the footer should appear under this dividing line in a smaller font, even if they are not stored in the main navigation.
3. The footer should then be hidden in the mobile version

I'm really looking forward to your support! Thank you in advance!
Wolfgang
 

Hi,

#1. You can add this code to Website Tools (under Not Linked) > Code Injection > Footer

This code will create effect: When users click on Services >> Show all folder item under it without open new sub page. If this is not what you want, you describe your desired layout, we can check it again easier

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
		$('.header-menu-nav-folder[data-folder="/services"]').appendTo('[data-folder="root"]>div>.container.header-menu-nav-item:nth-child(2)');
		$('a[data-folder-id="/services"]').click(function() {
  $(this).toggleClass('tp-burger-folder');
});
	});
</script>
<style>
	.header-menu-nav-folder[data-folder="/insights"] {
    display: block !important;
    position: relative !important;
    transform: unset !important;
    overflow: hidden;
    height: 0 !important;
    transition: all 0.3s;
}
.header-menu-nav-folder[data-folder="/insights"] .header-menu-controls {
    display: none;
}
a.tp-burger-folder+.header-menu-nav-folder[data-folder="/insights"] {
    height: 100% !important;
}
.header-menu-nav-folder[data-folder="root"] {
    transform: unset !important;
    overflow: hidden;
}
[data-folder="/insights"] a {
    margin-top: 5px;
    margin-bottom: 5px;
    white-space: nowrap;
}
[data-folder-id] {
    margin-top: 10px;
    margin-bottom: 10px !important;
}
 a[data-folder-id] span:nth-child(2):after {
    content: "\e009";
    font-family: 'squarespace-ui-font';
}

a[data-folder-id] {
    white-space: nowrap;
}
span.chevron.chevron--right {
    visibility: hidden !important;
}

</style>

#2. You mean reduce text size?

#3. To hide Footer on Mobile, add this code to Website Tools > Custom CSS

@media screen and (max-width:767px) {
	footer.sections {
		display: none !important;
}
}