Profile header look like forum page

3 replies · opened Jun 14, 2020

Ppoekg1991Jun 14, 2020

Please advise me how can i do code implement for Profile image dropdown at header nav.

SSemicolon WebSTAFFJun 14, 2020

Hello,

Unfortunately, this is something that is not included with the Canvas Template. And, we currently do not provide Customization related Support according to the Item Support Policy: https://themeforest.net/page/item_support_policy . However, we can give you the CSS Codes:


#top-account-info {
	float: right;
	margin-left: 30px;
	height: 70px;
}

#top-account-info > a {
	display: block;
	position: relative;
	padding: 15px 20px;
	line-height: 40px;
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: 12px;
	font-weight: 400;
	color: #444;
	border-left: 1px solid #F5F5F5;
	-webkit-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}

#top-account-info:hover > a { background-color: #F5F5F5; }

#top-account-info > a img {
	display: block;
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

#top-account-info > ul {
	position: absolute;
	display: block;
	opacity: 0;
	pointer-events: none;
	right: 0;
	top: 70px;
	width: 180px;
	padding: 15px 0;
	height: auto;
	background-color: #F5F5F5;
	-webkit-transition: opacity .3s ease;
	-o-transition: opacity .3s ease;
	transition: opacity .3s ease;
}

#top-account-info:hover > ul {
	opacity: 1;
	pointer-events: auto;
}

#top-account-info > ul li {
	display: block;
	float: none;
	height: auto !important;
	margin: 0;
}

#top-account-info > ul li.top-account-welcome {
	font-size: 15px;
	margin-bottom: 10px;
}

#top-account-info > ul li a {
	height: auto;
	padding: 6px 20px;
	line-height: 24px;
	text-transform: none;
	letter-spacing: 1px;
	font-size: 14px;
	font-weight: 500;
	color: #666;
}

and HTML Codes:


	[
![attachment](https://s3.envato.com/files/79965015/small.png)
](http://support.semicolonweb.com/forums/users/semicolonweb/)
	
		
- [Edit Profile](http://support.semicolonweb.com/forums/users/semicolonweb/edit/)
		
- [Your Tickets](http://support.semicolonweb.com/forums/users/semicolonweb/topics/)
		
- [Logout](http://support.semicolonweb.com/wp-login.php?action=logout&redirect_to=http%3A%2F%2Fsupport.semicolonweb.com%2Fforums%2Ftopic%2Fprofile-header-look-like-forum-page&_wpnonce=d29268a301)
	

But you will need to implement this yourself according to your needs. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

SSemicolon WebSTAFFJun 16, 2020

Hello,

Apologies about the Inconveniences caused!

As we had mentioned earlier, we currently do not provide Customization related Support according to the Item Support Policy: https://themeforest.net/page/item_support_policy . You will need to manually code this or Hire a Freelancer to help you out as this is something not included with Canvas.

Let us know if we can help you with anything else.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard