Issue
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 class="loggedin">
<div class="site-wrapper">
<!-- HEADER -->
<header id="header">
<nav class="navbar navbar-expand-lg mb-2">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#sidebar-wrapper" aria-controls="sidebar-wrapper" aria-expanded="false" aria-label="Toggle navigation">
<span class="material-icons">menu
</span>
</button>
<a href='/' class="navbar-brand">
<img id="headerLogo" src="../images/AZ-DOE.svg" class="header-logo" alt="State Logo" />
</a>
<div class="vl"></div>
<div class="nav-container">
<ul class="nav-items">
<!-- Navigation -->
<!-- Dropdown menu -->
<li class="nav-item-select nav-item-dropdown">
<a class="dropdown-trigger" href="#">Select SFA</a>
<ul class="dropdown-menu">
<li class="dropdown-menu-item">
<a href="#">Dropdown Item 1</a>
</li>
<li class="dropdown-menu-item">
<a href="#">Dropdown Item 2</a>
</li>
<li class="dropdown-menu-item">
<a href="#">Dropdown Item 3</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="vl"></div>
<div class="nav-container">
<ul class="nav-items">
<!-- Navigation -->
<!-- Dropdown menu -->
<li class="nav-item-select nav-item-dropdown">
<a class="dropdown-trigger" href="#">Select Program Year</a>
<ul class="dropdown-menu">
<li class="dropdown-menu-item">
<a href="#">Dropdown Item 1</a>
</li>
<li class="dropdown-menu-item">
<a href="#">Dropdown Item 2</a>
</li>
<li class="dropdown-menu-item">
<a href="#">Dropdown Item 3</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="navbar-collapse collapse" id="Div1">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a href="#" class="nav-link" title="Settings"><i class="fas fa-search"></i></a>
</li>
</ul>
</div>
<div class="dropdown show">
<a class="nav-link" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="material-icons-person">
person
</span>
</a>
<div class="dropdown-menu-person" aria-labelledby="dropdownMenuLink">
<h4 class="header-person">Profile</h4>
<div class="person-email" disabled="true">user@user.com</div>
<a class="dropdown-item" href="#">Logout</a>
</div>
</div>
</nav>
</header>
<!-- SPONSOR INFO SECTION -->
<main role="main" id="main">
<div id="wrapper">
<!-- SIDEBAR -->
<div id="sidebar-wrapper" class="sb-wrapper collapse">
<!-- <a href="#menu-toggle" class="sidebtn-holder" id="menu-toggle">
<i class="fas fa-chevron-circle-left"></i>
</a>-->
<div class="list-wrapper">
<div class="nav-wrapper">
<ul class="sidebar-nav">
<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 class="material-icons">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 class="container-fluid">
<div class="row">
<div class="col">
<div id="midcol-nslp" class="p-3">
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</main>
<footer class="mt-auto fixed-bottom">
<div class="container-fluid py-2">
<div class="row">
<div class="col text-center small">
© 2020 Colyar Technology Solutions, LLC. All rights reserved.
</div>
<div class="text-sm-center text-md-right d-flex justify-content-end align-items-center">
<ul class="nav">
<li class="nav-item">
<a href="mailto:info@colyar.com?subject=Website Test"><i class="fas fa-envelope-open-text" 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>Solution
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")
})
Answered By - Lukas Answer Checked By - Clifford M. (PHPFixing Volunteer)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.