Sticky hover issue on mobile css dropdown menu - wordpress
- or -
Post a project like this1376
$20
- Posted:
- Proposals: 4
- Remote
- #2901086
- Awarded
Description
Experience Level: Entry
We have a CSS dropdown menu for our sort by menu.
It is working and looking fine except on mobile the hover element is staying stickied even after selecting an option.
Solution 1 (preferred): Update our CSS ruling so the sticky hover dropdown menu on mobile disappears after selecting an option.
Solution 2 (not preferred): JS code to make the sticky hover dropdown menu on mobile disappears after selecting an option.
html:
A-Z
Z-A
New Arrivals
Best Sellers
Price: High to Low
Price: Low to High
css:
.orderby
{
position:relative;
display:block;
min-height:60px;
display:flex;
align-items:center;
}
.orderby:before {
content:"sort by";
margin-left:2rem;
cursor: pointer;
}
.orderby li {
position:absolute;
display:none;
width:250px;
}
.orderby:hover li {
display:block;
z-index:9999;
border-left:1px solid #eee;
border-right:1px solid #eee;
box-sizing:content-box;
}
@media (max-width: 849px) {
.orderby li {
position:absolute;
display:none;
width:100%;
left:0;
}
.orderby {
border-left:1px solid #eee;
min-height:44px;
padding:0.75rem;
}
.orderby:before {
margin: 0 auto;
}
.orderby:hover {
border-right:1px solid #eee;
}
.orderby:hover li {
top:39px;
left:-1px;
}
.orderby li a {
padding:1px 5px 5px 5px;
}
.orderby li:nth-child(2) {
top:65px;
}
.orderby li:nth-child(3) {
top:90px;
}
.orderby li:nth-child(4) {
top:115px;
}
.orderby li:nth-child(5) {
top:140px;
}
.orderby li:nth-child(6) {
top:165px;
border-bottom:1px solid #eee;
padding-bottom:5px;
background:#fff
}
}
.orderby li a {
background:#fff;
display:block
}
@media (min-width:850px) {
.orderby:hover li {
top:60px;
}
.orderby li a {
padding:11px;
}
.orderby li {
right:-34px;
}
.orderby li:nth-child(2) {
top:90px;
}
.orderby li:nth-child(3) {
top:120px;
}
.orderby li:nth-child(4) {
top:150px;
}
.orderby li:nth-child(5) {
top:180px;
}
.orderby li:nth-child(6) {
top:210px;
border-bottom:1px solid #eee;
}
}
Fixed price of $20. Very easy for someone with reasonable CSS or JS skills.
It is working and looking fine except on mobile the hover element is staying stickied even after selecting an option.
Solution 1 (preferred): Update our CSS ruling so the sticky hover dropdown menu on mobile disappears after selecting an option.
Solution 2 (not preferred): JS code to make the sticky hover dropdown menu on mobile disappears after selecting an option.
html:
A-Z
Z-A
New Arrivals
Best Sellers
Price: High to Low
Price: Low to High
css:
.orderby
{
position:relative;
display:block;
min-height:60px;
display:flex;
align-items:center;
}
.orderby:before {
content:"sort by";
margin-left:2rem;
cursor: pointer;
}
.orderby li {
position:absolute;
display:none;
width:250px;
}
.orderby:hover li {
display:block;
z-index:9999;
border-left:1px solid #eee;
border-right:1px solid #eee;
box-sizing:content-box;
}
@media (max-width: 849px) {
.orderby li {
position:absolute;
display:none;
width:100%;
left:0;
}
.orderby {
border-left:1px solid #eee;
min-height:44px;
padding:0.75rem;
}
.orderby:before {
margin: 0 auto;
}
.orderby:hover {
border-right:1px solid #eee;
}
.orderby:hover li {
top:39px;
left:-1px;
}
.orderby li a {
padding:1px 5px 5px 5px;
}
.orderby li:nth-child(2) {
top:65px;
}
.orderby li:nth-child(3) {
top:90px;
}
.orderby li:nth-child(4) {
top:115px;
}
.orderby li:nth-child(5) {
top:140px;
}
.orderby li:nth-child(6) {
top:165px;
border-bottom:1px solid #eee;
padding-bottom:5px;
background:#fff
}
}
.orderby li a {
background:#fff;
display:block
}
@media (min-width:850px) {
.orderby:hover li {
top:60px;
}
.orderby li a {
padding:11px;
}
.orderby li {
right:-34px;
}
.orderby li:nth-child(2) {
top:90px;
}
.orderby li:nth-child(3) {
top:120px;
}
.orderby li:nth-child(4) {
top:150px;
}
.orderby li:nth-child(5) {
top:180px;
}
.orderby li:nth-child(6) {
top:210px;
border-bottom:1px solid #eee;
}
}
Fixed price of $20. Very easy for someone with reasonable CSS or JS skills.
Graham S.
100% (2)Projects Completed
2
Freelancers worked with
2
Projects awarded
33%
Last project
9 Jul 2020
Philippines
New Proposal
Login to your account and send a proposal now to get this project.
Log inClarification Board Ask a Question
-
Can you please share you website link or create a video to show what exact issue you are getting?
-
Please share your website url for review.
929531929527
We collect cookies to enable the proper functioning and security of our website, and to enhance your experience. By clicking on 'Accept All Cookies', you consent to the use of these cookies. You can change your 'Cookies Settings' at any time. For more information, please read ourCookie Policy
Cookie Settings
Accept All Cookies