I am working on the following piece of code displaying the progress:
ol.progress[data-steps="2"] li {
width: 49%;
}
ol.progress[data-steps="3"] li {
width: 33%;
}
ol.progress[data-steps="4"] li {
width: 24%;
}
ol.progress[data-steps="5"] li {
width: 19%;
}
ol.progress[data-steps="6"] li {
width: 16%;
}
ol.progress[data-steps="7"] li {
width: 14%;
}
ol.progress[data-steps="8"] li {
width: 12%;
}
ol.progress[data-steps="9"] li {
width: 11%;
}
.progress {
width: 100%;
list-style: none;
list-style-image: none;
margin: 20px 0 20px 0;
padding: 0;
}
.progress li {
float: left;
text-align: center;
position: relative;
font-family: sans-serif;
}
.progress .name,
.progress .description {
display: block;
vertical-align: bottom;
text-align: center;
color: black;
opacity: 0.3;
}
.progress .name {
font-size: 1.5em;
margin-top: 1em;
margin-bottom: 0.5em;
}
.progress .step {
border: 3px solid #b6b6b6;
background-color: #b6b6b6;
border-radius: 50%;
line-height: 1.2;
width: 1.2em;
height: 1.2em;
display: inline-block;
z-index: 0;
}
.progress .step:before {
content: "";
display: block;
background-color: #b6b6b6;
border: 3px transparent;
height: 0.2em;
width: 100%;
position: absolute;
top: 0.6em;
left: -50%;
z-index: -2;
}
.progress .step:after {
content: "";
display: block;
background-color: #1876d5;
border: 3px transparent;
height: 0.35em;
width: 0;
position: absolute;
top: 0.55em;
left: 50%;
z-index: -1;
}
.progress li:first-of-type .step:before {
display: none;
}
.progress li:last-of-type .step:after {
display: none;
}
.progress .done .step {
background-color: #1876d5;
border: 3px solid #1876d5;
}
.progress .done .step:after {
width: 100%;
transition: width 2s ease;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<ol class="progress" id="test" data-steps="4">
<li class="done">
<span class="step"></span>
<span class="name">Step 1</span>
<span class="description">Foo</span>
</li>
<li class="done">
<span class="step"></span>
<span class="name">Step 2</span>
<span class="description">Bar</span>
</li>
<li class="">
<span class="step"></span>
<span class="name">Step 3</span>
<span class="description">Baz</span>
</li>
<li class="">
<span class="step"></span>
<span class="name">Step 4</span>
<span class="description">Abc</span>
</li>
</ol>
</body>
</html>
I got this output with the above code. Using CSS, I was trying the exclude the blue color between 2nd and 3rd step so that it remains grey color(similar to the one between step 3 and step 4). I tried below which is not working:
.progress .step:last-of-type .step:before {
display: none;
}
Is there any similar type of CSS that can be used to achieve this functionality. Thanks.
If I understood your answer this will solve your issue just use nth-child selector to exclude the blue color between 2nd and 3rd step.
The following is an example
ol.progress[data-steps="2"] li {
width: 49%;
}
ol.progress[data-steps="3"] li {
width: 33%;
}
ol.progress[data-steps="4"] li {
width: 24%;
}
ol.progress[data-steps="5"] li {
width: 19%;
}
ol.progress[data-steps="6"] li {
width: 16%;
}
ol.progress[data-steps="7"] li {
width: 14%;
}
ol.progress[data-steps="8"] li {
width: 12%;
}
ol.progress[data-steps="9"] li {
width: 11%;
}
.progress {
width: 100%;
list-style: none;
list-style-image: none;
margin: 20px 0 20px 0;
padding: 0;
}
.progress li {
float: left;
text-align: center;
position: relative;
font-family: sans-serif;
}
.progress .name,
.progress .description {
display: block;
vertical-align: bottom;
text-align: center;
color: black;
opacity: 0.3;
}
.progress .name {
font-size: 1.5em;
margin-top: 1em;
margin-bottom: 0.5em;
}
.progress .step {
border: 3px solid #b6b6b6;
background-color: #b6b6b6;
border-radius: 50%;
line-height: 1.2;
width: 1.2em;
height: 1.2em;
display: inline-block;
z-index: 0;
}
.progress .step:before {
content: "";
display: block;
background-color: #b6b6b6;
border: 3px transparent;
height: 0.2em;
width: 100%;
position: absolute;
top: 0.6em;
left: -50%;
z-index: -2;
}
.progress .step:after {
content: "";
display: block;
background-color: #1876d5;
border: 3px transparent;
height: 0.35em;
width: 0;
position: absolute;
top: 0.55em;
left: 50%;
z-index: -1;
}
.progress li:first-of-type .step:before {
display: none;
}
/*=========== added =====================*/
.progress li:nth-child(2) .step:before {
display: none;
}
.progress li:nth-child(2) .step:after {
display: none;
}
/*=========== added =====================*/
.progress li:last-of-type .step:after {
display: none;
}
.progress .done .step {
background-color: #1876d5;
border: 3px solid #1876d5;
}
.progress .done .step:after {
width: 100%;
transition: width 2s ease;
}
<ol class="progress" id="test" data-steps="4">
<li class="done">
<span class="step"></span>
<span class="name">Step 1</span>
<span class="description">Foo</span>
</li>
<li class="done">
<span class="step"></span>
<span class="name">Step 2</span>
<span class="description">Bar</span>
</li>
<li class="">
<span class="step"></span>
<span class="name">Step 3</span>
<span class="description">Baz</span>
</li>
<li class="">
<span class="step"></span>
<span class="name">Step 4</span>
<span class="description">Abc</span>
</li>
</ol>
And if you want some dynamic where you will use .done class name to control the steps without getting stuck with nth-child selector.
The following is an example where there is none of li elements have .done class name
ol.progress[data-steps="2"] li {
width: 49%;
}
ol.progress[data-steps="3"] li {
width: 33%;
}
ol.progress[data-steps="4"] li {
width: 24%;
}
ol.progress[data-steps="5"] li {
width: 19%;
}
ol.progress[data-steps="6"] li {
width: 16%;
}
ol.progress[data-steps="7"] li {
width: 14%;
}
ol.progress[data-steps="8"] li {
width: 12%;
}
ol.progress[data-steps="9"] li {
width: 11%;
}
.progress {
width: 100%;
list-style: none;
list-style-image: none;
margin: 20px 0 20px 0;
padding: 0;
}
.progress li {
float: left;
text-align: center;
position: relative;
font-family: sans-serif;
}
.progress .name,
.progress .description {
display: block;
vertical-align: bottom;
text-align: center;
color: black;
opacity: 0.3;
}
.progress .name {
font-size: 1.5em;
margin-top: 1em;
margin-bottom: 0.5em;
}
.progress .step {
border: 3px solid #b6b6b6;
background-color: #b6b6b6;
border-radius: 50%;
line-height: 1.2;
width: 1.2em;
height: 1.2em;
display: inline-block;
z-index: 0;
}
.progress .step:before {
content: "";
display: block;
background-color: #b6b6b6;
border: 3px transparent;
height: 0.2em;
width: 100%;
position: absolute;
top: 0.6em;
left: -50%;
z-index: -2;
}
.progress .done .step:after {
content: "";
display: block;
background-color: #1876d5;
border: 3px transparent;
height: 0.35em;
width: 0;
position: absolute;
top: 0.55em;
left: 50%;
z-index: -1;
}
.progress li:first-of-type .step:before,
.progress li:last-of-type .step:after {
display: none;
}
.progress .done .step {
background-color: #1876d5;
border: 3px solid #1876d5;
}
.progress .done .step:after {
width: 100%;
transition: width 2s ease;
}
<ol class="progress" id="test" data-steps="4">
<li class="">
<span class="step"></span>
<span class="name">Step 1</span>
<span class="description">Foo</span>
</li>
<li class="">
<span class="step"></span>
<span class="name">Step 2</span>
<span class="description">Bar</span>
</li>
<li class="">
<span class="step"></span>
<span class="name">Step 3</span>
<span class="description">Baz</span>
</li>
<li class="">
<span class="step"></span>
<span class="name">Step 4</span>
<span class="description">Abc</span>
</li>
</ol>
The following is an example where there first and third li have .done class name
ol.progress[data-steps="2"] li {
width: 49%;
}
ol.progress[data-steps="3"] li {
width: 33%;
}
ol.progress[data-steps="4"] li {
width: 24%;
}
ol.progress[data-steps="5"] li {
width: 19%;
}
ol.progress[data-steps="6"] li {
width: 16%;
}
ol.progress[data-steps="7"] li {
width: 14%;
}
ol.progress[data-steps="8"] li {
width: 12%;
}
ol.progress[data-steps="9"] li {
width: 11%;
}
.progress {
width: 100%;
list-style: none;
list-style-image: none;
margin: 20px 0 20px 0;
padding: 0;
}
.progress li {
float: left;
text-align: center;
position: relative;
font-family: sans-serif;
}
.progress .name,
.progress .description {
display: block;
vertical-align: bottom;
text-align: center;
color: black;
opacity: 0.3;
}
.progress .name {
font-size: 1.5em;
margin-top: 1em;
margin-bottom: 0.5em;
}
.progress .step {
border: 3px solid #b6b6b6;
background-color: #b6b6b6;
border-radius: 50%;
line-height: 1.2;
width: 1.2em;
height: 1.2em;
display: inline-block;
z-index: 0;
}
.progress .step:before {
content: "";
display: block;
background-color: #b6b6b6;
border: 3px transparent;
height: 0.2em;
width: 100%;
position: absolute;
top: 0.6em;
left: -50%;
z-index: -2;
}
.progress .done .step:after {
content: "";
display: block;
background-color: #1876d5;
border: 3px transparent;
height: 0.35em;
width: 0;
position: absolute;
top: 0.55em;
left: 50%;
z-index: -1;
}
.progress li:first-of-type .step:before,
.progress li:last-of-type .step:after {
display: none;
}
.progress .done .step {
background-color: #1876d5;
border: 3px solid #1876d5;
}
.progress .done .step:after {
width: 100%;
transition: width 2s ease;
}
<ol class="progress" id="test" data-steps="4">
<li class="done">
<span class="step"></span>
<span class="name">Step 1</span>
<span class="description">Foo</span>
</li>
<li class="">
<span class="step"></span>
<span class="name">Step 2</span>
<span class="description">Bar</span>
</li>
<li class="done">
<span class="step"></span>
<span class="name">Step 3</span>
<span class="description">Baz</span>
</li>
<li class="">
<span class="step"></span>
<span class="name">Step 4</span>
<span class="description">Abc</span>
</li>
</ol>
Related
i am trying to create a CSS Animation for a vertical line going upwards - the line should be within a specific div
I have used gsap - i have used as well ypercent field, however the line starts from below the FirstScene div while i need it to be contained within the FirstScene div
gsap.fromTo(".vertical-line",{ yPercent:10 }, {yPercent:0,duration: 5});
* {
margin: 0;
padding: 0
}
.topnav {
position: sticky;
top: 0;
font-size: x-large;
background-color: black;
position: -webkit-sticky;
overflow: hidden;
z-index: 1;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
}
li {
float: right;
padding: 8px;
color: white;
display: inline;
}
linkStyle {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li i {
color: white;
text-decoration: none;
}
li a {
color: white;
text-decoration: none;
}
#li-left {
float: left;
}
body {
margin: 0px;
height: 100%;
}
.FirstScene {
background-color: black;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
.line {
left: 50%;
top: 50%;
width=10px;
height: 50%;
position: absolute;
}
.vertical-line {
border-left: 6px solid blue;
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
<div class="topnav">
<ul>
<li id="li-left">
<Link to="/" class="linkStyle"> MINA IBRAHIM
</Link>
</li>
<li>
<a href="https://github.com/ibrahimmina">
<i class="fa-brands fa-github"></i>
</a>
</li>
<li>
<a href="https://www.linkedin.com/in/minasamyibrahim/">
<i class="fa-brands fa-linkedin"></i>
</a>
</li>
<li>
.email()
</li>
<li>
<Link to="/about" class="linkStyle"> .about()
</Link>
</li>
</ul>
</div>
<body>
<section class="FirstScene">
<div class="line">
<div class="vertical-line">
</div>
</div>
</section>
</body>
Please use the bellow css for the Vertical Line Going Upwards animations
.FirstScene{
background-color: black;
position:absolute;
top:0px;
right:0px;
bottom:0px;
left:0px;
}
.vertical-line{
border-left: 6px solid blue;
animation-name: line;
animation-duration: 5s;
animation-iteration-count: 1;
left: 0;
height: 50%;
width: 10px;
position: absolute;
bottom: 0;
right: 0;
margin: 0 auto;
}
#keyframes line{
0%{
height: 0px;
}
100%{
height: 50%;
}
}
I have styling problem where my avatar image height will affect other inline items next to it. The image below is to illustrate the problem.
So if you see when I make my avatar logo taller it'll bring down the navigation links.
I want my avatar image not to affect the links next to it.
Here's my css and html:
.terms-link {
display: inline-flex;
align-items: center;
margin-right: -9px;
}
.user {
width: 153px;
}
.terms {
width: 103px;
}
.dropdown {
position: absolute;
right: 0;
padding: 30px 50px 30px 0;
background-color: #336F9C;
margin-top: 17px;
z-index: 10;
}
.right-side {
display: flex;
align-items: center;
}
.sign-up {
display: inline;
color: white;
margin-left: 1rem;
margin-right: 1rem;
}
.sign-up a {
padding: 5px;
}
nav a.is-active {
border-bottom: 3px solid #00aedb;
}
nav a.is-active.transparent {
border-bottom: 0;
color: #00aedb !important;
}
nav {
margin-bottom: 0;
}
nav a {
padding: 0 1.5rem 17px 1.5rem;
position: relative;
color: white;
text-decoration: none;
font-size: medium;
}
.explore-beta span {
font-size: x-small;
font-style: italic;
}
.spacer {
display: inline;
font-size: medium;
padding: 0 1rem 17px 1rem;
color: white;
}
.avatar-frame{border: 1.5px solid #c7b89e;}
.avatar-frame,.avatar-frame img{
width:30px;
height: 30px;
-webkit-border-radius: 50%; /* Saf3+, Chrome */
border-radius: 50%; /* Opera 10.5, IE 9 */
/*-moz-border-radius: 50%; Disabled for FF1+ */
}
<div class="right-side">
<nav>
<a routerLink="/initiatives" routerLinkActive="is-active">Initiatives</a>
<a routerLink="/search" routerLinkActive="is-active">Summary</a>
<a routerLink="/clinical" routerLinkActive="is-active">Clinical Filtering</a>
<a routerLink="/explore" routerLinkActive="is-active">Explore</a>
<a routerLink="/beacon" routerLinkActive="is-active">Beacon</a>
<a routerLink="/about" routerLinkActive="is-active">About</a>
<a *ngIf="!auth.authenticated()" class="sign-up">
<a (click)="auth.login()">Log in</a>
<div class="spacer">|</div>
<a (click)="openSignUpDialog()">Sign up</a>
</a>
<a *ngIf="auth.authenticated()" [ngClass]="{'is-active': termsLinkActive}" (click)="toggleUser($event)" class="avatar-link">
<span class="terms-link">
<div class="avatar-frame">
<img [src]="userPicture" />
</div>
</span>
<div *ngIf="userDropdown" [ngClass]="['user', 'dropdown']" (click)="auth.logout()">
<a>Log out</a>
</div>
</a>
</nav>
</div>
You can use position:absolute on your avatar-link class to remove it out of the default document flow and set its parent i.e. nav to position:relative;
This will ensure avatars dimensions do not effect its siblings.
div{
border: 1px solid black;
}
nav {
position: relative;
}
.avatar-link {
position: absolute;
border: 1px solid red;
right: 20px;
top: 50%;
transform: translateY(-50%);
}
.terms-link {
display: inline-flex;
align-items: center;
margin-right: -9px;
}
.user {
width: 153px;
}
.terms {
width: 103px;
}
.dropdown {
position: absolute;
right: 0;
padding: 30px 50px 30px 0;
background-color: #336F9C;
margin-top: 17px;
z-index: 10;
}
.right-side {
display: flex;
align-items: center;
}
.sign-up {
display: inline;
color: white;
margin-left: 1rem;
margin-right: 1rem;
}
.sign-up a {
padding: 5px;
}
nav a.is-active {
border-bottom: 3px solid #00aedb;
}
nav a.is-active.transparent {
border-bottom: 0;
color: #00aedb !important;
}
nav {
margin-bottom: 0;
}
nav a {
padding: 0 1.5rem 17px 1.5rem;
position: relative;
color: white;
text-decoration: none;
font-size: medium;
}
.explore-beta span {
font-size: x-small;
font-style: italic;
}
.spacer {
display: inline;
font-size: medium;
padding: 0 1rem 17px 1rem;
color: white;
}
.avatar-frame {
border: 1.5px solid #c7b89e;
}
.avatar-frame,
.avatar-frame img {
width: 30px;
height: 30px;
-webkit-border-radius: 50%;
/* Saf3+, Chrome */
border-radius: 50%;
/* Opera 10.5, IE 9 */
/*-moz-border-radius: 50%; Disabled for FF1+ */
}
<div class="right-side">
<nav>
<a routerLink="/initiatives" routerLinkActive="is-active">Initiatives</a>
<a routerLink="/search" routerLinkActive="is-active">Summary</a>
<a routerLink="/clinical" routerLinkActive="is-active">Clinical Filtering</a>
<a routerLink="/explore" routerLinkActive="is-active">Explore</a>
<a routerLink="/beacon" routerLinkActive="is-active">Beacon</a>
<a routerLink="/about" routerLinkActive="is-active">About</a>
<a *ngIf="!auth.authenticated()" class="sign-up">
<a (click)="auth.login()">Log in</a>
<div class="spacer">|</div>
<a (click)="openSignUpDialog()">Sign up</a>
</a>
<a *ngIf="auth.authenticated()" [ngClass]="{'is-active': termsLinkActive}" (click)="toggleUser($event)" class="avatar-link">
<span class="terms-link">
<div class="avatar-frame">
<img [src]="userPicture" />
</div>
</span>
<div *ngIf="userDropdown" [ngClass]="['user', 'dropdown']" (click)="auth.logout()">
<a>Log out</a>
</div>
</a>
</nav>
</div>
I'm just trying to connect some dots with an ordered list but I cannot make it work. I want to turn on a segment according to the active class and additionally I want to add the name of the student between the segment like this picture
Then I can switch to turn on the other segment with the class active.
This is what I've been trying to do.
jsfiddle
UPDATE
I updated my fiddle because I forgot to add the class active to the li element
UPDATE
I updated again my fiddle to show where I should go the name of the person.
ol.timetable li {
min-width: 25%;
}
.timetable {
width: 100%;
list-style: none;
list-style-image: none;
margin: 20px 0 20px 0;
padding: 0;
}
.timetable li {
float: left;
text-align: center;
position: relative;
}
.timetable .date {
display: block;
vertical-align: bottom;
text-align: center;
margin-bottom: 1em;
color: #2B2B2B;
}
.timetable .dot {
color: black;
border: 3px solid #B2B2B2;
background-color: #B2B2B2;
border-radius: 50%;
line-height: 1.2;
width: 1.2em;
height: 1.2em;
display: inline-block;
z-index: 2;
}
.timetable .active .date,
.timetable .active .dot span {
color: black;
}
.timetable .dot:before {
content: "";
display: block;
background-color: #B2B2B2;
height: 0.4em;
width: 50%;
position: absolute;
bottom: 0.9em;
left: 0;
z-index: 1;
}
.timetable .dot:after {
content: "";
display: block;
background-color: #B2B2B2;
height: 0.4em;
width: 50%;
position: absolute;
bottom: 0.9em;
right: 0;
z-index: 1;
}
.timetable li:first-child .dot:before {
display: none;
}
.timetable li:first-child .dot:after .active {
border: 3px solid #F26227 !important;
background-color: #F26227 !important;
}
.timetable li:last-of-type .dot:after {
display: none;
}
.timetable .active .dot {
border: 3px solid #F26227;
background-color: #F26227;
}
.timetable .active .dot:before,
.timetable .active .dot:before {
background-color: #F26227;
}
<ol class='timetable'>
<li class="active">
<span class='date'>5/26/2017</span>
<span class='active dot'>
<span>
</span>
</span>
</li>
<li class="active">
<span class='date'>5/29/2017</span>
<span class='active dot'>
<span></span>
</span>
</li>
<li>
<span class='date'>6/5/2017</span>
<span class='dot'>
<span></span>
</span>
</li>
</ol>
To simplify how much CSS you need to write, I'd suggest making each line segment composed of just one long :before pseudo-element, rather than a combination of a :before and :after. This also makes it simpler to fill in the preceding line segment when the associated item is active.
For placement of the label, I'm going to assume you'll be adding/removing the <span> containing it dynamically, so it'll be up to you to determine where it should be best placed. To position and center it accordingly, I suggest absolute positioning and a small transformation to center the text.
Putting this all together, you get:
ol.timetable li {
min-width: 25%;
}
.timetable {
width: 100%;
list-style: none;
list-style-image: none;
margin: 20px 0 20px 0;
padding: 0;
}
.timetable li {
float: left;
text-align: center;
position: relative;
}
.timetable .date {
display: block;
vertical-align: bottom;
text-align: center;
margin-bottom: 1em;
color: #2B2B2B;
}
.timetable .dot {
color: black;
border: 3px solid #B2B2B2;
background-color: #B2B2B2;
border-radius: 50%;
line-height: 1.2;
width: 1.2em;
height: 1.2em;
display: inline-block;
z-index: 2;
}
.timetable .active .date,
.timetable .active .dot span {
color: black;
}
.timetable .dot:before {
content: "";
display: block;
background-color: #B2B2B2;
height: 0.4em;
width: 100%;
position: absolute;
bottom: 0.9em;
left: -50%;
z-index: 1;
}
.timetable li:first-child .dot:before {
display: none;
}
.timetable .active .dot {
border: 3px solid #F26227;
background-color: #F26227;
}
.timetable .active + .active .dot:before {
background-color: #F26227;
}
.timetable li > span:nth-child(3){
position:absolute;
right:0;
bottom:-15px;
transform: translateX(50%);
}
<ol class='timetable'>
<li class="active">
<span class='date'>5/26/2017</span>
<span class='active dot'>
<span>
</span>
</span>
<span>John Doe</span>
</li>
<li class="active">
<span class='date'>5/29/2017</span>
<span class='active dot'>
<span></span>
</span>
</li>
<li>
<span class='date'>6/5/2017</span>
<span class='dot'>
<span></span>
</span>
</li>
</ol>
Note that if the label element isn't guaranteed to be in the same place within the item, I'd suggest adding a class to it to make it easier to target with CSS. Also, if you'd like to hide any unfilled lines behind the active dots, just set the z-index on .timetable .dot:before to a negative value.
Also note the usage of the sibling selector in .timetable .active + .active .dot:before. This ensures that only the line between two active dots will be highlighted, rather than every line associated with an active item.
Hope this helps! Let me know if you have any questions.
I'm having a weird issue with my Shopify dropdown menu.
On mobile sites or when i shrink a window the linklists for women and men overlay each other. please see picture, any clue on how to fix this?
My store is triplepeace.myshopify.com pss:muitwe
.mobile-mega-nav {
display: none;
#include breakpoint(m) {
display: block;
}
}
.navigation.mobile {
position: absolute;
top: 0;
bottom: 0;
background: #043342 none repeat scroll 0% 0%;
z-index: 3000;
max-width: 450px;
width: 100%;
overflow: hidden;
#include transform(translateX(-450px));
#include transition(all 0.2s $ease-out-quad);
#include breakpoint(xs) {
#include transform(translateX(-300px));
max-width: 300px;
}
&.visible {
#include breakpoint(m) {
#include transform(translateX(0px));
}
}
.branding {
position: relative;
font-size: 0;
img { height: auto; }
}
.mobile-nav-logo {
display: inline-block;
max-width: 200px;
}
.sticky-logo { display: none; }
.logo-regular {
display: block;
}
.has-retina {
#include retina {
.logo-regular {
display: none;
}
.logo-retina {
display: block;
}
}
}
ul {
position: relative;
padding: 0 25px;
#include transition(all 0.2s $ease-out-quad);
&.out-of-view {
#include transform(translateX(-100%));
}
}
ul ul {
position: absolute;
top: 0;
left: 100%;
width: 100%;
&.in-view {
display: block;
}
}
.enter-linklist {
#extend %icon;
display: inline-block;
float: right;
margin-top: -4px;
border: 1px solid #fff;
border-radius: 0;
padding: 10px 12px;
color: #fff;
}
.back {
position: relative;
display: none;
padding: 28px 20px;
border-bottom: 1px solid $border-color;
cursor: pointer;
font-family: $navigation-font;
font-weight: $navigation-weight;
color: #fff;
text-transform: uppercase;
{% if settings.navigation-font-small-caps %}
#extend %small-caps;
{% endif %}
#include breakpoint(m) {
display: block;
}
.icon {
#extend %icon;
position: absolute;
top: 50%;
left: 0;
padding: 0;
border: 0;
#include transform(translateY(-50%));
}
}
.first a {
// border-top: 1px solid $border-color;
}
a {
display: block;
padding: 28px 20px;
#include breakpoint(m){ text-transform:uppercase; }
#include breakpoint(s){ text-transform:uppercase; }
#include breakpoint(xs){ text-transform:uppercase; }
}
.cart-count {
display: none;
}
.mobile-link {
display: block;
text-transform:uppercase;
}
.navigation-toggle { padding-top: 0; }
.search-form {
position: relative;
padding: 20px;
margin: 0;
input[type="submit"] {
right: 20px;
}
}
.search-input {
max-width: 100%;
width: 100%;
}
}
<!-- Menu links -->
<li class="has-mega-nav first" data-mega-nav="true">
<a data-linklist-trigger="shop" href="/collections/all">Shop <span class="enter-linklist"></span></a>
<ul class="mobile-mega-nav" data-linklist="shop">
<li>
<span class="back"><span class="icon"></span> Back to previous</span>
</li>
<li class="has-dropdown">
<a data-linklist-trigger="apparel" href="">MEN<span class="enter-linklist"></span></a>
<ul data-linklist="apparel">
<li>
<span class="back"><span class="icon"></span> Back to previous</span>
</li>
<li>Shirts</li>
<li>Color changing tees</li>
<li>Hoodies</li>
<!-- <li>Shop Our Instagram</li> -->
<li>Shop By Design</li>
<!--<li data-image-src="" data-image-alt="">New Arrivals</li>-->
<li>Shop All</li>
</ul>
</li>
<li class="has-dropdown">
<a data-linklist-trigger="apparel" href="">WOMEN<span class="enter-linklist"></span></a>
<ul data-linklist="apparel">
<li>
<span class="back"><span class="icon"></span> Back to previous</span>
</li>
<li>boyfriend Tee</li>
<li>V-neck</li>
<li>Scoop neck</li>
<!-- <li>Shop Our Instagram</li> -->
<li>Tank tops</li>
<li>Hoodies</li>
<!--<li data-image-src="" data-image-alt="">New Arrivals</li>-->
<li>Shop All</li>
</ul>
</li>
Try adding this in your CSS styles
.in-view .active {
background: rgb(4, 51, 66);
}
I have a Horizontal Menu. When the mouse is hovered over the child elements it disappears. The child elements cannot be clicked. I would like the child elements to stay when the mouse is hovered over it.
.header {
color: #FFFFFF;
height: 60px;
width: 100%;
margin: auto;
}
.header_logo {
width: 40%;
height: 100%;
float: left;
}
#logo {
height: 100%;
top: 0;
left: 0;
width: 50%;
}
.header_title {
width: 60%;
float: left;
}
#titles {
position: absolute;
top: 20px;
font-family: "Times New Roman", Times, serif, Georgia;
font-size: 97%;
color: #B8B8B8;
}
ul {
list-style-type: none;
}
li {
display: inline-block;
}
a {
text-decoration: none;
color: inherit;
padding: 21px 10px;
}
li a:hover {
background-color: #666699;
}
ul li ul {
display: none;
}
ul li:hover ul {
display: block;
position: absolute;
width: 100%;
top: 70px;
left: 0;
white-space: nowrap;
}
* {
border: 0;
margin: 0;
padding: 0;
}
.content {
height: 800px;
margin: auto;
background-color: #C0C0C0;
}
.footer {
margin: auto;
background-color: #000000;
}
<div class="header">
<div class="header_logo">
<img id="logo" src="civic-logo.jpg">
</div>
<div class="header_title">
<div id="titles">
<ul>
<li>PRODUCTS
<ul>
<li>CEMENT</li>
<li>STEEL</li>
<li>BRICKS</li>
<li>SAND</li>
</ul>
</li>
<li>CONTACT US </li>
</ul>
</div>
</div>
</div>
<div class="content">
</div>
<div class="footer">
</div>
It's because you have positioned your submenu absolutely, and it's too far away from your parent li, so your mouse is leaving the parent menu before it reaches the submenu. I've added borders to show you.
.header {
color: #FFFFFF;
height: 60px;
width: 100%;
margin: auto;
}
.header_logo {
width: 40%;
height: 100%;
float: left;
}
#logo {
height: 100%;
top: 0;
left: 0;
width: 50%;
}
.header_title {
width: 60%;
float: left;
}
#titles {
position: absolute;
top: 20px;
font-family: "Times New Roman", Times, serif, Georgia;
font-size: 97%;
color: #B8B8B8;
}
ul {
list-style-type: none;
}
li {
display: inline-block;
border: 1px solid blue;
}
a {
text-decoration: none;
color: inherit;
padding: 21px 10px;
}
li a:hover {
background-color: #666699;
}
ul li ul {
display: none;
}
ul li:hover ul {
display: block;
position: absolute;
width: 100%;
top: 70px;
left: 0;
white-space: nowrap;
}
* {
border: 0;
margin: 0;
padding: 0;
}
.content {
height: 800px;
margin: auto;
background-color: #C0C0C0;
}
.footer {
margin: auto;
background-color: #000000;
}
<div class="header">
<div class="header_logo">
<img id="logo" src="civic-logo.jpg">
</div>
<div class="header_title">
<div id="titles">
<ul>
<li>PRODUCTS
<ul>
<li>CEMENT</li>
<li>STEEL</li>
<li>BRICKS</li>
<li>SAND</li>
</ul>
</li>
<li>CONTACT US </li>
</ul>
</div>
</div>
</div>
<div class="content">
</div>
<div class="footer">
</div>
You have padding, but it's on your a element, and needs to be on your li element, instead. Either add padding-top to your submenu li elements or adjust their top position so that they're directly underneath (aka "touching") the parent element.
Here is the code with the menu moved to top: 40px and the padding added to the submenu li elements:
.header {
color: #FFFFFF;
height: 60px;
width: 100%;
margin: auto;
}
.header_logo {
width: 40%;
height: 100%;
float: left;
}
#logo {
height: 100%;
top: 0;
left: 0;
width: 50%;
}
.header_title {
width: 60%;
float: left;
}
#titles {
position: absolute;
top: 20px;
font-family: "Times New Roman", Times, serif, Georgia;
font-size: 97%;
color: #B8B8B8;
}
ul {
list-style-type: none;
}
li {
display: inline-block;
}
a {
text-decoration: none;
color: inherit;
padding: 21px 10px;
}
li ul li {
padding: 21px 10px;
}
li a:hover {
background-color: #666699;
}
ul li ul {
display: none;
}
ul li:hover ul {
display: block;
position: absolute;
width: 100%;
top: 40px;
left: 0;
white-space: nowrap;
}
* {
border: 0;
margin: 0;
padding: 0;
}
.content {
height: 800px;
margin: auto;
background-color: #C0C0C0;
}
.footer {
margin: auto;
background-color: #000000;
}
<div class="header">
<div class="header_logo">
<img id="logo" src="civic-logo.jpg">
</div>
<div class="header_title">
<div id="titles">
<ul>
<li>PRODUCTS
<ul>
<li>CEMENT</li>
<li>STEEL</li>
<li>BRICKS</li>
<li>SAND</li>
</ul>
</li>
<li>CONTACT US </li>
</ul>
</div>
</div>
</div>
<div class="content">
</div>
<div class="footer">
</div>