I'm trying to get the dropdown menu for the user icon more towards the left instead of how it looks in the screen shot below where it's off to the right. Also when the page initially loads the dropdown menu shows without a user clicking on it. How do I get that to hide until I hover or click on the user icon. Is this a css element that fixes either of these issues?
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Varela Round");
nav.navbar.navbar-expand-lg {
background-color: var(--linq-color-gray-300);
box-shadow: 0px 0px 4px #000033;
/*padding: 0;*/ }
html, body {
overflow-x: hidden;
height: 100%; }
body {
background: #fff;
padding: 0;
margin: 0;
font-family: 'Varela Round', sans-serif; }
.header {
display: block;
margin: 0 auto;
width: 100%;
max-width: 100%;
box-shadow: 0px 0px 4px #000033;
background-color: var(--linq-color-gray-300);
position: fixed;
height: 70px !important;
overflow: hidden;
z-index: 10; }
.main {
margin: 0 auto;
display: block;
height: 100%;
margin-top: 60px; }
.mainInner {
display: table;
height: 100%;
width: 100%;
text-align: center; }
.mainInner div {
display: table-cell;
vertical-align: middle;
font-size: 3em;
font-weight: bold;
letter-spacing: 1.25px; }
#sidebarMenu {
height: 100%;
position: fixed;
left: 0;
width: 250px;
margin-top: 60px;
transform: translateX(-250px);
transition: transform 250ms ease-in-out;
background: var(--linq-color-gray-300);
overflow-y: scroll; }
.sidebarMenuInner {
margin: 0;
padding: 0;
border-top: 1px solid rgba(255, 255, 255, 0.1); }
.sidebarMenuInner li {
list-style: none;
color: var(--linq-color-gray-700);
text-transform: uppercase;
font-weight: bold;
padding: 20px;
cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.sidebarMenuInner li span {
display: block;
font-size: 14px;
color: var(--linq-color-gray-700); }
.sidebarMenuInner li a {
color: var(--linq-color-gray-700);
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
text-decoration: none;
text-align: left; }
input[type="checkbox"]:checked ~ #sidebarMenu {
transform: translateX(0); }
input[type=checkbox] {
transition: all 0.3s;
box-sizing: border-box;
display: none; }
.sidebarIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 22px;
left: 15px;
height: 22px;
width: 22px; }
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: var(--linq-color-gray-700); }
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px; }
.diagonal.part-1 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left; }
.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px; }
input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0; }
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px; }
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -9px; }
/* extra css */
.navbar-toggler {
padding: .25rem, .01rem !important;
display: block !important;
background: red;
margin-right: 5px; }
.navbar-toggler[aria-expanded="true"] {
/*position: fixed;*/
/*top: 20px;
left: 20px;*/
z-index: 1032;
padding: .25rem, .01rem !important; }
#sidebar-wrapper {
position: fixed;
top: 0px;
bottom: 0px;
left: 0;
z-index: 731 !important;
width: 370px !important;
padding-top: 60px;
background-color: var(--linq-color-gray-300) !important; }
#sidebar-wrapper li a:hover {
background-color: var(--linq-color-gray-100) !important; }
.navbar-toggler-icon {
width: 35px;
height: 5px;
background-color: var(--linq-color-gray-700);
margin: 6px 0; }
.material-icons-chevron-right {
font-family: 'Material Icons';
font-weight: normal !important;
font-style: normal !important;
font-size: 24px !important;
line-height: 1 !important;
letter-spacing: normal !important;
text-transform: none !important;
display: inline-block !important;
white-space: nowrap !important;
word-wrap: normal !important;
direction: ltr !important;
-webkit-font-feature-settings: 'liga' !important;
-webkit-font-smoothing: antialiased !important;
float: right !important;
padding-right: 8px !important;
padding-top: 8px; }
.material-icons-person {
font-family: 'Material Icons';
font-weight: normal !important;
font-style: normal !important;
font-size: 24px !important;
line-height: 1 !important;
letter-spacing: normal !important;
text-transform: none !important;
display: inline-block !important;
white-space: nowrap !important;
word-wrap: normal !important;
direction: ltr !important;
-webkit-font-feature-settings: 'liga' !important;
-webkit-font-smoothing: antialiased !important;
padding-right: 8px !important;
padding-top: 8px; }
.collapse {
padding-left: 25px; }
.py-2 {
background-color: var(--linq-color-gray-300); }
.text-center {
color: var(--linq-color-gray-700) !important; }
.divFormFieldInput {
padding: 0 .75em 0 .75em;
font-size: 0.75em;
position: relative;
display: inline-block;
text-align: left;
border-color: var(--linq-color-gray-500);
line-height: 1.125;
float: left;
height: 35px; }
.dropdown-sfa {
background-color: var(--linq-color-gray-300);
color: var(--linq-color-gray-700);
margin-left: var(--linq-spacing-2);
font: var(--linq-font-size-5) var(--linq-font-secondary);
font-size: var(--linq-font-size-5);
padding: var(--linq-spacing-2); }
.dropdown-year {
background-color: var(--linq-color-gray-300);
color: var(--linq-color-gray-700);
margin-left: var(--linq-spacing-2);
font: var(--linq-font-size-5) var(--linq-font-secondary);
font-size: var(--linq-font-size-5);
padding: var(--linq-spacing-2); }
.btn-sfa {
background-color: var(--linq-color-gray-300);
color: var(--linq-color-gray-700);
margin-left: var(--linq-spacing-2);
font: var(--linq-font-size-5) var(--linq-font-secondary);
font-size: var(--linq-font-size-5);
padding: var(--linq-spacing-2); }
.btn-year {
background-color: var(--linq-color-gray-300);
color: var(--linq-color-gray-700);
margin-left: var(--linq-spacing-2);
font: var(--linq-font-size-5) var(--linq-font-secondary);
font-size: var(--linq-font-size-5);
padding: var(--linq-spacing-2); }
.dropdown-toggle {
background-color: var(--linq-color-gray-300);
color: var(--linq-color-gray-700);
margin-left: var(--linq-spacing-2);
font: var(--linq-font-size-5) var(--linq-font-secondary);
font-size: var(--linq-font-size-5);
padding: var(--linq-spacing-2);
border: none; }
.dropdown-menu {
color: var(--linq-color-gray-700) !important;
overflow-y: scroll !important; }
.dropdown-item {
font-size: .75rem !important;
color: var(--linq-color-gray-700) !important; }
.dropdown-item[disabled] {
color: rgba(0, 0, 0, 0.38); }
.person-email[disabled] {
color: rgba(0, 0, 0, 0.38);
margin: 0 var(--linq-spacing-4) var(--linq-spacing-2); }
.dropdown-item:hover {
color: var(--linq-color-gray-300) !important; }
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://example.com/MaterialIcons-Regular.eot);
/* For IE6-8 */
src: local("Material Icons"), local("MaterialIcons-Regular"), url(https://example.com/MaterialIcons-Regular.woff2) format("woff2"), url(https://example.com/MaterialIcons-Regular.woff) format("woff"), url(https://example.com/MaterialIcons-Regular.ttf) format("truetype"); }
.material-icons {
font-family: 'Material Icons';
font-weight: normal !important;
font-style: normal !important;
font-size: 24px !important;
line-height: 1 !important;
letter-spacing: normal !important;
text-transform: none !important;
display: inline-block !important;
white-space: nowrap !important;
word-wrap: normal !important;
direction: ltr !important;
-webkit-font-feature-settings: 'liga' !important;
-webkit-font-smoothing: antialiased !important;
float: right !important;
padding-right: 8px !important; }
.nav-container {
background-color: var(--linq-color-gray-300);
color: var(--linq-color-gray-700);
border-radius: 4px;
padding: 1em;
border: 1px solid #eee;
display: block;
max-width: 400px;
margin: 0 auto;
text-align: center;
font: var(--linq-font-size-5) var(--linq-font-secondary); }
ul,
li {
list-style: none;
-webkit-padding-start: 0; }
a {
text-decoration: none;
color: var(--linq-color-gray-300); }
.nav-item {
padding: 1em;
display: inline; }
.nav-item-dropdown {
position: relative;
color: var(--linq-color-gray-700) !important; }
.nav-item-dropdown:hover > .dropdown-menu {
display: block;
opacity: 1; }
.dropdown-trigger {
position: relative;
color: var(--linq-color-gray-700) !important; }
.dropdown-trigger:focus {
display: block;
opacity: 1; }
.dropdown-trigger::after {
content: "›";
position: absolute;
color: var(--linq-color-gray-700);
font-size: 24px;
font-weight: bold;
transform: rotate(90deg);
top: -5px;
right: -15px; }
.dropdown-menu {
background-color: var(--linq-color-gray-300);
display: inline-block;
text-align: right;
position: absolute;
top: 2.5rem;
right: -10px;
display: none;
opacity: 1;
transition: opacity 0.5s ease;
width: 160px; }
.dropdown-menu a {
color: #fff; }
a:link, a:visited {
color: var(--linq-color-gray-700) !important; }
.dropdown-menu-item {
cursor: pointer;
padding: 1em;
text-align: center;
font: normal normal normal 14px/20px var(--linq-font-primary); }
.dropdown-menu-item:hover {
background-color: var(--linq-color-gray-300); }
.dropdown-menu-item li .nav-item-select a {
color: var(--linq-color-gray-700) !important; }
.dropdown-menu {
position: absolute !important;
top: 100% !important;
right: auto !important;
z-index: 1000 !important;
/*display: none !important;*/
float: left !important;
min-width: 10rem !important;
padding: .5rem 0 !important;
margin: var(--linq-spacing-6) !important;
margin-left: var(--linq-spacing-2);
font-size: 1rem !important;
color: #212529 !important;
text-align: left !important;
list-style: none !important;
background-color: var(--linq-color-gray-100) !important;
color: var(--linq-color-gray-700);
background-clip: padding-box !important;
border: 1px solid rgba(0, 0, 0, 0.15) !important;
border-radius: .25rem !important; }
.dropdown-menu-person {
position: absolute !important;
top: 100% !important;
left: auto !important;
z-index: 1000 !important;
/*display: none !important;*/
float: left !important;
min-width: 10rem !important;
padding: .5rem 0 !important;
margin: var(--linq-spacing-6) !important;
margin-left: var(--linq-spacing-2);
font-size: 1rem !important;
color: #212529 !important;
text-align: left !important;
list-style: none !important;
background-color: var(--linq-color-gray-100) !important;
color: var(--linq-color-gray-700);
background-clip: padding-box !important;
border: 1px solid rgba(0, 0, 0, 0.15) !important;
border-radius: .25rem !important; }
.button {
font-family: inherit;
font-size: inherit;
line-height: inherit;
-webkit-appearance: button;
cursor: pointer;
text-transform: none;
margin: 0;
font: inherit;
color: inherit; }<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width">
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache,no-store" />
<meta http-equiv="expires" content="0" />
<title>AZDOE: Core Demo</title>
<link rel="stylesheet" href="https://design.linq.com/10.4.0/vendors/angular-material-theme.css">
<link rel="stylesheet" href="https://design.linq.com/10.4.0/storybook/angular/assets/linq-snackpaq-core.css">
<link rel="stylesheet" href="https://design.linq.com/10.4.0/theme/blueberry-muffin.css">
<link rel="stylesheet" href="../css/design-system-overrides/stylesheet.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,900" rel="stylesheet">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.12.1/css/all.css" integrity="sha384-TxKWSXbsweFt0o2WqfkfJRRNVaPdzXJ/YLqgStggBVRREXkwU7OKz xXtqOU4u8 " crossorigin="anonymous">
<link rel="stylesheet" href="../styles/master_common.css">
<link rel="stylesheet" href="../styles/master_760.css">
<link rel="stylesheet" href="../css/select2.css">
<link rel="stylesheet" href="../css/core2.css">
</head>
<body >
<div >
<!-- HEADER -->
<header id="header">
<nav >
<button type="button" data-toggle="collapse" data-target="#sidebar-wrapper" aria-controls="sidebar-wrapper" aria-expanded="false" aria-label="Toggle navigation">
<span >menu
</span>
</button>
<a href='/' >
<img id="headerLogo" src="../images/AZ-DOE.svg" alt="State Logo" />
</a>
<div ></div>
<div >
<ul >
<!-- Navigation -->
<!-- Dropdown menu -->
<li >
<a href="#">Select SFA</a>
<ul >
<li >
<a href="#">Dropdown Item 1</a>
</li>
<li >
<a href="#">Dropdown Item 2</a>
</li>
<li >
<a href="#">Dropdown Item 3</a>
</li>
</ul>
</li>
</ul>
</div>
<div ></div>
<div >
<ul >
<!-- Navigation -->
<!-- Dropdown menu -->
<li >
<a href="#">Select Program Year</a>
<ul >
<li >
<a href="#">Dropdown Item 1</a>
</li>
<li >
<a href="#">Dropdown Item 2</a>
</li>
<li >
<a href="#">Dropdown Item 3</a>
</li>
</ul>
</li>
</ul>
</div>
<div id="Div1">
<ul >
<li >
<a href="#" title="Settings"><i ></i></a>
</li>
</ul>
</div>
<div >
<a href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span >
person
</span>
</a>
<div aria-labelledby="dropdownMenuLink">
<h4 >Profile</h4>
<div disabled="true">[email protected]</div>
<a href="#">Logout</a>
</div>
</div>
</nav>
</header>
<!-- SPONSOR INFO SECTION -->
<main role="main" id="main">
<div id="wrapper">
<!-- SIDEBAR -->
<div id="sidebar-wrapper" >
<!-- <a href="#menu-toggle" id="menu-toggle">
<i ></i>
</a>-->
<div >
<div >
<ul >
<li>
<a href="#" v-b-tooltip.hover.right title="Entity Manager">
<div> Entity Manager</div>
</a>
</li>
<li>
<a href="/#/AZSiteApps" v-b-tooltip.hover.right title="Area Eligibility">
<div> Area Eligibility
</div>
</a>
</li>
<li>
<a href="/#/AZFFVP" v-b-tooltip.hover.right title="Site Applications">
<div> Site Applications</div>
</a>
</li>
<li>
<a href="/#/AZFDCH" v-b-tooltip.hover.right title="Documents">
<div> Documents</div>
</a>
</li>
<li>
<a href="#" v-b-tooltip.hover.right title="Contacts Directory">
<div> Contacts Directory</div>
</a>
</li>
<li>
<a href="/#/AZProviderList" v-b-tooltip.hover.right title="Provider & Vendor List">
<div> Providers & Vendors</div>
</a>
</li>
<li>
<a href="#" v-b-tooltip.hover.right title="Contracts">
<div> Contracts</div>
</a>
</li>
<li>
<a href="#" v-b-tooltip.hover.right title="Management Plan">
<div> Management Plan</div>
</a>
</li>
<li>
<a href="/#/AZDocLibrary" v-b-tooltip.hover.right title="Budget">
<div> Budget</div>
</a>
</li>
<li>
<a href="/#/AZDocLibrary" v-b-tooltip.hover.right title="Budget">
<div>Provider Operation</div>
</a>
</li>
<li>
<a href="/#/AZDocLibrary" v-b-tooltip.hover.right title="Provider List">
<div> Provider List</div>
</a>
</li>
<li>
<a href="/#/AZDocLibrary" v-b-tooltip.hover.right title="Provisions">
<div> Provisions</div><span >chevron_right</span>
</a>
<ul>
<li><a href="#">Stream 1</a></li>
<li><a href="#">Stream 2</a></li>
</ul>
</li>
<li>
<a href="/#/AZDocLibrary" v-b-tooltip.hover.right title="Budget">
<div> FFVP</div>
</a>
</li>
<li>
<a href="/#/AZDocLibrary" v-b-tooltip.hover.right title="Budget">
<div> NDL Dashboard</div>
</a>
</li>
<li>
<a href="/#/AZDocLibrary" v-b-tooltip.hover.right title="Budget">
<div> Budget</div>
</a>
</li>
<li>
<a href="/#/AZDocLibrary" v-b-tooltip.hover.right title="Budget">
<div> Budget</div>
</a>
</li>
<li>
<a href="/#/AZDocLibrary" v-b-tooltip.hover.right title="Budget">
<div> Budget</div>
</a>
</li>
<li>
<a href="/#/AZDocLibrary" v-b-tooltip.hover.right title="Budget">
<div> Budget</div>
</a>
</li>
<li>
<a href="/#/AZDocLibrary" v-b-tooltip.hover.right title="Budget">
<div> Budget</div>
</a>
</li>
<li>
<a href="/#/AZDocLibrary" v-b-tooltip.hover.right title="Budget">
<div> Budget</div>
</a>
</li>
<li>
<a href="/#/AZDocLibrary" v-b-tooltip.hover.right title="Budget">
<div> Budget</div>
</a>
</li>
<li>
<a href="/#/AZDocLibrary" v-b-tooltip.hover.right title="Budget">
<div> Budget</div>
</a>
</li>
<li>
<a href="/#/AZDocLibrary" v-b-tooltip.hover.right title="Budget">
<div> Budget</div>
</a>
</li>
<li>
<a href="/#/AZDocLibrary" v-b-tooltip.hover.right title="Budget">
<div> Budget</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- CONTENT -->
<div >
<div >
<div >
<div id="midcol-nslp" >
</div>
</div>
</div>
</div>
</div>
<div ></div>
</main>
<footer >
<div >
<div >
<div >
© 2020 Colyar Technology Solutions, LLC. All rights reserved.
</div>
<div >
<ul >
<li >
<a href="mailto:[email protected]?subject=Website Test"><i data-toggle="tooltip" data-placement="top" title="Contact Support"></i></a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="../JS/app.js"></script>
<script>
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
document.getElementById("datetime").innerHTML = formatAMPM();
function formatAMPM() {
var d = new Date(),
minutes = d.getMinutes().toString().length == 1 ? '0' d.getMinutes() : d.getMinutes(),
hours = d.getHours().toString().length == 1 ? '0' d.getHours() : d.getHours(),
ampm = d.getHours() >= 12 ? 'pm' : 'am',
months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
return days[d.getDay()] ' ' months[d.getMonth()] ' ' d.getDate() ' ' d.getFullYear() ' ' hours ':' minutes ampm;
}
</script>
</body>
</html>CodePudding user response：
Change in style left:auto !important to right:0; and add display:none.
.dropdown-menu-person {
.........
right:0;
display:none;
}
create new class .show and add style
.show {
display:block;
}
Add event click to icon to toggle the class .show.
document.querySelector(".dropdown.show > a").addEventListener("click", (e) => {
document.querySelector(".dropdown-menu-person").classList.toggle("show")
})