Make the profile menu vertical

You can make the profile menu vertical with a CSS snippet. See example below. 

You can override the style by adding CSS code to the field "Additional CSS" on the page wp-admin > Appearance > Customize > Additional CSS.

/**
 * Make the profile menu vertical
 */
.um-profile .um-profile-nav {
	float: left;
	max-width: 12em;
	min-width: 4em;
	width: 20%;
}
.um-profile .um-profile-nav .um-profile-nav-item a{
	float: none;
}
.um-profile .um-profile-body{
	float: right;
	max-width: calc(100% - 4em);
	min-width: calc(100% - 12em);
	width: 80%;
	padding-left: 1.5em;
}
.um-profile .um-profile-nav,
.um-profile .um-profile-body,
.um-profile .um-profile-content-container,
.um-profile .um-theme-profile-single-content-container{
	box-sizing: border-box;
	margin-top: 0px !important;
	padding-top: 0px !important;
}

NOTE: We have created this code example to provide guidance and to make it easier for you to implement this code into your website. However, we are not able to provide any support when it comes to customizing the plugin. If you need help implementing this code, please hire a developer.

Example - Profile with vertical menu.

Related Articles