"User Profile menu"
Bootstrap 4.1.1 Snippet by imsachin

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <title>HTML</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!--[if IE]> <link href="~/Content/NewHomePage/all-ie-only.css" rel="stylesheet" /> <![endif]--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="user-profile d-none d-lg-block "><div class="user-profile-wrap"><!----> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAC2ElEQVRYR9WYQWgTURCG/0l6UKR6sWKh0E3bdEVQBCXRQhtPntSCCF68FBtQDx4UbA82h+DBCnrwYIUovXgRRE315Mkqtt2gJ0FMa5sEChXbU6HQQ5Inb80uSbqbvGxeku1e983M9+a9mXkzBIdfwucfAjyhPMMpAi7aqIkT4TsD+xRMLX5xYopqEZrr6u3ztrWFCRhhQEctsgSsM2A6l83GBlaXf4vKCgEmlKOHGXIRADdEFVdZN0XwRgPpn3+q6asKqHWr10B4Xk2Rk/95xsJnMosVdVcE1BT1qUSv2e1hKphO3rT7aQuoKeoMgAtOPONA5n0wnbQMNEvAJsMZ+7GE3AHYpGMVPu4SwPnu/lEPUczBEckTYRgNZpIvDIUmYCGVrMmz5FwTwdtppCATsMVHW74bM7J1wEKFWHK+Z/mSuWzWzyuODqgp6iSAu/LN1KXxYTCdHNMBE4r6t9baWpdpAWFeuwPp5CHSfP2DYPRZQAa+B/fRceWy5dL1V6+RGr9n/jv28QO87e1YuTOGzbkFEfU71hDlQ5TwqROMISqigQMevDSMtWcxrD5+YooY4MWQcgARIU1R3wEYrgdw/8Bp9DyaxPbyCn5dHdFVyQBkwAwHZCJwfI2dBxsFyG1KAeTgB0KDJfdNhgcdAdoFSW5rC5mJKDbexqUdsSNAqyDpun0LndfD2E5n8OPcefcBcqIjL6ex78Rx04stO2IrDzYUcEFR4xXaxpIAt4tiA3BPb48ZKJI8GJeSqI07uPEmblYTGYBEiBBvwBnzzIrkwlpL3V5/n6Xaza/zZkKvaJfYkPsfC7viueX6B2vBi81o0kWuOl9T+uT//2jV5y/ubZp0LzZwDiPquvJ5ze5q3I1dunr00SLI2oZHRZDNiGxn4zcDsqHzmrI5jFUgVZ2wFqUgd46Ai3fl2iG6let5w0+gs4zhpF3byttGD+EbkJ8NpJaEhgPltv4Br6iuy6YUqEgAAAAASUVORK5CYII=" width="40" height="40"> <!----> <img src="/ciena/images/down-arrow.svg" alt="images" class="arrow"> </div> <!----> <div class="user-content"><div><div class="d-flex align-items-center mb-2"><!----> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAC2ElEQVRYR9WYQWgTURCG/0l6UKR6sWKh0E3bdEVQBCXRQhtPntSCCF68FBtQDx4UbA82h+DBCnrwYIUovXgRRE315Mkqtt2gJ0FMa5sEChXbU6HQQ5Inb80uSbqbvGxeku1e983M9+a9mXkzBIdfwucfAjyhPMMpAi7aqIkT4TsD+xRMLX5xYopqEZrr6u3ztrWFCRhhQEctsgSsM2A6l83GBlaXf4vKCgEmlKOHGXIRADdEFVdZN0XwRgPpn3+q6asKqHWr10B4Xk2Rk/95xsJnMosVdVcE1BT1qUSv2e1hKphO3rT7aQuoKeoMgAtOPONA5n0wnbQMNEvAJsMZ+7GE3AHYpGMVPu4SwPnu/lEPUczBEckTYRgNZpIvDIUmYCGVrMmz5FwTwdtppCATsMVHW74bM7J1wEKFWHK+Z/mSuWzWzyuODqgp6iSAu/LN1KXxYTCdHNMBE4r6t9baWpdpAWFeuwPp5CHSfP2DYPRZQAa+B/fRceWy5dL1V6+RGr9n/jv28QO87e1YuTOGzbkFEfU71hDlQ5TwqROMISqigQMevDSMtWcxrD5+YooY4MWQcgARIU1R3wEYrgdw/8Bp9DyaxPbyCn5dHdFVyQBkwAwHZCJwfI2dBxsFyG1KAeTgB0KDJfdNhgcdAdoFSW5rC5mJKDbexqUdsSNAqyDpun0LndfD2E5n8OPcefcBcqIjL6ex78Rx04stO2IrDzYUcEFR4xXaxpIAt4tiA3BPb48ZKJI8GJeSqI07uPEmblYTGYBEiBBvwBnzzIrkwlpL3V5/n6Xaza/zZkKvaJfYkPsfC7viueX6B2vBi81o0kWuOl9T+uT//2jV5y/ubZp0LzZwDiPquvJ5ze5q3I1dunr00SLI2oZHRZDNiGxn4zcDsqHzmrI5jFUgVZ2wFqUgd46Ai3fl2iG6let5w0+gs4zhpF3byttGD+EbkJ8NpJaEhgPltv4Br6iuy6YUqEgAAAAASUVORK5CYII=" width="40" height="40" class="mr-2 avatar"> <!----> <div><h6 class="mb-0 text-truncate">Bluelupin</h6> <p class="text-truncate" style="font-size: 12px;"> </p></div></div> <p class="m-0"><a href="javascript:void(0)">My Dashboard</a></p> <p class="m-0"><a href="javascript:void(0)">Show Help Guide</a></p> <p class="m-0"><a href="#">Sign out</a></p></div></div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="custom.js"></script> </body> </html>
user-profile { cursor: unset; display: flex; align-items: center; justify-content: flex-end; } .user-profile .user-profile-wrap { display: flex; align-items: center; justify-content: flex-end; } .user-profile img { width: 40px; height: 40px; border-radius: 50%; } .user-profile .arrow { width: 10px; margin-left: 5px; } .user-content { display:none; position: absolute; top: 40px; right: 0; background: #ffffff; border-radius: 10px; padding: 15px 15px; /* width: 230px; */ z-index: 999; box-shadow: 0 1rem 3rem rgb(0 0 0 / 18%); animation-name: DropDownSlide; animation-duration: 0.3s; animation-fill-mode: both; } .user-profile .avatar { object-fit: cover; object-position: center; } .user-profile img { width: 40px; height: 40px; border-radius: 50%; } .user-content h6 { color: #c92027; } .user-content a { color: #7f7f7f; } .user-profile:hover .user-content{display:block;}

Related: See More

Rotating CSS Card
Instagram Style User Online
Bootstrap NavBar Menu Dropdowns http://fontenele.github.io/bootstrap-navbar-dropdowns/
My User Login Page

Questions / Comments: