This code changes the profile menu layout to a "hamburger menu" view on mobile devices.

um_profile_menu.php

<?php

/**
 * Display profile menu as a hamburger menu on mobile.
 * Add this code to the file functions.php in the active theme directory.
 */
add_action( 'um_profile_menu', function(){
	?>
	<div class="um-profile-menu">
		<button class="um-profile-nav-toggle um-profile-nav-item um-tip-n uimob800-show uimob500-show uimob340-show" onclick="jQuery(this).toggleClass('open');" title="Profile Menu"><i class="um-faicon-bars"></i></button>
	<?php
}, 8 );
add_action( 'um_profile_menu', function(){
	?>
	</div>
	<style type="text/css">
		.um-profile-menu{
			display: flex;
		}
		.um-profile-menu .um-profile-nav{
			flex-grow: 1;
		}
		.um-profile-menu .um-profile-nav-toggle{
			align-self: flex-start;
		}
		.um-profile-menu .um-profile-nav-toggle.open + .um-profile-nav .um-profile-nav-item a.uimob800-show.uimob500-show.uimob340-show{
			display: initial;
		}
		.um-profile-menu .um-profile-nav .um-profile-nav-item:not(.active) a.uimob800-show.uimob500-show.uimob340-show{
			display: none;
		}
		.um-profile-menu .um-profile-nav-toggle.um-profile-nav-item,
		.um-profile-menu .um-profile-nav .um-profile-nav-item a.uimob800-show.uimob500-show.uimob340-show {
			border: none;
			border-radius: 0px;
			box-sizing: border-box;
			line-height: 44px;
			min-width: 44px;
			padding: 0px 10px;
			text-align: center;
		}
		.um-profile-menu .um-profile-nav-toggle.um-profile-nav-item i,
		.um-profile-menu .um-profile-nav .um-profile-nav-item a.uimob800-show.uimob500-show.uimob340-show * {
			display: initial;
		}
	</style>
	<?php
}, 10 );

This gist is a part of the article Display profile menu as a hamburger menu on mobile.

Documentation: https://docs.ultimatemember.com/
Support forum: https://wordpress.org/support/plugin/ultimate-member/