Related
Previously I had .container-fluid.megamenusip {overflow-y: scroll} which worked until it didn't (it broke the menu open/close button).
In a mobile view how do I scroll through each mega menu?
If I add back .container-fluid.megamenusip {overflow-y: scroll} it doesn't resolve the issue.
The live site is here.
Help appreciated.
window.addEventListener('load', () => {
document.querySelector(':root').style
.setProperty('--vh', window.innerHeight/100 + 'px');
})
window.addEventListener('resize', () => {
document.querySelector(':root').style
.setProperty('--vh', window.innerHeight/100 + 'px');
})
jQuery(document).ready(function() {
jQuery(".mega-drop-down").hover(function() {
if (window.innerWidth > 768) {
showMenu(this);
}
});
jQuery(".mega-drop-down").click(function() {
if (window.innerWidth > 768) {
showMenu(this);
}
});
jQuery(".mega-drop-down").on("click", function() {
if (window.innerWidth <= 768) {
showMenu(this);
this.scrollIntoView(); //{block:nearest}
}
});
jQuery(".toggle-menu").click(function() {
jQuery("#mm-mm-burger").toggleClass("display");
jQuery("#megamenusip").toggleClass("display");
jQuery("#mm-logo").toggleClass("fixed");
jQuery(".exo-menu").toggleClass("display");
jQuery("#mm-button-group").toggle();
jQuery(".mega-menu").addClass("hide-block");
});
});
function showMenu(self) {
jQuery(".mega-menu")
.not(jQuery(self).children(".mega-menu").toggleClass("hide-block"))
.addClass("hide-block");
jQuery(self).find("a span").toggleClass("hover");
jQuery(".exo-menu")
.find("a span")
.not(jQuery(self).find("a span"))
.removeClass("hover");
}
.fl-builder-content[data-type="header"].fl-theme-builder-header-sticky {
z-index: 1000;
}
ul.exo-menu {
list-style: none;
margin: 0;
padding: 0;
}
ul.cabeza,
ul.manos,
ul.corporal {
list-style-type: none;
padding: 0;
}
.content {
margin: 50px 100px 0px 100px;
}
.mega-menu-wrap .row {
margin-right: 0;
margin-left: 0;
padding-left: 0;
padding-right: 0;
}
.exo-menu {
float: none;
margin: auto;
list-style: none;
position: relative;
}
.exo-menu>li {
display: inline-block;
float: left;
position: relative;
}
.exo-menu>li>a {
color: black;
font-size: 15px;
font-weight: 600;
text-decoration: none;
}
.exo-menu>li>a:hover {
color: #23ADF8;
}
.exo-menu i {
float: left;
font-size: 18px;
margin-right: 6px;
line-height: 20px !important;
}
li.drop-down,
.flyout-right,
.flyout-left {
position: relative;
}
li.drop-down:before {
content: "f103";
color: #fff;
font-family: FontAwesome;
font-style: normal;
display: inline;
position: absolute;
right: 6px;
top: 20px;
font-size: 14px;
}
li.drop-down>ul {
left: 0px;
min-width: 230px;
}
.drop-down-ul {
display: none;
}
.flyout-right>ul,
.flyout-left>ul {
top: 0;
min-width: 230px;
display: none;
border-left: 1px solid #365670;
}
.flyout-mega-wrap {
top: 0;
right: 0;
left: 100%;
width: 100%;
display: none;
height: 100%;
padding: 15px;
min-width: 742px;
}
h4.row.mega-title {
color: #838383;
margin-top: 0px;
font-size: 15px;
padding-bottom: 13px;
}
.flyout-mega ul>li>a {
font-size: 90%;
line-height: 25px;
color: #fff;
font-family: inherit;
}
.flyout-mega ul>li>a:hover,
.flyout-mega ul>li>a:active,
.flyout-mega ul>li>a:focus {
text-decoration: none;
background-color: transparent !important;
color: #ccc !important
}
.animated.fadeIn.mega-menu {
margin-top: 0;
}
.mega-menu {
left: 0;
right: 0;
width: 100vw;
/*display: none;*/
position: fixed;
padding-top: 0;
/*padding-top: 10px;*/
}
.mega-menu-wrap {
background-color: white;
}
.mm-mega-menu-wrap {
box-shadow: 3px 3px 10px 0 rgb(206 206 206 / 51%);
}
h4.row.mega-title {
color: #838383;
margin-top: 0px;
font-size: 15px;
padding-bottom: 13px;
padding-top: 23px;
}
.mega-menu ul li a {
line-height: 25px;
font-size: 15px;
color: black;
font-weight: 600;
display: block;
}
ul.stander li a {
padding: 3px 0px;
}
ul.description li {
padding-bottom: 12px;
line-height: 8px;
}
ul.description li span {
color: #ccc;
font-size: 85%;
}
a.view-more {
border-radius: 1px;
margin-top: 15px;
background-color: #009FE1;
padding: 2px 10px !important;
line-height: 21px !important;
display: inline-block !important;
}
a.view-more:hover {
color: #fff;
background: #0DADEF;
}
ul.icon-des li a i {
color: #fff;
width: 35px;
height: 35px;
border-radius: 50%;
text-align: center;
background-color: #009FE1;
line-height: 35px !important;
}
ul.icon-des li {
width: 100%;
display: table;
margin-bottom: 11px;
}
/*Blog DropDown*/
.Blog {
left: 0;
display: none;
color: #fefefe;
padding-top: 15px;
background: #547787;
padding-bottom: 15px;
}
.Blog .blog-title {
color: #fff;
font-size: 15px;
text-transform: uppercase;
}
.Blog .blog-des {
color: #ccc;
font-size: 90%;
margin-top: 15px;
}
.Blog a.view-more {
margin-top: 0px;
}
/*Images*/
.Images {
left: 0;
width: 100%;
display: none;
color: #fefefe;
padding-top: 15px;
background: #547787;
padding-bottom: 15px;
}
.Images h4 {
font-size: 15px;
margin-top: 0px;
text-transform: uppercase;
}
/*common*/
.flyout-right ul>li>a,
.flyout-left ul>li>a,
.flyout-mega-wrap {
background-color: white;
}
/*hover*/
.Blog:hover,
.Images:hover,
.mega-menu:hover,
.drop-down-ul:hover,
li.flyout-left>ul:hover,
li.flyout-right>ul:hover,
.flyout-mega-wrap:hover,
li.flyout-left a:hover+ul,
li.flyout-right a:hover+ul,
.blog-drop-down>a:hover+.Blog,
li.drop-down>a:hover+.drop-down-ul,
.images-drop-down>a:hover+.Images,
.mega-drop-down a:hover+.mega-menu,
li.flyout-mega>a:hover+.flyout-mega-wrap {
display: block;
}
.fl-node-5dafd29034e78 {
z-index: 210 !important;
position: relative;
}
.megamenusip,
.mega-menu,
.Images,
.Blog,
.flyout-right>ul,
.flyout-left>ul,
li.drop-down>ul {
z-index: 200;
}
.circle_image02 {
opacity: 1.0 !important;
filter: alpha(opacity=50) !important;
/* For IE8 and earlier */
}
.circle_image02:hover {
opacity: 0.5 !important;
filter: alpha(opacity=100) !important;
/* For IE8 and earlier */
}
.mega-menu-wrap li {
margin-bottom: 22px;
/*padding-right: 30px;*/
}
.mm-mm-icon {
vertical-align: top;
margin-right: 14px;
width: 32;
height: 32;
}
.mm-mm-subtext {
display: block;
margin-left: 46px;
font-size: 13px;
margin-top: -5px;
}
.mega-drop-down>a>span::after {
font-family: 'Font Awesome\ 5 Free';
content: '\f107';
padding-left: 5px;
}
.mega-drop-down>a>span.hover::after {
font-family: 'Font Awesome\ 5 Free';
content: '\f106';
}
.mega-drop-down>a>span.hover,
.mega-drop-down>a:active {
color: #23ADF8;
}
.mm-grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
.mm-grid div:nth-of-type(2) {
padding: 10px 10px 10px 35px;
}
.mm-mm-video {
display: inline-block;
background-color: white;
border: 2px solid #EDEDED;
margin-top: 17px;
padding: 13px;
border-radius: 24px;
height: 47px;
width: 161px;
}
.mm-mm-video:hover {
background-color: #23ADF8;
border-color: #23ADF8;
}
.mm-mm-video a {
color: #23ADF8;
}
.mm-mm-video:hover a {
color: white;
}
.mm-mm-video:hover img {
filter: invert(42%) brightness(180%) contrast(180%);
}
.mega-drop-down a:hover+.mega-menu.hide-block {
display: none;
}
.mm-mm-flyout {
display: inline-block;
width: 100%;
font-size: 15px;
}
.animated.mega-menu {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
}
.mega-menu ul li a:hover {
color: #23ADF8;
}
.container-fluid {
padding-left: 0;
padding-right: 0;
}
.mm-grid {
width: 400px;
max-width: 100%;
}
h4.row.mega-title {
padding-left: 0;
}
.row .col-md-2,
.row .col-md-3,
.row .col-md-4,
.row .col-md-6 {
padding-left: 0;
padding-right: 0;
}
#media (min-width: 1359px) {
.exo-menu>li>a {
display: block;
padding: 30px 22px 32px;
}
}
#media (max-width: 1358px) {
.exo-menu>li>a {
padding: 30px 15px 32px;
}
}
#media (min-width: 1252px) and (max-width: 1358px) {
.animated.fadeIn.mega-menu {
margin-top: 32px;
}
}
#media (min-width: 1349px) {
.fl-node-5dafd29034e79 {
width: 16%;
}
.fl-node-g84bp2nweskf {
width: 3.5%;
}
}
#media (min-width: 1340px) {
.mega-menu-wrap {
width: 1278px;
margin: auto;
}
}
#media (max-width: 1339px) {
.mega-menu-wrap {
width: calc(100vw - 80px);
margin: auto;
}
}
#media (max-width: 1251px) {
.exo-menu>li>a {
padding: 30px 15px 32px;
}
}
#media (min-width: 769px) and (max-width: 1251px) {
.animated.fadeIn.mega-menu {
margin-top: 32px;
padding-top: 0;
}
}
#media (max-width: 1199px) {
.mega-menu {
width: 100vw;
}
}
#media (max-width: 1151px) {
.fl-col-group-equal-height .fl-col.fl-node-5dafd77b08a6a {
display: none;
}
}
#media (max-width: 1025px) {
.fl-col-group-equal-height .fl-col.fl-node-5e6078af59549 {
display: none;
}
}
#media (min-width: 992px) {
.exo-menu>li:nth-child(1)>a {
padding-left: 0;
}
.row .col-md-2 {
width: 12%;
margin-right: 3%;
}
.row .col-md-3 {
width: 21.25%;
margin-right: 4%;
float: left;
padding-left: 0;
}
.row .col-md-3:last-of-type {
margin-right: 0;
}
.row .industries .col-md-3 {
width: 20.25%;
margin-right: 5%;
}
.col-md-4 {
width: 33.33333333%;
float: left;
}
.col-md-6 .col-md-6 {
width: 47%;
}
#col-use-cases {
margin-left: 2.5%;
margin-right: 1.5%;
}
}
#media (max-width: 991px) {
.empty {
display: none;
}
}
#media (min-width: 789px) and (max-width: 800px) {
.exo-menu>li>a {
padding: 30px 12px 32px;
}
}
#media (min-width: 769px) and (max-width: 788px) {
.exo-menu>li>a {
padding: 30px 13px 32px;
}
}
#media (min-width: 769px) {
.mm-grid {margin-bottom: 27px;}
.mega-menu {background-color: white;}
.mega-menu-wrap {min-height: 306px;}
#mm-button-group {display: none !important;}
}
#media (min-width: 768px) {
.mega-menu,
.flyout-mega-wrap,
.Images,
.Blog,
.flyout-right>ul,
.flyout-left>ul,
li.drop-down>ul {
position: fixed;
margin-top: 0;
}
.flyout-right>ul {
left: 100%;
}
.flyout-left>ul {
right: 100%;
}
.mega-menu-wrap .row {
margin-right: 0;
margin-left: 0;
/*padding: 0 15px;*/
}
}
.mega-menu.hide-block {
display: none !important;
}
#media (max-width: 768px) {
#mm-logo {
position: fixed;
top: 0;
left: 0;
background-color: white;
padding-left: 23px;
}
#mm-logo.fixed {
position: fixed;
top: 0;
background: white;
/*left: 23px;*/
z-index: 55;
}
.admin-bar #mm-logo {
position: fixed;
top: 46px;
}
.fl-page header.fl-builder-content {
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}
.fl-builder-content .fl-node-5dafd29034e79 {
width: calc(100vw - 130px) !important;
}
.fl-builder-content .fl-node-5dafd29034e7a {
width: 130px !important;
}
.fl-builder-content .fl-node-g84bp2nweskf {
display: none;
}
.fl-module.fl-module-html.fl-node-3p7sb46cwvqu {
position: absolute;
top: 20px;
}
.fl-node-5dafd2ede7f58>.fl-module-content {
margin-left: 0;
}
.exo-menu {
min-height: 58px;
width: 100%;
}
.mega-menu {
padding: 15px;
}
.animated.mega-menu {
padding-left: 22px;
padding-right: 22px;
margin-left: -22px;
margin-right: -22px;
}
.animated.fadeIn.mega-menu {
z-index: 0;
}
.mm-mega-menu-wrap {
box-shadow: none;
}
.mega-menu-wrap {
background-color: transparent;
}
ul.exo-menu.display {
left: 0;
top: 0px;
position: relative;
display: flex;
flex: 1;
flex-direction: column;
background-color: white;
min-height: calc((100 * var(--vh)) - 210px);
z-index: 0;
}
.admin-bar ul.exo-menu.display {
min-height: calc(100vh - 256px);
}
.admin-bar a.toggle-menu {
top: 64px;
}
.mega-drop-down,
.bg-white {
background-color: white;
}
.mega-drop-down>a>span::after {
float: right;
padding-right: 6px;
}
.exo-menu.display a.toggle-menu span {
display: none;
}
a.toggle-menu {
position: fixed;
color: black;
top: 8px;
right: 0;
padding: 4px 22px;
font-size: 27px;
z-index: 55;
color: #212121;
}
a.toggle-menu::before {
display: block !important;
font-family: 'Font Awesome\ 5 Free';
content: url("/wp-content/themes/bb-theme-child/images/menu-open.svg");
font-weight: 900;
color: #000000;
}
a.toggle-menu.display::before {
content: url("/wp-content/themes/bb-theme-child/images/menu-close.svg");
color: #B2B2B2;
margin-right: 6px;
}
/*.exo-menu.display a.toggle-menu::before {
display: block !important;
font-family: 'Font Awesome\ 5 Free';
content: '\f00d';
transform: rotate(90deg);
color: #B2B2B2;
font-weight: 900;
margin-top: 10px;
margin-right: -10px;
}*/
.exo-menu>li>a {
display: none;
padding: 30px 8px 32px;
}
.exo-menu>li {
margin-left: auto;
margin-right: auto;
border-bottom: 1px solid #EDEDED;
}
.exo-menu>li.mm-li-button {
border-bottom: none;
}
.display.exo-menu>li {
width: calc(100vw - 44px);
display: block;
float: none;
}
.display.exo-menu>li>a {
display: block;
padding: 20px 0;
font-size: 24px;
}
.mega-menu,
.Images,
.Blog,
.flyout-right>ul,
.flyout-left>ul,
li.drop-down>ul {
position: relative;
}
.mega-menu {
background-color: #F8F8F8;
}
#menu-item-1225 {
margin-top: -5px;
}
.fl-builder-content .fl-node-5dafd29034e7a {
width: 40px !important;
}
#see-all-features {
content: url('/wp-content/themes/bb-theme-child/images/what-is-digital-signage-mobile.jpg');
}
#just-4-steps {
content: url('/wp-content/themes/bb-theme-child/images/Just-4-steps-to-get-digital-signage-for-your-business-mobile.jpg');
}
#mm-button-group {
display: none;
}
#mm-button-group .mm-mm-button a.fl-button {
font-family: Poppins, sans-serif;
font-weight: 600;
font-size: 16px;
border: 1px solid #23ADF8 !important;
background-color: white !important;
background-clip: border-box;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
width: 100%;
text-align: center;
/*margin: 10px 0;*/
}
.fl-page #mm-mm-button-2 .mm-mm-button a.fl-button {
border: 1px solid #EDEDED !important;
}
.fl-page .mm-mm-button a.fl-button span {
color: #23ADF8 !important;
}
#mm-button-group {
position: relative;
/*bottom: 5px;*/
list-style-type: none;
padding-left: 0;
width: 100%;
background-color: white;
padding: 10px 22px 20px 22px;
/*margin-bottom: 22px;*/
}
#mm-button-group li {
padding: 10px 0 0 0;
background-color: white;
}
.container-fluid.megamenusip {
display: flex;
flex-wrap: wrap;
top: 66px;
position: fixed;
left: 0;
width: 100vw;
padding-left: 0;
padding-right: 0;
justify-content: stretch;
overflow-y: scroll;
}
.container-fluid.megamenusip.display {
height: calc(100% - 56px);
}
header .fl-col-group.fl-col-group-equal-height.fl-col-group-custom-width {
display: -webkit-box;
display: -webkit-flex;
background: white;
position: fixed;
display: -ms-flexbox;
display: flex;
}
h4.row.mega-title {
padding-top: 11px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="header-top">
<div class="container-fluid megamenusip">
<ul class="exo-menu">
<li class="mega-drop-down"><span>Product</span>
<div class="animated fadeIn mega-menu hide-block">
<div class="mm-mega-menu-wrap">
<div class="mega-menu-wrap">
<div class="row">
<div class="col-md-3">
<h4 class="row mega-title">Instant Digital Signage Platform</h4>
<ul class="cabeza">
<li>Features</li>
<li>Templates</li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title empty"> </h4>
<ul class="corporal">
<li>How it Works</li>
<li>Industries</li>
</ul>
</div>
<div class="col-md-2">
<h4 class="row mega-title">Get the Player</h4>
<ul class="manos">
<li>Hardware</li>
<li>Player Software</li>
</ul>
</div>
<div class="col-md-4">
<h4 class="row mega-title">What is Instant Digital Signage?</h4>
<div class="mm-grid">
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="mega-drop-down"><span>Solutions</span>
<div class="animated fadeIn mega-menu hide-block">
<div class="mm-mega-menu-wrap">
<div class="mega-menu-wrap">
<div class="row">
<div class="col-md-6">
<div class="col-md-6">
<h4 class="row mega-title">Industries</h4>
<ul class="cabeza">
<li>Hospitality</li>
<li>Retail</li>
<li>Hair & Beauty</li>
</ul>
</div>
<div class="col-md-6">
<h4 class="row mega-title empty"> </h4>
<ul class="cabeza">
<li>Medical</li>
<li>Fitness</li>
<li>More</li>
</ul>
</div>
</div>
<div class="col-md-3" id="col-use-cases">
<h4 class="row mega-title">Use Cases</h4>
<ul class="manos">
<li>Digital Menu Boards</li>
<li>Window Signage</li>
<li>In-Store Signage</li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title">About Mandoe</h4>
<ul class="manos">
<li>Enterprise</li>
<li>Customers</li>
<li>Partner Program</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="mega-drop-down"><span>Resources</span>
<div class="animated fadeIn mega-menu hide-block">
<div class="mm-mega-menu-wrap">
<div class="mega-menu-wrap">
<div class="row">
<div class="col-md-3">
<h4 class="row mega-title">Learn about the product</h4>
<ul class="cabeza">
<li>Blog</li>
<li>Case Studies</li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title empty"> </h4>
<ul class="corporal">
<li>Help Centre</li>
</ul>
</div>
<div class="col-md-2">
<h4 class="row mega-title">Get in Touch</h4>
<ul class="manos">
<li>About</li>
<li>Contact</li>
<li>Support</li>
</ul>
</div>
<div class="col-md-4">
<h4 class="row mega-title">Learn how it works</h4>
<div class="mm-grid">
<div></div>
<div><span class="mm-mm-flyout">Just 4 steps to get digital signage for your business</span><br />
<button class="mm-mm-video">
Play Video
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="bg-white">Pricing</li>
</ul>
<ul id="mm-button-group">
<li class="mm-li-button" id="mm-mm-button-1">
<div class="fl-button-wrap mm-mm-button">
<a href="https://sandbox.mandoemedia.com/signup?origin=mktg_portal" target="_self" class="fl-button" role="button">
<span class="fl-button-text">Start Free Trial</span>
</a>
</div>
</li>
<li class="mm-li-button" id="mm-mm-button-2">
<div class="fl-button-wrap mm-mm-button">
<a href="https://activate.mandoemedia.com" target="_self" class="fl-button" role="button">
<span class="fl-button-text">Log In</span>
</a>
</div>
</li>
</ul>
</div>
</div>
It doesn't make sense to keep header fixed for mobiles. Already real-estate is very less there. For mobiles make header relative/static and for desktops keep it sticky.
I couldn't get your code in OP working like the website. So tried things on the website itself using Dev tools.
Following CSS makes header non fixed for small screens:
#media (max-width: 768px) {
header .fl-col-group.fl-col-group-equal-height.fl-col-group-custom-width {
display: -webkit-box;
display: -webkit-flex;
background: white;
position: absolute; /* <-- */
display: -ms-flexbox;
display: flex;
}
.fl-module.fl-module-html.fl-node-3p7sb46cwvqu {
/* position: absolute; */ /* <-- */
top: 20px;
}
.container-fluid.megamenusip {
display: flex;
flex-wrap: wrap;
top: 66px;
position: absolute; /* <-- */
left: 0;
width: 100vw;
padding-left: 0;
padding-right: 0;
justify-content: stretch;
overflow-y: scroll;
}
}
I think you make <header> sticky on big screens and relative on small ones. And don't use fixed on any children used absolute. For small screens make megamenusip non absolute.
Or take the megamenu part out of the <header> and make it floating relative to the scrolling parent. For wide screens use position fixed and for small use absolute.
Our mobile menu works fine in Chrome & Firefox on a Pixel 5.
On an iPhone 5s (the only iPhone I have), an iPad Mini 2 and on an older iPad, the burger menu open & close icons do not show.
On a non-retina desktop display where Chrome & Firefox work in responsive mode (mobile viewport width), Safari will show the mobile menu open icon, but not the close icon.
The open icon is three pipes rotated 90deg: |||
The close icon is a font-awesome symbol:
.exo-menu.display a.toggle-menu::before {
display: block !important;
font-family: 'Font Awesome\ 5 Free';
content: '\f00d';
I've tried adding font-weight: 900; without change.
Using Safari mobile inspector, the element is in the correct position.
You can use the code below in a mobile viewport or see the problem in the wild # https://mandoedev.wpengine.com.
How can I get the mobile menu open & close icons working in Safari the same way they work in Chrome & Firefox on a Pixel 5?
Help appreciated.
EDIT: pso's answer finds the cause of the problem, but not the solution. Would really appreciate someone helping me with the solution.
$(document).ready(function() {
$(".mega-drop-down").hover(function() {
if (window.innerWidth > 768) {
showMenu(this);
}
});
$(".mega-drop-down").on("click", function() {
if (window.innerWidth <= 768) {
showMenu(this);
this.scrollIntoView(true); // <---- fix
}
});
$(".toggle-menu").click(function() {
$("#mm-logo").toggleClass("fixed");
$(".exo-menu").toggleClass("display");
$("#mm-button-group").toggle();
$(".mega-menu").addClass("hide-block");
});
});
function showMenu(self) {
$(".mega-menu")
.not($(self).children(".mega-menu").toggleClass("hide-block"))
.addClass("hide-block");
$(self).find("a span").toggleClass("hover");
$(".exo-menu")
.find("a span")
.not($(self).find("a span"))
.removeClass("hover");
}
.fl-builder-content[data-type="header"].fl-theme-builder-header-sticky {
z-index: 1000;
}
ul.exo-menu {
list-style: none;
margin: 0;
padding: 0;
}
ul.cabeza,
ul.manos,
ul.corporal {
list-style-type: none;
padding: 0;
}
.content {
margin: 50px 100px 0px 100px;
}
.mega-menu-wrap .row {
margin-right: 0;
margin-left: 0;
padding-left: 0;
padding-right: 0;
}
.exo-menu {
float: none;
margin: auto;
list-style: none;
position: relative;
}
.exo-menu>li {
display: inline-block;
float: left;
position: relative;
}
.exo-menu>li>a {
color: black;
font-size: 15px;
font-weight: 600;
text-decoration: none;
}
.exo-menu>li>a:hover {
color: #23ADF8;
}
.exo-menu i {
float: left;
font-size: 18px;
margin-right: 6px;
line-height: 20px !important;
}
li.drop-down,
.flyout-right,
.flyout-left {
position: relative;
}
li.drop-down:before {
content: "f103";
color: #fff;
font-family: FontAwesome;
font-style: normal;
display: inline;
position: absolute;
right: 6px;
top: 20px;
font-size: 14px;
}
li.drop-down>ul {
left: 0px;
min-width: 230px;
}
.drop-down-ul {
display: none;
}
h4.row.mega-title {
margin-top: 0px;
font-size: 15px;
padding-bottom: 13px;
}
.animated.fadeIn.mega-menu {
margin-top: 8px;
}
.mega-menu {
left: 0;
right: 0;
width: 100vw;
/*display: none;*/
position: fixed;
padding-top: 0;
/*padding-top: 10px;*/
}
.mega-menu-wrap {
background-color: white;
}
.mm-mega-menu-wrap {
box-shadow: 3px 3px 10px 0 rgb(206 206 206 / 51%);
}
h4.row.mega-title {
color: #838383;
margin-top: 0px;
font-size: 15px;
padding-bottom: 13px;
padding-top: 23px;
}
.mega-menu ul li a {
line-height: 25px;
font-size: 15px;
color: black;
font-weight: 600;
display: block;
}
ul.stander li a {
padding: 3px 0px;
}
ul.description li {
padding-bottom: 12px;
line-height: 8px;
}
ul.description li span {
color: #ccc;
font-size: 85%;
}
a.view-more {
border-radius: 1px;
margin-top: 15px;
background-color: #009FE1;
padding: 2px 10px !important;
line-height: 21px !important;
display: inline-block !important;
}
a.view-more:hover {
color: #fff;
background: #0DADEF;
}
ul.icon-des li a i {
color: #fff;
width: 35px;
height: 35px;
border-radius: 50%;
text-align: center;
background-color: #009FE1;
line-height: 35px !important;
}
ul.icon-des li {
width: 100%;
display: table;
margin-bottom: 11px;
}
/*Blog DropDown*/
.Blog {
left: 0;
display: none;
color: #fefefe;
padding-top: 15px;
background: #547787;
padding-bottom: 15px;
}
.Blog .blog-title {
color: #fff;
font-size: 15px;
text-transform: uppercase;
}
.Blog .blog-des {
color: #ccc;
font-size: 90%;
margin-top: 15px;
}
.Blog a.view-more {
margin-top: 0px;
}
/*Images*/
.Images {
left: 0;
width: 100%;
display: none;
color: #fefefe;
padding-top: 15px;
background: #547787;
padding-bottom: 15px;
}
.Images h4 {
font-size: 15px;
margin-top: 0px;
text-transform: uppercase;
}
/*common*/
.flyout-right ul>li>a,
.flyout-left ul>li>a,
.flyout-mega-wrap {
background-color: white;
}
/*hover*/
.Blog:hover,
.Images:hover,
.mega-menu:hover,
.drop-down-ul:hover,
li.flyout-left>ul:hover,
li.flyout-right>ul:hover,
.flyout-mega-wrap:hover,
li.flyout-left a:hover+ul,
li.flyout-right a:hover+ul,
.blog-drop-down>a:hover+.Blog,
li.drop-down>a:hover+.drop-down-ul,
.images-drop-down>a:hover+.Images,
.mega-drop-down a:hover+.mega-menu,
li.flyout-mega>a:hover+.flyout-mega-wrap {
display: block;
}
a.toggle-menu {
position: absolute;
right: 10px;
padding: 8px 20px;
font-size: 27px;
color: black;
top: 0px;
transform: rotate(90deg);
margin-top: -13px;
}
.fl-node-5dafd29034e78 {
z-index: 210 !important;
position: relative;
}
.megamenusip,
.mega-menu,
.Images,
.Blog,
.flyout-right>ul,
.flyout-left>ul,
li.drop-down>ul {
z-index: 200;
}
.circle_image02 {
opacity: 1.0 !important;
filter: alpha(opacity=50) !important;
/* For IE8 and earlier */
}
.circle_image02:hover {
opacity: 0.5 !important;
filter: alpha(opacity=100) !important;
/* For IE8 and earlier */
}
.mega-menu-wrap li {
margin-bottom: 22px;
padding-right: 30px;
}
.mm-mm-icon {
vertical-align: top;
margin-right: 14px;
width: 32;
height: 32;
}
.mm-mm-subtext {
display: inline-block;
margin-left: 46px;
font-size: 13px;
}
.mega-drop-down>a>span::after {
font-family: 'Font Awesome\ 5 Free';
content: '\f107';
padding-left: 5px;
}
.mega-drop-down>a>span.hover::after {
font-family: 'Font Awesome\ 5 Free';
content: '\f106';
}
.mega-drop-down>a>span.hover,
.mega-drop-down>a:active {
color: #23ADF8;
}
.mm-grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
.mm-grid div:nth-of-type(2) {
padding: 10px 10px 10px 35px;
}
.mm-mm-video {
display: inline-block;
background-color: white;
border: 2px solid #EDEDED;
margin-top: 17px;
padding: 13px;
border-radius: 24px;
height: 47px;
width: 161px;
}
.mm-mm-video:hover {
background-color: #23ADF8;
border-color: #23ADF8;
}
.mm-mm-video a {
color: #23ADF8;
}
.mm-mm-video:hover a {
color: white;
}
.mm-mm-video:hover img {
filter: invert(42%) brightness(180%) contrast(180%);
}
.mega-drop-down a:hover+.mega-menu.hide-block {
display: none;
}
.mm-mm-flyout {
display: inline-block;
width: 100%;
font-size: 15px;
}
.animated.mega-menu {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
}
.mega-menu ul li a:hover {
color: #23ADF8;
}
.container-fluid {
padding-left: 0;
padding-right: 0;
}
.mm-grid {
width: 400px;
max-width: 100%;
}
h4.row.mega-title {
padding-left: 0;
}
.row .col-md-2,
.row .col-md-3,
.row .col-md-4 {
padding-left: 0;
padding-right: 0;
}
#media (min-width: 1349px) {
.fl-node-5dafd29034e79 {
width: 16%;
}
.fl-node-g84bp2nweskf {
width: 3%;
}
}
#media (min-width: 1300px) {
.mega-menu-wrap {
width: 1280px;
margin: auto;
}
}
#media (max-width: 1299px) {
.mega-menu-wrap {
width: 100%;
}
}
#media (min-width: 1252px) {
.exo-menu>li>a {
display: block;
padding: 30px 22px 32px;
}
}
#media (max-width: 1251px) {
.exo-menu>li>a {
padding: 30px 15px 32px;
}
}
#media (min-width: 769px) and (max-width: 1251px) {
.animated.fadeIn.mega-menu {
padding-top: 32px;
}
}
#media (max-width: 1199px) {
.mega-menu {
width: 100vw;
}
}
#media (max-width: 1151px) {
.fl-col-group-equal-height .fl-col.fl-node-5dafd77b08a6a {
display: none;
}
}
#media (max-width: 1025px) {
.fl-col-group-equal-height .fl-col.fl-node-5e6078af59549 {
display: none;
}
}
#media (min-width: 992px) {
.exo-menu>li:nth-child(1)>a {
padding-left: 0;
}
.col-md-2 {
width: 16.66666667%;
float: left;
}
.col-md-3 {
width: 25%;
float: left;
padding-left: 0;
}
.col-md-4 {
width: 33.33333333%;
float: left;
}
}
#media (max-width: 991px) {
.empty {
display: none;
}
}
#media (min-width: 789px) and (max-width: 800px) {
.exo-menu>li>a {
padding: 30px 12px 32px;
}
}
#media (min-width: 769px) {
.mm-grid {
margin-bottom: 27px;
}
#mm-button-group {
display: none !important;
}
}
#media (min-width: 768px) {
.mega-menu,
.flyout-mega-wrap,
.Images,
.Blog,
.flyout-right>ul,
.flyout-left>ul,
li.drop-down>ul {
position: fixed;
margin-top: 0;
}
.flyout-right>ul {
left: 100%;
}
.flyout-left>ul {
right: 100%;
}
.mega-menu-wrap .row {
margin-right: 0;
margin-left: 0;
padding: 0 15px;
}
}
.mega-menu.hide-block {
display: none !important;
}
#media (max-width: 768px) {
#mm-logo {
position: fixed;
top: 0;
left: 0;
background-color: white;
padding-left: 23px;
}
#mm-logo.fixed {
position: fixed;
top: 0;
background: white;
/*left: 23px;*/
z-index: 55;
}
.admin-bar #mm-logo {
position: fixed;
top: 46px;
}
.fl-page header.fl-builder-content {
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}
.fl-builder-content .fl-node-5dafd29034e79 {
width: calc(100vw - 130px) !important;
}
.fl-builder-content .fl-node-5dafd29034e7a {
width: 130px !important;
}
.fl-builder-content .fl-node-g84bp2nweskf {
display: none;
}
.fl-module.fl-module-html.fl-node-3p7sb46cwvqu {
position: absolute;
top: 20px;
}
.fl-node-5dafd2ede7f58>.fl-module-content {
margin-left: 0;
}
.exo-menu {
min-height: 58px;
width: 100%;
}
.mega-menu {
padding: 15px;
}
.animated.mega-menu {
padding-left: 22px;
padding-right: 22px;
margin-left: -22px;
margin-right: -22px;
}
.animated.fadeIn.mega-menu {
z-index: 0;
}
.mm-mega-menu-wrap {
box-shadow: none;
}
.mega-menu-wrap {
background-color: transparent;
}
ul.exo-menu.display {
left: 0;
top: 0px;
position: relative;
display: flex;
flex: 1;
flex-direction: column;
background-color: white;
min-height: calc((100 * var(--vh)) - 210px);
z-index: 0;
}
.admin-bar ul.exo-menu.display {
min-height: calc(100vh - 256px);
}
a.toggle-menu {
position: fixed;
right: 0;
padding: 8px 20px;
font-size: 27px;
color: black;
top: 14px;
transform: rotate(90deg);
}
.admin-bar a.toggle-menu {
top: 58px;
}
.mega-drop-down,
.bg-white {
background-color: white;
}
.mega-drop-down>a>span::after {
float: right;
padding-right: 6px;
}
.exo-menu.display a.toggle-menu span {
display: none;
}
.exo-menu.display a.toggle-menu {
position: fixed;
right: 2px;
padding: 4px 22px;
font-size: 27px;
z-index: 55;
color: #212121;
}
.exo-menu.display a.toggle-menu:hover,
a.toggle-menu:hover {
color: #212121;
}
.exo-menu.display a.toggle-menu::before {
display: block !important;
font-family: 'Font Awesome\ 5 Free';
content: '\f00d';
transform: rotate(90deg);
color: #B2B2B2;
font-weight: 900;
margin-top: 10px;
margin-right: -10px;
}
.exo-menu>li>a {
display: none;
padding: 30px 8px 32px;
}
.exo-menu>li {
margin-left: auto;
margin-right: auto;
border-bottom: 1px solid #EDEDED;
}
.exo-menu>li.mm-li-button {
border-bottom: none;
}
.display.exo-menu>li {
width: calc(100vw - 44px);
display: block;
float: none;
}
.display.exo-menu>li>a {
display: block;
padding: 20px 0;
font-size: 24px;
}
.mega-menu,
.Images,
.Blog,
.flyout-right>ul,
.flyout-left>ul,
li.drop-down>ul {
position: relative;
}
.mega-menu {
background-color: #F8F8F8;
}
#menu-item-1225 {
margin-top: -5px;
}
.fl-builder-content .fl-node-5dafd29034e7a {
width: 40px !important;
}
#see-all-features {
content: url('https://mandoedev.wpengine.com/wp-content/uploads/2022/02/what-is-digital-signage-mobile.jpg');
}
#just-4-steps {
content: url('https://mandoedev.wpengine.com/wp-content/uploads/2022/02/Just-4-steps-to-get-digital-signage-for-your-business-mobile.jpg');
}
#mm-button-group {
display: none;
}
#mm-button-group .mm-mm-button a.fl-button {
font-family: Poppins, sans-serif;
font-weight: 600;
font-size: 16px;
border: 1px solid #23ADF8 !important;
background-color: white !important;
background-clip: border-box;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
width: 100%;
text-align: center;
/*margin: 10px 0;*/
}
.fl-page #mm-mm-button-2 .mm-mm-button a.fl-button {
border: 1px solid #EDEDED !important;
}
.fl-page .mm-mm-button a.fl-button span {
color: #23ADF8 !important;
}
#mm-button-group {
position: relative;
/*bottom: 5px;*/
list-style-type: none;
padding-left: 0;
width: 100%;
background-color: white;
padding: 10px 22px 20px 22px;
/*margin-bottom: 22px;*/
}
#mm-button-group li {
padding: 10px 0 0 0;
background-color: white;
}
.container-fluid.megamenusip {
display: flex;
flex-wrap: wrap;
top: 66px;
position: fixed;
left: 0;
width: 100vw;
height: calc(100% - 56px);
padding-left: 0;
padding-right: 0;
justify-content: stretch;
overflow-y: scroll;
}
header .fl-col-group.fl-col-group-equal-height.fl-col-group-custom-width {
display: -webkit-box;
display: -webkit-flex;
background: white;
position: fixed;
display: -ms-flexbox;
display: flex;
}
h4.row.mega-title {
padding-top: 11px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="header-top">
<div class="container-fluid megamenusip">
<ul class="exo-menu">
<li class="mega-drop-down"><span>Product</span>
<div class="animated fadeIn mega-menu hide-block">
<div class="mm-mega-menu-wrap">
<div class="mega-menu-wrap">
<div class="row">
<div class="col-md-3">
<h4 class="row mega-title">Instant Digital Signage Platform</h4>
<ul class="cabeza">
<li><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-features.svg" alt="features" class="mm-mm-icon" />Features <span class="mm-mm-subtext">See all the features packed into this powerful digital signage platform.</span></li>
<li><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-templates.svg" alt="templates" class="mm-mm-icon" />Templates <span class="mm-mm-subtext">1000’s of professionally designed templates for every business.</span></li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title empty"> </h4>
<ul class="corporal">
<li><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-how-it-works.svg" alt="templates" class="mm-mm-icon" />How it Works <span class="mm-mm-subtext">Find out how easy it is to get digital signage for your business.</span></li>
<li><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-industries.svg" alt="templates" class="mm-mm-icon" />Industries <span class="mm-mm-subtext">Digital signage is perfect for any business with tailored solutions.</span></li>
</ul>
</div>
<div class="col-md-2">
<h4 class="row mega-title">Get the Player</h4>
<ul class="manos">
<li>Hardware</li>
<li>Player Software</li>
</ul>
</div>
<div class="col-md-4">
<h4 class="row mega-title">What is Instant Digital Signage?</h4>
<div class="mm-grid">
<div><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/what-is-digital-signage.jpg" alt="What is Instant Digital Signage?" style="width: 100%;" id="see-all-features"/></div>
<div><span class="mm-mm-flyout"> Get an overview of how easy it is to get digital signage</span><br />
<button class="mm-mm-video">
<img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-play.svg" alt="play video" title="play video"> Play Video
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="mega-drop-down"><span>Solutions</span>
<div class="animated fadeIn mega-menu hide-block">
<div class="mm-mega-menu-wrap">
<div class="mega-menu-wrap">
<div class="row">
<div class="col-md-3">
<h4 class="row mega-title">Industries</h4>
<ul class="cabeza">
<li><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-hospitality.svg" alt="features" class="mm-mm-icon" />Hospitality <span class="mm-mm-subtext">Cafe, Restaurant, Fast Food…</span></li>
<li><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-retail.svg" alt="templates" class="mm-mm-icon" />Retail <span class="mm-mm-subtext">Cafe, Restaurant, Fast Food…</span></li>
<li><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-hair-beauty.svg" alt="templates" class="mm-mm-icon" />Hair & Beauty <span class="mm-mm-subtext">Hair Salons, Nail Salon, Laser…</span></li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title empty"> </h4>
<ul class="cabeza">
<li><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-medical.svg" alt="features" class="mm-mm-icon" />Medical <span class="mm-mm-subtext">Cafe, Restaurant, Fast Food…</span></li>
<li><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-fitness.svg" alt="templates" class="mm-mm-icon" />Fitness <span class="mm-mm-subtext">Cafe, Restaurant, Fast Food…</span></li>
<li><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-more.svg" alt="templates" class="mm-mm-icon" />More <span class="mm-mm-subtext">We have solutions for all industries…</span></li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title">Use Cases</h4>
<ul class="manos">
<li>Digital Menu Boards</li>
<li>Window Signage</li>
<li>In-Store Signage</li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title">About Mandoe</h4>
<ul class="manos">
<li>Enterprise</li>
<li>Customers</li>
<li>Partner Program</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="mega-drop-down"><span>Resources</span>
<div class="animated fadeIn mega-menu hide-block">
<div class="mm-mega-menu-wrap">
<div class="mega-menu-wrap">
<div class="row">
<div class="col-md-3">
<h4 class="row mega-title">Learn about the product</h4>
<ul class="cabeza">
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title empty"> </h4>
<ul class="corporal">
<li></li>
</ul>
</div>
<div class="col-md-2">
<h4 class="row mega-title">Get in Touch</h4>
<ul class="manos">
<li>About</li>
<li>Contact</li>
<li>Support</li>
</ul>
</div>
<div class="col-md-4">
<h4 class="row mega-title">Learn how it works</h4>
<div class="mm-grid">
<div></div>
<div></div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="bg-white">Pricing</li>
<span>|||</span>
</ul>
<ul id="mm-button-group">
<li class="mm-li-button" id="mm-mm-button-1">
</li>
<li class="mm-li-button" id="mm-mm-button-2">
<div class="fl-button-wrap mm-mm-button">
<a href="https://activate.mandoemedia.com" target="_self" class="fl-button" role="button">
<span class="fl-button-text">Log In</span>
</a>
</div>
</li>
</ul>
</div>
</div>
I've moved the toggle-menu out of the megamenusip. Now it works on safari.
$(document).ready(function() {
$(".mega-drop-down").hover(function() {
if (window.innerWidth > 768) {
showMenu(this);
}
});
$(".mega-drop-down").on("click", function() {
if (window.innerWidth <= 768) {
showMenu(this);
this.scrollIntoView(true); // <---- fix
}
});
$(".toggle-menu").click(function() {
$("#mm-logo").toggleClass("fixed");
$(".exo-menu").toggleClass("display");
// adding .fa-times class overrieds fa-bars icon
// so for switching we don't have to hide anything :)
$(".toggle-menu i").toggleClass("fa-times");
$("#mm-button-group").toggle();
$(".mega-menu").addClass("hide-block");
});
});
function showMenu(self) {
$(".mega-menu")
.not($(self).children(".mega-menu").toggleClass("hide-block"))
.addClass("hide-block");
$(self).find("a span").toggleClass("hover");
$(".exo-menu")
.find("a span")
.not($(self).find("a span"))
.removeClass("hover");
}
.fl-builder-content[data-type="header"].fl-theme-builder-header-sticky {
z-index: 1000;
}
ul.exo-menu {
list-style: none;
margin: 0;
padding: 0;
}
ul.cabeza,
ul.manos,
ul.corporal {
list-style-type: none;
padding: 0;
}
.content {
margin: 50px 100px 0px 100px;
}
.mega-menu-wrap .row {
margin-right: 0;
margin-left: 0;
padding-left: 0;
padding-right: 0;
}
.exo-menu {
float: none;
margin: auto;
list-style: none;
position: relative;
}
.exo-menu>li {
display: inline-block;
float: left;
position: relative;
}
.exo-menu>li>a {
color: black;
font-size: 15px;
font-weight: 600;
text-decoration: none;
}
.exo-menu>li>a:hover {
color: #23ADF8;
}
.exo-menu i {
float: left;
font-size: 18px;
margin-right: 6px;
line-height: 20px !important;
}
li.drop-down,
.flyout-right,
.flyout-left {
position: relative;
}
li.drop-down:before {
content: "f103";
color: #fff;
font-family: FontAwesome;
font-style: normal;
display: inline;
position: absolute;
right: 6px;
top: 20px;
font-size: 14px;
}
li.drop-down>ul {
left: 0px;
min-width: 230px;
}
.drop-down-ul {
display: none;
}
h4.row.mega-title {
margin-top: 0px;
font-size: 15px;
padding-bottom: 13px;
}
.animated.fadeIn.mega-menu {
margin-top: 8px;
}
.mega-menu {
left: 0;
right: 0;
width: 100vw;
/*display: none;*/
position: fixed;
padding-top: 0;
/*padding-top: 10px;*/
}
.mega-menu-wrap {
background-color: white;
}
.mm-mega-menu-wrap {
box-shadow: 3px 3px 10px 0 rgb(206 206 206 / 51%);
}
h4.row.mega-title {
color: #838383;
margin-top: 0px;
font-size: 15px;
padding-bottom: 13px;
padding-top: 23px;
}
.mega-menu ul li a {
line-height: 25px;
font-size: 15px;
color: black;
font-weight: 600;
display: block;
}
ul.stander li a {
padding: 3px 0px;
}
ul.description li {
padding-bottom: 12px;
line-height: 8px;
}
ul.description li span {
color: #ccc;
font-size: 85%;
}
a.view-more {
border-radius: 1px;
margin-top: 15px;
background-color: #009FE1;
padding: 2px 10px !important;
line-height: 21px !important;
display: inline-block !important;
}
a.view-more:hover {
color: #fff;
background: #0DADEF;
}
ul.icon-des li a i {
color: #fff;
width: 35px;
height: 35px;
border-radius: 50%;
text-align: center;
background-color: #009FE1;
line-height: 35px !important;
}
ul.icon-des li {
width: 100%;
display: table;
margin-bottom: 11px;
}
/*Blog DropDown*/
.Blog {
left: 0;
display: none;
color: #fefefe;
padding-top: 15px;
background: #547787;
padding-bottom: 15px;
}
.Blog .blog-title {
color: #fff;
font-size: 15px;
text-transform: uppercase;
}
.Blog .blog-des {
color: #ccc;
font-size: 90%;
margin-top: 15px;
}
.Blog a.view-more {
margin-top: 0px;
}
/*Images*/
.Images {
left: 0;
width: 100%;
display: none;
color: #fefefe;
padding-top: 15px;
background: #547787;
padding-bottom: 15px;
}
.Images h4 {
font-size: 15px;
margin-top: 0px;
text-transform: uppercase;
}
/*common*/
.flyout-right ul>li>a,
.flyout-left ul>li>a,
.flyout-mega-wrap {
background-color: white;
}
/*hover*/
.Blog:hover,
.Images:hover,
.mega-menu:hover,
.drop-down-ul:hover,
li.flyout-left>ul:hover,
li.flyout-right>ul:hover,
.flyout-mega-wrap:hover,
li.flyout-left a:hover+ul,
li.flyout-right a:hover+ul,
.blog-drop-down>a:hover+.Blog,
li.drop-down>a:hover+.drop-down-ul,
.images-drop-down>a:hover+.Images,
.mega-drop-down a:hover+.mega-menu,
li.flyout-mega>a:hover+.flyout-mega-wrap {
display: block;
}
a.toggle-menu {
position: absolute;
right: 10px;
padding: 8px 20px;
font-size: 27px;
color: black;
top: 0px;
margin-top: -13px;
}
.fl-node-5dafd29034e78 {
z-index: 210 !important;
position: relative;
}
.megamenusip,
.mega-menu,
.Images,
.Blog,
.flyout-right>ul,
.flyout-left>ul,
li.drop-down>ul {
z-index: 200;
}
.circle_image02 {
opacity: 1.0 !important;
filter: alpha(opacity=50) !important;
/* For IE8 and earlier */
}
.circle_image02:hover {
opacity: 0.5 !important;
filter: alpha(opacity=100) !important;
/* For IE8 and earlier */
}
.mega-menu-wrap li {
margin-bottom: 22px;
padding-right: 30px;
}
.mm-mm-icon {
vertical-align: top;
margin-right: 14px;
width: 32;
height: 32;
}
.mm-mm-subtext {
display: inline-block;
margin-left: 46px;
font-size: 13px;
}
.mega-drop-down>a>span::after {
font-family: 'Font Awesome\ 5 Free';
content: '\f107';
padding-left: 5px;
}
.mega-drop-down>a>span.hover::after {
font-family: 'Font Awesome\ 5 Free';
content: '\f106';
}
.mega-drop-down>a>span.hover,
.mega-drop-down>a:active {
color: #23ADF8;
}
.mm-grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
.mm-grid div:nth-of-type(2) {
padding: 10px 10px 10px 35px;
}
.mm-mm-video {
display: inline-block;
background-color: white;
border: 2px solid #EDEDED;
margin-top: 17px;
padding: 13px;
border-radius: 24px;
height: 47px;
width: 161px;
}
.mm-mm-video:hover {
background-color: #23ADF8;
border-color: #23ADF8;
}
.mm-mm-video a {
color: #23ADF8;
}
.mm-mm-video:hover a {
color: white;
}
.mm-mm-video:hover img {
filter: invert(42%) brightness(180%) contrast(180%);
}
.mega-drop-down a:hover+.mega-menu.hide-block {
display: none;
}
.mm-mm-flyout {
display: inline-block;
width: 100%;
font-size: 15px;
}
.animated.mega-menu {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
}
.mega-menu ul li a:hover {
color: #23ADF8;
}
.container-fluid {
padding-left: 0;
padding-right: 0;
}
.mm-grid {
width: 400px;
max-width: 100%;
}
h4.row.mega-title {
padding-left: 0;
}
.row .col-md-2,
.row .col-md-3,
.row .col-md-4 {
padding-left: 0;
padding-right: 0;
}
#media (min-width: 1349px) {
.fl-node-5dafd29034e79 {
width: 16%;
}
.fl-node-g84bp2nweskf {
width: 3%;
}
}
#media (min-width: 1300px) {
.mega-menu-wrap {
width: 1280px;
margin: auto;
}
}
#media (max-width: 1299px) {
.mega-menu-wrap {
width: 100%;
}
}
#media (min-width: 1252px) {
.exo-menu>li>a {
display: block;
padding: 30px 22px 32px;
}
}
#media (max-width: 1251px) {
.exo-menu>li>a {
padding: 30px 15px 32px;
}
}
#media (min-width: 769px) and (max-width: 1251px) {
.animated.fadeIn.mega-menu {
padding-top: 32px;
}
}
#media (max-width: 1199px) {
.mega-menu {
width: 100vw;
}
}
#media (max-width: 1151px) {
.fl-col-group-equal-height .fl-col.fl-node-5dafd77b08a6a {
display: none;
}
}
#media (max-width: 1025px) {
.fl-col-group-equal-height .fl-col.fl-node-5e6078af59549 {
display: none;
}
}
#media (min-width: 992px) {
.exo-menu>li:nth-child(1)>a {
padding-left: 0;
}
.col-md-2 {
width: 16.66666667%;
float: left;
}
.col-md-3 {
width: 25%;
float: left;
padding-left: 0;
}
.col-md-4 {
width: 33.33333333%;
float: left;
}
}
#media (max-width: 991px) {
.empty {
display: none;
}
}
#media (min-width: 789px) and (max-width: 800px) {
.exo-menu>li>a {
padding: 30px 12px 32px;
}
}
#media (min-width: 769px) {
.mm-grid {
margin-bottom: 27px;
}
#mm-button-group {
display: none !important;
}
}
#media (min-width: 768px) {
.mega-menu,
.flyout-mega-wrap,
.Images,
.Blog,
.flyout-right>ul,
.flyout-left>ul,
li.drop-down>ul {
position: fixed;
margin-top: 0;
}
.flyout-right>ul {
left: 100%;
}
.flyout-left>ul {
right: 100%;
}
.mega-menu-wrap .row {
margin-right: 0;
margin-left: 0;
padding: 0 15px;
}
}
.mega-menu.hide-block {
display: none !important;
}
/* hide in normal case*/
.toggle-menu {
display: none;
}
#media (max-width: 768px) {
/* show in small devices */
.toggle-menu {
display: block;
}
#mm-logo {
position: fixed;
top: 0;
left: 0;
background-color: white;
padding-left: 23px;
}
#mm-logo.fixed {
position: fixed;
top: 0;
background: white;
/*left: 23px;*/
z-index: 55;
}
.admin-bar #mm-logo {
position: fixed;
top: 46px;
}
.fl-page header.fl-builder-content {
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}
.fl-builder-content .fl-node-5dafd29034e79 {
width: calc(100vw - 130px) !important;
}
.fl-builder-content .fl-node-5dafd29034e7a {
width: 130px !important;
}
.fl-builder-content .fl-node-g84bp2nweskf {
display: none;
}
.fl-module.fl-module-html.fl-node-3p7sb46cwvqu {
position: absolute;
top: 20px;
}
.fl-node-5dafd2ede7f58>.fl-module-content {
margin-left: 0;
}
.exo-menu {
min-height: 58px;
width: 100%;
}
.mega-menu {
padding: 15px;
}
.animated.mega-menu {
padding-left: 22px;
padding-right: 22px;
margin-left: -22px;
margin-right: -22px;
}
.animated.fadeIn.mega-menu {
z-index: 0;
}
.mm-mega-menu-wrap {
box-shadow: none;
}
.mega-menu-wrap {
background-color: transparent;
}
ul.exo-menu.display {
left: 0;
top: 0px;
position: relative;
display: flex;
flex: 1;
flex-direction: column;
background-color: white;
min-height: calc((100 * var(--vh)) - 210px);
z-index: 0;
}
.admin-bar ul.exo-menu.display {
min-height: calc(100vh - 256px);
}
a.toggle-menu {
position: fixed;
right: 0;
padding: 8px 20px;
font-size: 27px;
color: black;
top: 14px;
}
.admin-bar a.toggle-menu {
top: 58px;
}
.mega-drop-down,
.bg-white {
background-color: white;
}
.mega-drop-down>a>span::after {
float: right;
padding-right: 6px;
}
a.toggle-menu.display span {
aaadisplay: none;
}
a.toggle-menu:hover {
color: #212121;
}
.exo-menu>li>a {
display: none;
padding: 30px 8px 32px;
}
.exo-menu>li {
margin-left: auto;
margin-right: auto;
border-bottom: 1px solid #EDEDED;
}
.exo-menu>li.mm-li-button {
border-bottom: none;
}
.display.exo-menu>li {
width: calc(100vw - 44px);
display: block;
float: none;
}
.display.exo-menu>li>a {
display: block;
padding: 20px 0;
font-size: 24px;
}
.mega-menu,
.Images,
.Blog,
.flyout-right>ul,
.flyout-left>ul,
li.drop-down>ul {
position: relative;
}
.mega-menu {
background-color: #F8F8F8;
}
#menu-item-1225 {
margin-top: -5px;
}
.fl-builder-content .fl-node-5dafd29034e7a {
width: 40px !important;
}
#see-all-features {
content: url('https://mandoedev.wpengine.com/wp-content/uploads/2022/02/what-is-digital-signage-mobile.jpg');
}
#just-4-steps {
content: url('https://mandoedev.wpengine.com/wp-content/uploads/2022/02/Just-4-steps-to-get-digital-signage-for-your-business-mobile.jpg');
}
#mm-button-group {
display: none;
}
#mm-button-group .mm-mm-button a.fl-button {
font-family: Poppins, sans-serif;
font-weight: 600;
font-size: 16px;
border: 1px solid #23ADF8 !important;
background-color: white !important;
background-clip: border-box;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
width: 100%;
text-align: center;
/*margin: 10px 0;*/
}
.fl-page #mm-mm-button-2 .mm-mm-button a.fl-button {
border: 1px solid #EDEDED !important;
}
.fl-page .mm-mm-button a.fl-button span {
color: #23ADF8 !important;
}
#mm-button-group {
position: relative;
/*bottom: 5px;*/
list-style-type: none;
padding-left: 0;
width: 100%;
background-color: white;
padding: 10px 22px 20px 22px;
/*margin-bottom: 22px;*/
}
#mm-button-group li {
padding: 10px 0 0 0;
background-color: white;
}
.container-fluid.megamenusip {
display: flex;
flex-wrap: wrap;
top: 66px;
position: fixed;
left: 0;
width: 100vw;
height: calc(100% - 56px);
padding-left: 0;
padding-right: 0;
justify-content: stretch;
overflow-y: scroll;
}
header .fl-col-group.fl-col-group-equal-height.fl-col-group-custom-width {
display: -webkit-box;
display: -webkit-flex;
background: white;
position: fixed;
display: -ms-flexbox;
display: flex;
}
h4.row.mega-title {
padding-top: 11px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="header-top">
<!-- fontawesome uses <i> element for icons -->
<i class="fa fa-bars"></i>
<div class="container-fluid megamenusip">
<ul class="exo-menu">
<li class="mega-drop-down"><span>Product</span>
<div class="animated fadeIn mega-menu hide-block">
<div class="mm-mega-menu-wrap">
<div class="mega-menu-wrap">
<div class="row">
<div class="col-md-3">
<h4 class="row mega-title">Instant Digital Signage Platform</h4>
<ul class="cabeza">
<li>
<img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-features.svg" alt="features" class="mm-mm-icon" />Features <span class="mm-mm-subtext">See all the
features packed into this powerful digital signage platform.</span></li>
<li>
<img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-templates.svg" alt="templates" class="mm-mm-icon" />Templates <span class="mm-mm-subtext">1000’s of
professionally designed templates for every business.</span></li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title empty"> </h4>
<ul class="corporal">
<li>
<img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-how-it-works.svg" alt="templates" class="mm-mm-icon" />How it Works <span class="mm-mm-subtext">Find out
how easy it is to get digital signage for your business.</span></li>
<li>
<img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-industries.svg" alt="templates" class="mm-mm-icon" />Industries <span class="mm-mm-subtext">Digital
signage is perfect for any business with tailored solutions.</span></li>
</ul>
</div>
<div class="col-md-2">
<h4 class="row mega-title">Get the Player</h4>
<ul class="manos">
<li>Hardware</li>
<li>Player Software</li>
</ul>
</div>
<div class="col-md-4">
<h4 class="row mega-title">What is Instant Digital Signage?</h4>
<div class="mm-grid">
<div><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/what-is-digital-signage.jpg" alt="What is Instant Digital Signage?" style="width: 100%;" id="see-all-features" /></div>
<div><span class="mm-mm-flyout"> Get an overview of how easy it is to get digital
signage</span><br />
<button class="mm-mm-video">
<a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-play.svg"
alt="play video" title="play video"> Play Video</a>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="mega-drop-down"><span>Solutions</span>
<div class="animated fadeIn mega-menu hide-block">
<div class="mm-mega-menu-wrap">
<div class="mega-menu-wrap">
<div class="row">
<div class="col-md-3">
<h4 class="row mega-title">Industries</h4>
<ul class="cabeza">
<li>
<img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-hospitality.svg" alt="features" class="mm-mm-icon" />Hospitality <span class="mm-mm-subtext">Cafe,
Restaurant, Fast Food…</span></li>
<li>
<img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-retail.svg" alt="templates" class="mm-mm-icon" />Retail <span class="mm-mm-subtext">Cafe,
Restaurant, Fast Food…</span></li>
<li>
<img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-hair-beauty.svg" alt="templates" class="mm-mm-icon" />Hair & Beauty <span class="mm-mm-subtext">Hair
Salons, Nail Salon, Laser…</span></li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title empty"> </h4>
<ul class="cabeza">
<li>
<img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-medical.svg" alt="features" class="mm-mm-icon" />Medical <span class="mm-mm-subtext">Cafe,
Restaurant, Fast Food…</span></li>
<li>
<img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-fitness.svg" alt="templates" class="mm-mm-icon" />Fitness <span class="mm-mm-subtext">Cafe,
Restaurant, Fast Food…</span></li>
<li>
<img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-more.svg" alt="templates" class="mm-mm-icon" />More <span class="mm-mm-subtext">We have solutions
for all industries…</span></li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title">Use Cases</h4>
<ul class="manos">
<li>Digital Menu Boards</li>
<li>Window Signage</li>
<li>In-Store Signage</li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title">About Mandoe</h4>
<ul class="manos">
<li>Enterprise</li>
<li>Customers</li>
<li>Partner Program</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="mega-drop-down"><span>Resources</span>
<div class="animated fadeIn mega-menu hide-block">
<div class="mm-mega-menu-wrap">
<div class="mega-menu-wrap">
<div class="row">
<div class="col-md-3">
<h4 class="row mega-title">Learn about the product</h4>
<ul class="cabeza">
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title empty"> </h4>
<ul class="corporal">
<li></li>
</ul>
</div>
<div class="col-md-2">
<h4 class="row mega-title">Get in Touch</h4>
<ul class="manos">
<li>About</li>
<li>Contact</li>
<li>Support</li>
</ul>
</div>
<div class="col-md-4">
<h4 class="row mega-title">Learn how it works</h4>
<div class="mm-grid">
<div></div>
<div></div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="bg-white">Pricing</li>
</ul>
<ul id="mm-button-group">
<li class="mm-li-button" id="mm-mm-button-1">
</li>
<li class="mm-li-button" id="mm-mm-button-2">
<div class="fl-button-wrap mm-mm-button">
<a href="https://activate.mandoemedia.com" target="_self" class="fl-button" role="button">
<span class="fl-button-text">Log In</span>
</a>
</div>
</li>
</ul>
</div>
</div>
Description is in code comments. Put the .toggle-menu at appropriate level in your actual website code. Some CSS rules related to a.toggle-menu are redundant now. I haven't cleaned them from the code.
Ahh! I see you've already moved the toggle-menu on your website. I'll leave the answer for others. My implementation is a little bit different hope it helps.
The property overflow-y: scroll in your div container with the classes container-fluid megamenusip messes with your pseudo element. The content itself has nothing to do with it.
Please try this css in your code
.exo-menu.display a.toggle-menu::before {
display: inline-block;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-family: 'Font Awesome\ 5 Free';
content: '\f00d';
}
container-fluid-megamenusip in this class just remove overflow-y: scroll Propert
when i hover over the hamburger icon in 1000px mode the menu appears, but when i hover over menu it disappears. i have tried z-index and tricks related to position but cannot get the solution.
the issue is in 1000px because in full screen mode i can hover over sub-menu, but not on 1000px screen.
please help, thank you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ESPN</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./app.css">
</head>
<body>
<header class="header">
<div class="header__logo"><span>ESPN</span> / Media Distribution</div>
<div class="hamburger__icon__section">
</div>
<nav class="navbar">
<div class="navbar__items">
<div class="hamburger__icon"><div></div><div></div><div></div></div>
<ul class="navbar__lists__items">
<li class="navbar__hover__items">
Sports Programming
<ul class="navbar__lists__items__item">
<li>Boxing</li>
<li>Films</li>
<li>Fina</li>
<li>World Athletics</li>
<li>Ncaa</li>
<li>Pocker</li>
<li>Special Olympics</li>
<li>X Games</li>
</ul>
</li>
<li class="navbar__hover__items">Content Calender</li>
<li class="navbar__hover__items">
Contacts
<ul class="navbar__lists__items__item">
<li>Asia Pacific</li>
<li>Canada</li>
<li>Europe, Middle East and Africa</li>
<li>Latin America</li>
<li>Mexico</li>
</ul>
</li>
</ul>
<div class="search">
<input type="text" placeholder="Search">
<i class="fa fa-search"></i>
</input>
</div>
</div>
</nav>
</header>
<div class="video__section">
<div class="video__header__wrapper">
<video src="./6. Exercise Higher Order Functions.mp4" loop="true" autoplay="true" muted>
</video>
</div>
<div class="video__section__content">
<p><span>ESPN /</span> Media Distribution</p>
</div>
</div>
<div class="image__section">
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
</div>
<div class="copyright__section">
<div class="copyright__section__content">
<p>Copyright © 2020 ESPN, Inc. - All Rights Reserved | Terms of Use | Privacy Policy</p>
</div>
</div>
</body>
</html>
#import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght#600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
font-family: 'Fira Sans', sans-serif;
line-height: 1.6rem;
}
body {
font-size: 1.6rem;
}
.header {
display: flex;
justify-content: space-around;
align-items: stretch;
background-color:rgb(202, 8, 19);
color: #fff;
border-bottom: 1px solid #fff;
}
.header__logo {
font-size: 20px;
line-height: 50px;
user-select: none;
}
.header__logo span {
font-style: oblique;
}
.navbar__items {
display: flex;
justify-content: center;
align-items: stretch;
}
.navbar__lists__items {
display: flex;
justify-content: center;
align-items: stretch;
list-style: none;
}
.navbar__lists__items > li {
margin: 0 5px;
}
.navbar__lists__items__item {
width: 250px;
opacity: 0;
pointer-events: none;
position: absolute;
top: 59px;
left: 0px;
right: 0;
list-style: none;
transition: all 0.3s;
}
.navbar__lists__items__item li {
cursor: pointer;
border: 1px solid #666;
background-color: #fff;
line-height: 1.6rem;
}
.navbar__lists__items__item li a:hover {
background-color: #666666;
color: #fff;
}
.navbar__lists__items__item li a {
padding: 10px 20px;
display: block;
text-decoration: none;
color: #666666;
text-transform: uppercase;
}
.navbar__hover__items {
display: flex;
justify-content: center;
align-items: stretch;
position: relative;
line-height: 50px;
z-index: 1;
}
.navbar__hover__items > a {
margin-right: 5px;
}
.navbar__lists__items .navbar__hover__items:nth-child(odd)::after {
content: ' \02C5';
}
.navbar__lists__items > li > a {
text-decoration: none;
color: #fff;
text-transform: uppercase;
}
.navbar__hover__items:nth-child(2n+1):hover > a {
background-color: #fff;
color: rgb(202, 8, 19);
}
.navbar__hover__items:nth-child(2n+1):hover .navbar__lists__items__item {
opacity: 1;
pointer-events: all;
transform: translateY(-10px);
}
.search {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.search input {
border: 1px solid #fff;
outline: none;
border-radius: 5px;
padding: 5px;
}
.search i {
position: absolute;
color: #000;
top: 50%;
left: 95%;
transform: translate(-95%, -50%);
margin-right: -30px;
}
.video__section {
width: 100%;
height: 100%;
position: relative;
color: #fff;
font-size: 40px;
}
.video__header__wrapper {
width: 100%;
height: 100%;
}
.video__header__wrapper video {
width: 100%;
height: 100%;
}
.video__section__content {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -40%);
user-select: none;
}
.video__section__content span {
font-style: oblique;
}
.image__section {
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
.image__section .image {
flex-basis: 25%;
overflow: hidden;
position: relative;
height: 200px;
width: 150px;
}
.image__section .image img {
width: 100%;
height: 100%;
cursor: pointer;
transform: scale(1.1);
transition: all 0.3s;
}
.overlay {
position: absolute;
right: 0;
left: 0;
bottom: 100%;
background-color: #000;
width: 100%;
overflow: hidden;
opacity: 0.7;
transition: 0.3s ease;
}
.image:hover img {
transform: scale(1);
}
.image:hover > .overlay {
height: 100%;
bottom: 0;
}
.copyright__section {
font-size: 10px;
background-color: rgb(202, 8, 19);
color: #fff;
}
.copyright__section__content {
margin-top: 0;
margin-bottom: 0;
margin-left: 30px;
}
#media (max-width: 1000px) {
.header {
padding: 0 10px;
}
.navbar__items {
position: relative;
}
.navbar__lists__items {
display: none;
position: absolute;
top: 50px;
right: 50px;
width: 300px;
padding: 0 10px;
background-color: #fff;
font-family: 'Lato',Helvetica,Arial,Lucida,sans-serif;
z-index: 1;
box-shadow: 0 0 0.5px 1px rgb(255, 255, 255, 0.7);
}
.navbar__lists__items > li > a {
color: #000;
}
.navbar__lists__items .navbar__hover__items:nth-child(odd)::after {
content: "";
display: block;
}
.navbar__hover__items {
display: block;
color: #000;
}
.navbar__lists__items__item {
display: none;
}
.video__section {
font-size: 35px;
}
.search {
height: 50px;
}
.hamburger__icon__section {
display: flex;
justify-content: flex-end;
flex: 2;
}
.hamburger__icon {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
margin-right: 10px;
cursor: pointer;
}
.hamburger__icon > div {
width: 25px;
height: 2px;
margin: 3px 0;
background-color: #fff;
}
.hamburger__icon:hover + .navbar__lists__items {
display: block;
}
}
You could handle the show/hide using javascript instead of css because the way you do it right now whenever the browser detects your cursor is no longer on top of the hamburger_buttton it will hide your menu so it would be better to handle the event with a click instead. Or you can check this answer. Hope it helps.
let navbarListItems = document.querySelector('.navbar__lists__items');
let hamburgetButton = document.querySelector('.hamburger__icon');
hamburgetButton.onclick = function () {
navbarListItems.style.display = navbarListItems.style.display === 'none' ? 'block' : 'none';
}
#import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght#600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
font-family: 'Fira Sans', sans-serif;
line-height: 1.6rem;
}
body {
font-size: 1.6rem;
}
.header {
display: flex;
justify-content: space-around;
align-items: stretch;
background-color: rgb(202, 8, 19);
color: #fff;
border-bottom: 1px solid #fff;
}
.header__logo {
font-size: 20px;
line-height: 50px;
user-select: none;
}
.header__logo span {
font-style: oblique;
}
.navbar__items {
display: flex;
justify-content: center;
align-items: stretch;
}
.navbar__lists__items {
display: flex;
justify-content: center;
align-items: stretch;
list-style: none;
}
.navbar__lists__items>li {
margin: 0 5px;
}
.navbar__lists__items__item {
width: 250px;
opacity: 0;
pointer-events: none;
position: absolute;
top: 59px;
left: 0px;
right: 0;
list-style: none;
transition: all 0.3s;
}
.navbar__lists__items__item li {
cursor: pointer;
border: 1px solid #666;
background-color: #fff;
line-height: 1.6rem;
}
.navbar__lists__items__item li a:hover {
background-color: #666666;
color: #fff;
}
.navbar__lists__items__item li a {
padding: 10px 20px;
display: block;
text-decoration: none;
color: #666666;
text-transform: uppercase;
}
.navbar__hover__items {
display: flex;
justify-content: center;
align-items: stretch;
position: relative;
line-height: 50px;
z-index: 1;
}
.navbar__hover__items>a {
margin-right: 5px;
}
.navbar__lists__items .navbar__hover__items:nth-child(odd)::after {
content: ' \02C5';
}
.navbar__lists__items>li>a {
text-decoration: none;
color: #fff;
text-transform: uppercase;
}
.navbar__hover__items:nth-child(2n+1):hover>a {
background-color: #fff;
color: rgb(202, 8, 19);
}
.navbar__hover__items:nth-child(2n+1):hover .navbar__lists__items__item {
opacity: 1;
pointer-events: all;
transform: translateY(-10px);
}
.search {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.search input {
border: 1px solid #fff;
outline: none;
border-radius: 5px;
padding: 5px;
}
.search i {
position: absolute;
color: #000;
top: 50%;
left: 95%;
transform: translate(-95%, -50%);
margin-right: -30px;
}
.video__section {
width: 100%;
height: 100%;
position: relative;
color: #fff;
font-size: 40px;
}
.video__header__wrapper {
width: 100%;
height: 100%;
}
.video__header__wrapper video {
width: 100%;
height: 100%;
}
.video__section__content {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -40%);
user-select: none;
}
.video__section__content span {
font-style: oblique;
}
.image__section {
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
.image__section .image {
flex-basis: 25%;
overflow: hidden;
position: relative;
height: 200px;
width: 150px;
}
.image__section .image img {
width: 100%;
height: 100%;
cursor: pointer;
transform: scale(1.1);
transition: all 0.3s;
}
.overlay {
position: absolute;
right: 0;
left: 0;
bottom: 100%;
background-color: #000;
width: 100%;
overflow: hidden;
opacity: 0.7;
transition: 0.3s ease;
}
.image:hover img {
transform: scale(1);
}
.image:hover>.overlay {
height: 100%;
bottom: 0;
}
.copyright__section {
font-size: 10px;
background-color: rgb(202, 8, 19);
color: #fff;
}
.copyright__section__content {
margin-top: 0;
margin-bottom: 0;
margin-left: 30px;
}
#media (max-width: 1000px) {
.header {
padding: 0 10px;
}
.navbar__items {
position: relative;
}
.navbar__lists__items {
display: none;
position: absolute;
top: 50px;
right: 50px;
width: 300px;
padding: 0 10px;
background-color: #fff;
font-family: 'Lato', Helvetica, Arial, Lucida, sans-serif;
z-index: 1;
box-shadow: 0 0 0.5px 1px rgb(255, 255, 255, 0.7);
}
.navbar__lists__items>li>a {
color: #000;
}
.navbar__lists__items .navbar__hover__items:nth-child(odd)::after {
content: "";
display: block;
}
.navbar__hover__items {
display: block;
color: #000;
}
.navbar__lists__items__item {
display: none;
}
.video__section {
font-size: 35px;
}
.search {
height: 50px;
}
.hamburger__icon__section {
display: flex;
justify-content: flex-end;
flex: 2;
}
.hamburger__icon {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
margin-right: 10px;
cursor: pointer;
}
.hamburger__icon>div {
width: 25px;
height: 2px;
margin: 3px 0;
background-color: #fff;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ESPN</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./app.css">
</head>
<body>
<header class="header">
<div class="header__logo"><span>ESPN</span> / Media Distribution</div>
<div class="hamburger__icon__section">
</div>
<nav class="navbar">
<div class="navbar__items">
<div class="hamburger__icon">
<div></div>
<div></div>
<div></div>
</div>
<ul class="navbar__lists__items">
<li class="navbar__hover__items">
Sports Programming
<ul class="navbar__lists__items__item">
<li>Boxing</li>
<li>Films</li>
<li>Fina</li>
<li>World Athletics</li>
<li>Ncaa</li>
<li>Pocker</li>
<li>Special Olympics</li>
<li>X Games</li>
</ul>
</li>
<li class="navbar__hover__items">Content Calender</li>
<li class="navbar__hover__items">
Contacts
<ul class="navbar__lists__items__item">
<li>Asia Pacific</li>
<li>Canada</li>
<li>Europe, Middle East and Africa</li>
<li>Latin America</li>
<li>Mexico</li>
</ul>
</li>
</ul>
<div class="search">
<input type="text" placeholder="Search">
<i class="fa fa-search"></i>
</input>
</div>
</div>
</nav>
</header>
<div class="video__section">
<div class="video__header__wrapper">
<video src="./6. Exercise Higher Order Functions.mp4" loop="true" autoplay="true" muted>
</video>
</div>
<div class="video__section__content">
<p><span>ESPN /</span> Media Distribution</p>
</div>
</div>
<div class="image__section">
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
</div>
<div class="copyright__section">
<div class="copyright__section__content">
<p>Copyright © 2020 ESPN, Inc. - All Rights Reserved | Terms of Use | Privacy Policy</p>
</div>
</div>
</body>
</html>
Simply add this to your selector :
, .navbar__lists__items:hover
The full rule should look like this :
.hamburger__icon:hover + .navbar__lists__items, .navbar__lists__items:hover {
display: block;
}
This is happening since the scope of hover effect is only limited to the hamburger icon and as soon as the hover scope is left, the css does not execute for it so in order to stabilize the menu items I have added hover scope to that <ul> too.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
font-family: 'Fira Sans', sans-serif;
line-height: 1.6rem;
}
body {
font-size: 1.6rem;
}
.header {
display: flex;
justify-content: space-around;
align-items: stretch;
background-color:rgb(202, 8, 19);
color: #fff;
border-bottom: 1px solid #fff;
}
.header__logo {
font-size: 20px;
line-height: 50px;
user-select: none;
}
.header__logo span {
font-style: oblique;
}
.navbar__items {
display: flex;
justify-content: center;
align-items: stretch;
}
.navbar__lists__items {
display: flex;
justify-content: center;
align-items: stretch;
list-style: none;
}
.navbar__lists__items > li {
margin: 0 5px;
}
.navbar__lists__items__item {
width: 250px;
opacity: 0;
pointer-events: none;
position: absolute;
top: 59px;
left: 0px;
right: 0;
list-style: none;
transition: all 0.3s;
}
.navbar__lists__items__item li {
cursor: pointer;
border: 1px solid #666;
background-color: #fff;
line-height: 1.6rem;
}
.navbar__lists__items__item li a:hover {
background-color: #666666;
color: #fff;
}
.navbar__lists__items__item li a {
padding: 10px 20px;
display: block;
text-decoration: none;
color: #666666;
text-transform: uppercase;
}
.navbar__hover__items {
display: flex;
justify-content: center;
align-items: stretch;
position: relative;
line-height: 50px;
z-index: 1;
}
.navbar__hover__items > a {
margin-right: 5px;
}
.navbar__lists__items .navbar__hover__items:nth-child(odd)::after {
content: ' \02C5';
}
.navbar__lists__items > li > a {
text-decoration: none;
color: #fff;
text-transform: uppercase;
}
.navbar__hover__items:nth-child(2n+1):hover > a {
background-color: #fff;
color: rgb(202, 8, 19);
}
.navbar__hover__items:nth-child(2n+1):hover .navbar__lists__items__item {
opacity: 1;
pointer-events: all;
transform: translateY(-10px);
}
.search {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.search input {
border: 1px solid #fff;
outline: none;
border-radius: 5px;
padding: 5px;
}
.search i {
position: absolute;
color: #000;
top: 50%;
left: 95%;
transform: translate(-95%, -50%);
margin-right: -30px;
}
.video__section {
width: 100%;
height: 100%;
position: relative;
color: #fff;
font-size: 40px;
}
.video__header__wrapper {
width: 100%;
height: 100%;
}
.video__header__wrapper video {
width: 100%;
height: 100%;
}
.video__section__content {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -40%);
user-select: none;
}
.video__section__content span {
font-style: oblique;
}
.image__section {
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
.image__section .image {
flex-basis: 25%;
overflow: hidden;
position: relative;
height: 200px;
width: 150px;
}
.image__section .image img {
width: 100%;
height: 100%;
cursor: pointer;
transform: scale(1.1);
transition: all 0.3s;
}
.overlay {
position: absolute;
right: 0;
left: 0;
bottom: 100%;
background-color: #000;
width: 100%;
overflow: hidden;
opacity: 0.7;
transition: 0.3s ease;
}
.image:hover img {
transform: scale(1);
}
.image:hover > .overlay {
height: 100%;
bottom: 0;
}
.copyright__section {
font-size: 10px;
background-color: rgb(202, 8, 19);
color: #fff;
}
.copyright__section__content {
margin-top: 0;
margin-bottom: 0;
margin-left: 30px;
}
#media (max-width: 1000px) {
.header {
padding: 0 10px;
}
.navbar__items {
position: relative;
}
.navbar__lists__items {
display: none;
position: absolute;
top: 50px;
right: 50px;
width: 300px;
padding: 0 10px;
background-color: #fff;
font-family: 'Lato',Helvetica,Arial,Lucida,sans-serif;
z-index: 1;
box-shadow: 0 0 0.5px 1px rgb(255, 255, 255, 0.7);
}
.navbar__lists__items > li > a {
color: #000;
}
.navbar__lists__items .navbar__hover__items:nth-child(odd)::after {
content: "";
display: block;
}
.navbar__hover__items {
display: block;
color: #000;
}
.navbar__lists__items__item {
display: none;
}
.video__section {
font-size: 35px;
}
.search {
height: 50px;
}
.hamburger__icon__section {
display: flex;
justify-content: flex-end;
flex: 2;
}
.hamburger__icon {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
margin-right: 10px;
cursor: pointer;
}
.hamburger__icon > div {
width: 25px;
height: 2px;
margin: 3px 0;
background-color: #fff;
}
/* added another line here */
.hamburger__icon:hover + .navbar__lists__items,
.hamburger__icon + .navbar__lists__items:hover{
display: block;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ESPN</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./app.css">
</head>
<body>
<header class="header">
<div class="header__logo"><span>ESPN</span> / Media Distribution</div>
<div class="hamburger__icon__section">
</div>
<nav class="navbar">
<div class="navbar__items">
<div class="hamburger__icon"><div></div><div></div><div></div></div>
<ul class="navbar__lists__items">
<li class="navbar__hover__items">
Sports Programming
<ul class="navbar__lists__items__item">
<li>Boxing</li>
<li>Films</li>
<li>Fina</li>
<li>World Athletics</li>
<li>Ncaa</li>
<li>Pocker</li>
<li>Special Olympics</li>
<li>X Games</li>
</ul>
</li>
<li class="navbar__hover__items">Content Calender</li>
<li class="navbar__hover__items">
Contacts
<ul class="navbar__lists__items__item">
<li>Asia Pacific</li>
<li>Canada</li>
<li>Europe, Middle East and Africa</li>
<li>Latin America</li>
<li>Mexico</li>
</ul>
</li>
</ul>
<div class="search">
<input type="text" placeholder="Search">
<i class="fa fa-search"></i>
</input>
</div>
</div>
</nav>
</header>
<div class="video__section">
<div class="video__header__wrapper">
<video src="./6. Exercise Higher Order Functions.mp4" loop="true" autoplay="true" muted>
</video>
</div>
<div class="video__section__content">
<p><span>ESPN /</span> Media Distribution</p>
</div>
</div>
<div class="image__section">
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
</div>
<div class="copyright__section">
<div class="copyright__section__content">
<p>Copyright © 2020 ESPN, Inc. - All Rights Reserved | Terms of Use | Privacy Policy</p>
</div>
</div>
</body>
</html>
Hey friends I'm writing the media query for the footer of my website. I'm starting on a max-width of 425px. The first thing that gets messed up when i shrink the screen to this size is shown here - The red line doesn't add up, so i adjust and fix it, but when i shrink the screen to a max-width of 375px the red line moves again, so I create another media query with a max-width of 375px and adjust the line and fix it at 375, but now when i move the screen back up to 425 that line moves again? completely ignoring that style. So i have to adjust it again. But this then messes it up at 375??? What's happening? It's back and forth plz help -Example below
1st thing I do when I resize the screen to 425px and see the problem(as shown in the picture
`#media screen and (max-width: 425px) {
.social .inner:after {
margin-top: -40px;
}
}`
The above code aligns the red line where it needs to be when the screen has a max width of 425px. However when I shrink the screen to 375px the line moves again so maybe I do something like this
`#media screen and (max-width: 375px) {
.social .inner:after {
margin-top: -38px;
}
}`
This fixes at 375px. What now happens though is when i go back to 425px the line moves again? and then if that wasn't enough if you shrink down to 375px its misaligned??? Try it out and see
html, body {
margin: 0;
padding: 0;
}
/*---HEADER---*/
header {
background-image: url(../img/contact.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height: 65vh;
}
.contact-wrapper{
width: 100%;
height: 65vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.2);
}
header h1 {
color: white;
font-size: 5rem;
font-family: 'Arvo';
margin: 0;
}
/*---NAV---*/
nav {
background-color: white;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
left: 0;
z-index: 2;
box-shadow: 0px 0px 100px grey;
}
li a {
text-decoration-line: none;
color: rgba(102,102,102,0.75);
}
ul {
margin-right: 30px;
margin-top: 25px;
}
li {
display: inline-block;
font-size: 1.55rem;
margin-right: 20px;
font-family: 'Rajdhani';
}
li a:hover {
cursor: pointer;
color: #1a1a1a;
transition: all 0.7s ease;
}
.after:after {
position: relative;
left: 12px;
top: 2px;
display: inline-block;
content: "";
width: 1px;
height: 20px;
background-color: rgba(102,102,102,0.25);
}
.logo {
color: red;
font-size: 3.7rem;
margin: 10px;
opacity: 1;
margin-left: 30px;
}
/*---MAIN---*/
.contact h2 {
font-family: 'Rajdhani';
color: rgba(102,102,102, 0.85);
font-size: 3rem;
text-align: center;
margin-top: 20px;
margin-bottom: 10px;
}
.contact h2:after {
content: '';
width: 18px;
height: 2px;
background-color: red;
display: inline-block;
margin-left: 5px;
margin-bottom: 13px;
}
.contact h2:before {
content: '';
width: 18px;
height: 2px;
background-color: red;
display: inline-block;
margin-right: 5px;
margin-bottom: 13px;
}
.quote-info {
display: flex;
flex-direction: column;
width: 30%;
margin: 20px;
background-color: rgba(102, 102, 102, 0.2);
margin-bottom: 15px;
}
.quote-info input, .quote-info textarea {
width: 85%;
margin-left: auto;
margin-right: auto;
margin-bottom: 17px;
font-family: 'Rajdhani';
font-size: 1.2rem;
}
.quote-info p {
color: rgb(102, 102, 102);
text-align: center;
font-size: 1.45rem;
font-weight: bolder;
font-family: 'Rajdhani';
margin-bottom: 0;
}
.quote-info .send-quote {
width: 85%;
background-color: red;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
font-size: 1.2rem;
color: white;
font-family: 'Rajdhani';
border: none;
outline: none;
padding: 5px;
}
.send-quote:hover {
transition: all 0.5s ease;
background-color: #cc0000;
}
textarea {
resize: none;
}
hr {
width: 100%;
color: rgba(102, 102, 102);
}
.contact .container {
display: flex;
}
.contact-info h3 {
color: rgb(102, 102, 102);
font-size: 2.3rem;
margin-left: 25px;
font-family: 'Rajdhani';
margin-bottom: 0;
}
.contact-info h3:after {
content: '';
height: 1.5px;
display: inline-block;
background-color: grey;
width: 340%;
position: relative;
top: -30px;
}
.contact-numbers div {
margin-left: 30px;
font-family: 'Rajdhani';
font-size: 1.35rem;
}
.contact-numbers i {
color: red;
}
/*---FOOTER---*/
.footer .wrapper {
display: flex;
}
.footer div {
display: inline-block;
flex-basis: 33.33%;
font-family: 'Rajdhani';
color: rgba(102,102,102, 1);
margin-top: 5px;
}
.footer h1 {
font-size: 2rem;
margin-top: 15px;
}
.footer .inner {
margin-left: 55px;
}
.social .inner {
margin-left: 45px;
}
.contact .inner {
margin-left: 35px;
}
.footer .inner:before {
display: inline-block;
content: '';
width: 27.1%;
height: 2px;
background-color: rgba(102,102,102, 0.6);
position: absolute;
margin-top: 54px;
}
.links .inner:after {
content: '';
width: 10.5%;
height: 2px;
background-color: red;
position: absolute;
margin-top: -151px;
}
.social .inner:after {
content: '';
width: 5.8%;
height: 2px;
background-color: red;
position: absolute;
margin-top: -171px;
}
.contact .inner:after {
content: '';
width: 7.5%;
height: 2px;
background-color: red;
position: absolute;
margin-top: -174.5px;
}
.wrap:before {
content: '';
width: 100px;
height: 2px;
background-color: red;
position: absolute;
margin-top: 55px;
}
.links a {
display: block;
text-decoration-line: none;
color: rgba(102,102,102, 1);
font-size: 1.2rem;
position: relative;
top: -10px;
transition: color 0.4s ease;
}
.links a:hover {
color: red;
}
.contact p {
position: relative;
top: -10px;
}
.social i {
font-size: 1.7rem;
margin-right: 5px;
position: relative;
top: -20px;
color: rgba(102,102,102, 0.7);
transition: all 0.4s ease;
}
.social i:hover {
color: red;
cursor: pointer;
}
#msg {
margin-top: -15px;
}
.footer-textarea {
background-color: rgba(102,102,102, 0.2);
outline: none;
color: rgba(102,102,102, 1);
resize: none;
width: 102%;
}
.footer button {
position: absolute;
margin-left: 23.2%;
margin-top: -40px;
border: none;
font-family: 'Rajdhani';
font-size: 1.2rem;
transition: all ease 0.4s;
outline: none;
}
button:hover {
cursor: pointer;
color: red;
}
.dark {
color: red;
}
.copyright {
position: absolute;
background-color: white;
text-align: center;
width: 100%;
margin-bottom: 0;
font-size: 1.2rem;
padding-bottom: 4px;
}
/*------MEDIA-QUERIES------*/
#media screen and (max-width: 425px) {
/*---NAV---*/
.logo {
font-size: 2.5rem;
margin-left: 10px;
}
ul {
margin: 0;
padding: 0;
}
nav li {
display: none;
}
.ham-menu {
width: 55px;
height: 55px;
position: fixed;
right: 0;
top: 4px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.m1, .m2, .m3 {
border-radius: 4px;
margin: 4px;
width: 35px;
height: 3px;
background-color: red;
float: left;
}
/*---MAIN---*/
header h1 {
font-size: 3rem;
}
.quote-info {
width: 90%;
}
.quote-info p {
position: relative;
top: 2px;
}
.contact .container {
flex-direction: column;
}
.contact-info h3 {
margin-top: 0;
}
.contact-info h3:after {
width: 95%;
}
.contact-numbers {
margin-top: -15px;
}
/*---FOOTER---*/
.footer .wrapper {
display: flex;
flex-direction: column;
}
.footer div {
margin: 0;
}
.footer h1 {
font-size: 2rem;
margin-top: 10px;
}
.footer .inner {
margin: 0;
}
.footer .inner:before {
display: inline-block;
content: '';
width: 100%;
height: 2px;
background-color: rgba(102,102,102, 0.6);
position: absolute;
margin-top: 48px;
}
.links .inner:after {
width: 33%;
margin-top: -152px;
}
.social .inner {
position: relative;
top: -10px;
}
.social .inner:after {
content: '';
width: 18%;
height: 2px;
background-color: red;
position: absolute;
left: 0;
margin-top: -40px;
}
.contact .inner:after {
content: '';
width: 24%;
height: 2px;
background-color: red;
position: absolute;
margin-top: -148px;
}
.links a {
margin-left: 5px;
}
.social h1 {
margin-bottom: 10px;
}
#msg {
font-size: 1rem;
margin-bottom: 0;
margin-right: 25.5%;
position: absolute;
right: 5px;
top: 80px;
}
.footer button {
right: 9.25%;
margin-top: 0.2px;
}
.social i {
font-size: 1.8rem;
margin-right: 2px;
position: relative;
top: -5px;
left: 5px;
color: rgba(102,102,102, 0.7);
transition: all 0.4s ease;
}
.footer-textarea {
width: 88.5%;
margin-top: 5px;
margin-left: 5px;
}
.contact p {
margin: 5px;
font-size: 1.2rem;
}
.copyright {
background-color: red;
}
.copyright span {
color: white;
background-color: red;
}
}
#media screen and (max-width: 375px) {
.social .inner:after {
margin-top: -36.5px;
width: 20%;
}
.links .inner:after {
width: 37%;
}
.contact .inner:after {
width: 27%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, intitial-scale=1.0">
<title>Contact | Kane Concrete & Construction LLC</title>
<link rel="stylesheet" href="../css/contact.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Arvo|Bitter|Lato|Montserrat|Noto+Sans|Open+Sans|Poppins|Roboto|Sarabun|Ubuntu" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abel|Asap|Krub|Oxygen|Rajdhani|Staatliches|Varela+Round" rel="stylesheet">
</head>
<body>
<header>
<div class="contact-wrapper">
<nav>
<div class="logo">
<i class="fab fa-accusoft"></i>
</div>
<div class="nav">
<div class="ham-menu">
<div class="m1"></div>
<div class="m2"></div>
<div class="m3"></div>
</div>
<ul>
<li class="after">Home</li>
<li class="after">About</li>
<li class="after">Services</li>
<li class="after">Careers</li>
<li>Contact</li>
</ul>
</div>
</nav>
<h1>Contact Us</h1>
</div>
</header>
<section class="contact">
<h2>Get in touch</h2>
<div class="container">
<div class="quote-info">
<p>Get a Quote</p>
<input type="text" placeholder="First Name">
<input type="text" placeholder="Last Name">
<input type="text" placeholder="Phone Number">
<input type="text" placeholder="Email">
<textarea name="project-details" id="" cols="40" rows="7" placeholder="Give us the specifics on your project"></textarea>
<button class="send-quote">Send</button>
</div>
<div class="contact-info">
<h3>Contact info</h3>
<div class="contact-numbers">
<div>
<i class="fas fa-phone"></i>
<p>(208)546-7827 -Matt</p>
<i class="fas fa-phone"></i>
<p>(208)546-7827 -Keegan</p>
</div>
<div>
<i class="fas fa-envelope"></i>
<p>P.O. Box 50860 IF, ID 83405</p>
<i class="fas fa-at"></i>
<p>KaneConcrete#fake.com</p>
</div>
</div>
</div>
</div>
</section>
<hr>
<section class="footer">
<div class="wrapper">
<div class="links">
<div class="inner">
<h1>Quick Links</h1>
Home
About
Services
Careers
Contact
</div>
</div>
<div class="social">
<div class="inner">
<h1>Social</h1>
<i class="fab fa-linkedin"></i>
<i class="fab fa-facebook"></i>
<i class="fab fa-twitter-square"></i>
<p id="msg">Send some feedback!</p>
<button name="msg">Send</button>
<textarea name="msg" class="footer-textarea" cols="45" rows="5" placeholder="type here..."></textarea>
</div>
</div>
<div class="contact">
<div class="inner" class="wrap">
<h1>Contact</h1>
<p>(208)546-7827 - <span class="dark">Matt</span></p>
<p>(208)546-7827 - <span class="dark">Keegan</span></p>
<p><span class="dark">Address</span> - P.O. Box 50860 IF, ID 83405</p>
<p><span class="dark">Email</span> - KaneConcrete#fake.com</p>
</div>
</div>
</div>
<div class="copyright"><span>© 2019 - Kane Concrete & Construction | ALL RIGHTS RESERVED</span></div>
</section>
</body>
</html>
I couldn't reproduce the problem here (or I didn't understand it completely). But let me point some possible problems with the CSS code there:
To create the red lines, you create an element after the content of the sections. To adjust the position, you are setting the margin to a negative value. This is problematic because the size of the section is not constant, so, the red line will have a sort of undefined position (actually it is bottom of section minus some pixels).
You can set the margin to 0 to verify how the size of the section is volatile (it will change when a line wraps, if the font changes, maybe from browser to browser, etc). I recommend instead using a natural flow, and add a line where its position is. A simple example could be:
header {
width: 300px;
}
h1 {
margin: 0;
margin-bottom: 10px;
}
.line {
height: 2px;
background: black;
}
.red-line {
height: 2px;
background: red;
width: 30%;
margin-top: -2px;
}
<header>
<h1>Quick Links</h1>
<div class="line"></div>
<div class="red-line"></div>
</header>
The negative margin here works because .red-line will always be 2px below .line.
Cya!
I've just upgraded my site to include responsive styles, but when I uploaded the changes, the fallback (original / fluid) styles don't work. It just uses the highest min-width responsive styles. What did I do wrong?
My site is http://jcwebandgraphic.com/
HTML
<body>
<!-- #nav-bkg: Nav BKG Image Scrollstop -->
<div id='nav-bkg' class='scroll'>
<img src='images/dandelion-nav-color.png'>
<img src='images/dandelion-nav.png'>
</div> <!-- Closes #nav-bkg -->
<!-- nav: Top Nav -->
<nav role='navigation'>
<ul>
<li><a href='#services-section'>Services</a></li>
<!--
<li><a href='#products-section'>Products</a></li>
-->
<li><a href='#work-section'>Work</a></li>
<li><a href='#contact-section'>Contact</a></li>
</ul>
</nav> <!-- Closes Top Nav -->
<!-- #logo: Logo -->
<div id='logo-container'>
<img id='logo' src='images/logo2.png'>
</div> <!-- Closes #logo -->
<!-- #page-wrapper Page Wrapper -->
<div id='page-wrapper' role='main'>
<!-- .scroll: Site BKG Image Scrollstop -->
<div class='scroll'>
<img src='images/dandelion-color.jpg'>
<img src='images/dandelion-greyscale.jpg'>
</div> <!-- Closes .scroll -->
<!-- #about-section: About Me-->
<section id='about-section'>
<h2 class='subtitle'>About Us</h2>
<p>
Welcome! We're a powerful little design house based in the beautiful Pacific Northwest. We specialize in web development, graphic design, hosting, and so much more. Our sophisticated aesthetic and versatile designs are perfect for all your modern web, printing, and signage needs. Check out our remarkably affordable rates below or request a quote for our best pricing option.
</p>
</section> <!-- Closes #about-section -->
<!-- #services-section: Service Types Offered -->
<section id='services-section' class='main-section-styles'>
<h2 class='subtitle'>Services</h2>
<!-- .fa-icon: Large FA Icon Container -->
<div id='fa-icon'>
<div class='icon'>
<i class='fa fa-laptop icon-fixed-width fa-3x'></i>
<h5>Web</h5>
</div>
<div class='icon'>
<i class='fa fa-magic icon-fixed-width fa-3x'></i>
<h5>Graphic</h5>
</div>
<div class='icon'>
<i class='fa fa-connectdevelop icon-fixed-width fa-3x'></i>
<h5>Hosting</h5>
</div>
<div class='icon'>
<i class='fa fa-wrench icon-fixed-width fa-3x'></i>
<h5>IT</h5>
</div>
</div> <!-- Closes .fa-icon -->
</section> <!-- Closes #services-section -->
<!-- #specials: Specials -->
<section id='specials' class='main-section-styles'>
<h2 class='subtitle'>Specials</h2>
<div class='offer'>
<p>
Static Single-Page Site just $99!
</p>
<p>
2 Years of Hosting + IT just $75!
</p>
<br>
<span>
Offers end November 1st, 2015
</span>
</div>
</section> <!-- Closes #specials -->
<!-- #work-section: Portfolio Examples -->
<section id='work-section' class='main-section-styles'>
<h2 class='subtitle'>Work</h2>
<ul class='slider'>
<img src='images/africanbn.png' alt='Professional Project: The African Bridge Project'>
<img src='images/air.jpg' alt='Professional Project: Audio Information Radio'>
<img src='images/bird.jpg' alt='Student Project: 13 Ways of Looking at a Blackbird'>
<img src='images/dana.jpg' alt='Professional Project: Dana Chapman Massage'>
<img src='images/ethics.jpg' alt='Student Project: Tools for Ethical Dilemmas'>
<img src='images/placestory.jpg' alt='Student Project: This is Me'>
<img src='images/sote.jpg' alt='Professional Project: Spa of the Earth'>
<img src='images/zavaah.jpg' alt='Student Project: Zava'ah, An Ethical Will'>
</ul>
</section>
<!-- #contact-section: Contact Form & Info -->
<section id='contact-section' class='main-section-styles'>
<h2 class='subtitle'>Contact</h2>
<br><br>
Phone: <a href='callto:+13602810359'> 360-281-0359</a>
<address>Email: <a href='mailto:info#jcwebandgraphic.com'> info#jcwebandgraphic.com</a></address>
<br>
<div id='contactform'>
<form action='contact.php' method='post'>
<div class='contact-wrap'>
<p>Your Name :<input class='type' type='text' name='cf_name'></p>
<p>Your E-mail:<input class='type' type='text' name='cf_email'></p>
<p class='antispam'>Spam-Bots!:<input class='type' type='text' name='url' placeholder='** Leave Blank **'></p>
</div>
<div class='contact-wrap'>
<p id='message'>
Message:
<textarea name='cf_message'></textarea>
<input class='button' type='submit' value='Send'>
<input class='button' type='reset' value='Clear'>
</p>
</div>
</form>
</div> <!-- Closes #contactform -->
</section> <!-- Closes #contact-section -->
<footer>
<p id='copyright'>
© JC Web & Graphic 2015
</p>
<!--
<p>
<a href='resume.pdf' target='_blank'>Download Resume</a>
</p>
-->
</footer>
</div> <!-- Closes #page-wrapper -->
</body>
</html>
CSS Fallback
#media screen and (min-width: 1000px) {
body {
width: 100%;
background-color: #696773;
}
footer {
width: 100%;
position: relative;
bottom: 0;
left: 0;
}
/* **************************************** Menu Styles **************************************** */
nav {
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 600;
}
nav ul {
width: 100%;
}
nav ul li {
width: 30.333%;
padding: 1.5%;
text-align: center;
text-decoration: none;
list-style-type: none;
float: left;
}
nav ul li a {
width: 98%;
padding: 2% 7%;
text-decoration: none;
color: #ffffff;
}
nav ul li a:hover {
color: #ffffff;
outline: 1px solid #ffffff;
}
#nav-bkg {
z-index: 500;
}
/* **************************************** Logo Styles **************************************** */
#logo-container {
width: 20%;
margin: 20% 40% 3% 40%;
}
#logo {
width: 100%;
}
/* ************************************* Scrollstop Styles ************************************* */
.scroll {
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
.scroll img {
width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.scroll img:first-child {
opacity: 1;
}
.scroll img:nth-child(2) {
opacity: 1;
transition-duration: 1s;
transition-timing-function: ease;
}
/* ************************************ Main Content Styles ************************************ */
section {
width: 90%;
margin: 0;
margin-top: 1%;
padding: 5%;
background-color: #ffffff;
color: #696773;
overflow: auto;
}
.subtitle {
font-family: 'hipstelveticaultralight';
font-size: 1.9em;
font-weight: 200;
color: #50E5C0;
}
/* Services Section Styles */
#services-section {
width: 34%;
height: 350px;
margin: 2% 1% 2% 5%;
background-color: #696773;
float: left;
opacity: .95;
}
#services-section .subtitle {
margin-bottom: 15%;
font-size: 1.5em;
color: #ffffff;
}
#services-section #fa-icon {
width: 100%;
text-align: center;
}
#services-section #fa-icon .icon {
width: 25%;
color: #f26da5;
float: left;
}
#services-section #fa-icon i {
padding-bottom: 15%;
}
#services-section h5 {
margin-top: 10%;
font-size: .75em;
text-align: center;
color: #ffffff;
border-top: 1px solid #ffffff;
}
/* Specials Section Styles */
#specials {
width: 34%;
height: 350px;
margin: 2% 5% 2% 1%;
background-color: #696773;
color: #ffffff;
float: right;
opacity: .95;
}
#specials .subtitle {
margin-bottom: 15%;
font-size: 1.5em;
color: #ffffff;
}
#specials p {
color: #50E5C0;
}
#specials span {
margin-top: 1em;
font-size: .7em;
float: right;
}
/* Work Section Styles */
#work-section {
width: 80%;
margin: 0 5%;
}
#work-section img {
width: 22%;
padding: 1%;
box-shadow: 0 0 8px #696773;
}
/* Contact Section Styles */
#contact-section {
margin-top: 5%;
color: #ffffff;
background-color: #696773;
opacity: .95;
}
#contact-section .subtitle {
color: #ffffff;
}
.contact-wrap {
width: 50%;
float: left;
}
#contact-section address {
font-style: normal;
}
#contact-section p {
text-indent: 2em;
}
#contact-section p .type {
width: 75%;
margin: .5%;
padding: .5%;
font-size: 1em;
color: #ffffff;
background-color: #696773;
border-radius: 5px;
border: 2px solid #00FFD4;
opacity: .75;
}
#contact-section a {
color: #ffffff;
text-decoration: none;
font-style: normal;
}
#contact-section a:hover {
text-decoration: underline;
}
.antispam ::-webkit-input-placeholder {
background-color: #50E5C0;
color: #ffffff;
opacity: 1;
}
:-moz-placeholder { /* Firefox 18- */
background-color: #50E5C0;
color: #ffffff;
opacity: 1;
}
::-moz-placeholder { /* Firefox 19+ */
background-color: #50E5C0;
color: #ffffff;
opacity: 1;
}
:-ms-input-placeholder {
background-color: #50E5C0;
color: #ffffff;
opacity: 1;
}
#contact-section textarea {
width: 78%;
margin: .5%;
padding: .5%;
color: #ffffff;
background-color: #696773;
border-radius: 3px;
border: 2px solid #00FFD4;
opacity: .75;
}
#contact-section #message .button {
width: 20%;
margin: 1.5%;
font-size: .75em;
color: #696773;
background-color: #ffffff;
border: initial;
border-radius: 5px;
border: 1px solid #CCC0B7;
float: right;
}
#contact-section #message .button:hover {
color: #ffffff;
background-color: #696773;
}
/* Footer Section Styles */
footer #copyright {
margin-top: 10%;
padding: .5%;
text-align: center;
color: #686673;
background-color: #ffffff;
}
footer p {
text-align: center;
}
footer a {
padding: 0;
color: #F26DA5;
}
}
CSS Responsive
#media screen and (min-width: 300px) {
/* ********************************* Scrollstop Styles ********************************* */
.scroll img {
visibility: hidden;
}
/* ************************************ Logo Styles ************************************ */
#logo-container {
width: 70%;
margin: 40% 15% 25% 15%;
}
#logo-container img {
opacity: 1!important;
}
/* ************************************ Menu Styles ************************************ */
nav {
height: 30px;
padding-bottom: 1em;
background-color: #696773;
}
nav a {
font-size: .75em;
}
nav ul li a:hover {
outline: initial;
font-size: 1em;
}
#nav-bkg img {
visibility: hidden;
}
/* ******************************** Main Content Styles ******************************** */
.subtitle {
padding: 3%;
font-size: 1.25em;
}
p {
font-size: .85em;
text-align: justify;
}
#services-section {
width: 80%;
margin: 5% 10%;
padding: 0;
}
#services-section #fa-icon .icon {
width: 50%;
margin: 0 0 15% 0;
padding: 0;
font-size: .65em;
color: #f26da5;
float: left;
}
#services-section h5 {
margin: 0;
padding: 0;
font-size: 1em;
border-top: none;
}
#specials {
width: 80%;
margin: 5% 10%;
padding: 0;
float: right;
}
#work-section {
width: 100%;
margin: 0;
padding: 0;
}
#work-section .slider img {
width: 96%;
margin: 2%;
padding: 0;
}
#contact-section {
width: 90%;
margin: 15% 0;
padding: 5%;
}
#contact-section .subtitle {
margin-bottom: 10%;
}
#contact-section p {
width: 100%;
margin: 0;
padding: 0;
text-align: left;
}
#contact-section p .type {
width: 100%;
margin: 0;
padding: 0;
}
#contact-section .contact-wrap {
width: 100%;
margin: 0;
padding: 0;
float: left;
}
#contactform {
margin-top: 15%;
}
#contact-section textarea {
width: 100%;
margin: 0;
padding: 0;
}
#contact-section #message .button {
width: 50%;
margin: 0;
padding: 0;
}
br {
display: none;
}
}
#media screen and (min-width: 500px) {
/* ************************************ Logo Styles ************************************ */
#logo-container {
margin: 45% 15%;
}
/* ******************************** Main Content Styles ******************************** */
.subtitle {
font-size: 1.5em;
}
p {
font-size: 1em;
}
#about-section {
width: 70%;
padding: 10% 15% 20% 15%;
}
#about-section p {
padding-bottom: 20%;
border-bottom: 1px solid #696773;
}
#services-section {
margin: 5% 10% 25% 10%;
padding: 10% 0 20% 0;
border-bottom: 1px solid #ffffff;
}
#specials {
margin: 5% 10% 25% 10%;
}
}
#media screen and (min-width: 600px) {
/* ************************************ Logo Styles ************************************ */
#logo-container {
width: 50%;
margin: 45% 25%;
}
/* ******************************** Main Content Styles ******************************** */
.subtitle {
padding: 3%;
font-size: 1.5em;
}
#services-section #fa-icon .icon {
width: 50%;
margin: 0 0 15% 0;
padding: 0;
font-size: .65em;
color: #f26da5;
float: left;
}
}
#media screen and (min-width: 700px) {
/* ************************************ Logo Styles ************************************ */
#logo-container {
width: 40%;
margin: 40% 30%;
}
/* ************************************ Menu Styles ************************************ */
nav a {
font-size: 1em;
}
nav ul li a:hover {
outline: 1px solid #ffffff;
}
/* ******************************** Main Content Styles ******************************** */
#services-section {
margin: 5% 10% 25% 10%;
padding: 10% 0 20% 0;
border-bottom: 1px solid #ffffff;
}
#services-section {
height: 400px;
}
#services-section #fa-icon .icon {
width: 50%;
margin: 0 0 15% 0;
padding: 0;
font-size: 1em;
color: #f26da5;
float: left;
}
#specials {
height: 400px;
padding: 0;
float: right;
}
#work-section .slider img {
width: 46%;
margin: 2%;
float: left;
}
}
#media screen and (min-width: 900px) and (max-width: 999px) {
/* ********************************* Scrollstop Styles ********************************* */
.scroll img {
visibility: visible;
}
/* ************************************ Logo Styles ************************************ */
#logo-container {
width: 30%;
margin: 15% 35%;
}
#logo-container img {
opacity: 1;
}
/* ************************************ Menu Styles ************************************ */
nav {
background-color: initial;
}
nav a {
font-size: 1em;
}
nav ul li a:hover {
outline: 1px solid #ffffff;
}
#nav-bkg img {
visibility: visible;
}
/* ******************************** Main Content Styles ******************************** */
#services-section {
margin: 5% 10% 25% 10%;
padding: 10% 0 20% 0;
border-bottom: 1px solid #ffffff;
}
#services-section {
width: 80%;
margin: 5%;
padding: 5%;
height: 350px;
border: none;
}
#services-section #fa-icon .icon {
width: 25%;
margin: 0 0 15% 0;
padding: 0;
font-size: 1em;
color: #f26da5;
float: left;
}
#specials {
width: 80%;
margin: 5%;
padding: 5%;
height: 350px;
float: right;
}
#work-section {
padding-bottom: 5%;
}
#work-section .slider img {
width: 23%;
margin: 1%;
float: left;
}
#contact-section .subtitle {
margin-bottom: 10%;
}
#contactform {
margin-top: 5%;
}
}
Because both sections are defined as min-width, both sections will be applied when the display area is over 1000px and only the min-width:300 section will be applied when it is over 300px.
Since both sections are applied, the browser will resort to the standard css rules for prioritization of similar styles. (see http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade)
If you want to be more explicit, you could specify:
#media screen and (min-width: 300px) and (max-width: 999px)
and your responsive styles will stop getting applied after that point.
------------------ edit in response to comment:
If I am understanding what you are looking for it would require the ability to nest the #media queries, but it is not supported.
eg:
#media screen and (max-width:999px)
{
#media screen and (min-width:300px)
{ }
#media screen and (min-width:600px)
{ }
#media screen and (min-width:900px)
{ }
}
This way your responsive styles would stop at 999px but they would be cumulative up until that point?
I believe the only way to accomplish writing this logically would be to use LESS or SCSS. Which would compile your css and rewrite it exactly the way you are trying to avoid...
I think the best you can do would be:
#media screen and (min-width:300px) and (max-width:999px)
{ }
#media screen and (min-width:600px) and (max-width:999px)
{ }
#media screen and (min-width:900px) and (max-width:999px)
{ }
Or better yet try something like this:
#import url(responsive.css) screen and (max-width: 999px);
and in responsive.css:
#media screen and (min-width:300px)
{ }
#media screen and (min-width:600px)
{ }
#media screen and (min-width:900px)
{ }
This was suggested in another thread I saw: Nesting #media rules in CSS