以特定大小覆盖媒体查询CSS

Question

I've been trying to troubleshoot an issue with overriding a media query rule in css for the past 2 days and I don't seem to be getting it right.

For reference, here is the original theme I am working with: https://preview.ait-themes.club/theme/architect/

And here is my implementation: https://aaa.thebaconstudio.com/

As you can see in the original theme, the main menu is configured to change into its responsive version at less than 1200 pixels.

Since I've modified the header layout slightly and my main menu has a full row with available to it, I want to change that break point to a much lower value. There is already a perfect breakpoint at 640 pixels that I want to keep.

So what I am trying to achieve is to stop the responsive menu to show up between 645 and 1199 pixels and let it show as it is when the screen is 1200 pixels or greater.

I am trying to achieve this via custom CSS on my child theme since I don't want to do it on the parent theme and risk losing the changes over an update. The problem is that I haven't been able to target the right rule or perhaps I'm just looking at this the wrong way.

I tried to create a new media query targeting 1200 and copy / pasted all the menu css config that applies before the responsive media query but it doesn't seem to work, it still converts the menu at < 1200.

I would appreciate any help or pointers here towards what I might be doing wrong.

Thanks!

Answer 1

I see nothing complicated here.

edit: I stand corrected. I am a silly goose.

Anyway, this is the css that seems to be involved:

@media all and (max-width: 1200px) {
    .main-nav .assistive-text { display: none; }

    .main-nav-wrap {
        margin: 0px auto;
        position: relative;
        text-align: center;
        width: 50px;
        height: 40px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border: 1px solid #fff;
        border-bottom: none;
    }

    .main-nav-wrap .menu-toggle {
        display: block;
        cursor: pointer;
        -moz-border-radius: 0px;
        -webkit-border-radius: 0px;
        border-radius: 0px;
        padding: 5px;
        -moz-transition: all .1s linear;
        -webkit-transition: all .1s linear;
        transition: all .1s linear;
        margin: 0;
        text-transform: uppercase;
        line-height: 0px;
        font-size: 0;
    }

    .main-nav-wrap .menu-toggle::after {
        color: #000;
        content: "\f0c9";
        font-family: "FontAwesome";
        font-size: 30px;
        line-height: normal;
    }

    .main-nav-wrap .nav-menu-main {
        display: none;
        width: 300px;
        position: absolute;
        border: 1px solid #dddcda;
        top: 38px;
        left: -1px;
        z-index: -1;
    }

    .main-nav-wrap.hover .nav-menu-main { display: block; }

    .main-nav-wrap.hover {
        border: 1px solid #dddcda;
        border-bottom: none;
        background: #fff;
    }

    .nav-menu-main > ul { background: #fff; }

    .nav-menu-main > ul > li {
        float: none;
        padding: 0;
        margin: 0;
    }

    .nav-menu-main > ul > li:hover { background: none; }

    .nav-menu-main > ul > li > a {
        font-family: arial;
        font-weight: bold;
        color: #333;
        padding: 5px 15px;
        text-shadow: none;
        text-align: left;
    }

    .nav-menu-main > ul > li > a:hover {
        background: #eee;
        color: #000;
    }

    .nav-menu-main > ul > li > a:before {bottom: 0;}

    .nav-menu-main ul li a {border-bottom: 1px solid #dddcda !important;}

    .nav-menu-main > ul > li ul {
        width: auto;
        padding: 0px;
        position: static;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        -moz-border-radius: 0px;
        -webkit-border-radius: 0px;
        border-radius: 0px;
        text-align: left;
    }

    .nav-menu-main > ul > li li {padding: 0px;}

    .nav-menu-main > ul > li li a:hover {
        background: #eee;
        color: #000;
    }

    .nav-menu-main > ul > li li a:before {
        content: "\f105";
        font-family: "FontAwesome";
        font-size: 16px;
        line-height: normal;
        padding-right: 5px;
    }

    .nav-menu-main > ul > li.current_page_item,
    .nav-menu-main > ul > li.current_page_parent,
    .nav-menu-main > ul > li.current_page_ancestor,
    .nav-menu-main > ul > li.current-menu-item,
    .nav-menu-main > ul > li.current-menu-parent,
    .nav-menu-main > ul > li.current-menu-ancestor {
        background: #f5f5f5;
    }

    .nav-menu-main > ul > li.current_page_item > a,.nav-menu-main > ul > li.current_page_parent > a,
    .nav-menu-main > ul > li.current_page_ancestor > a,
    .nav-menu-main > ul > li.current-menu-item > a,
    .nav-menu-main > ul > li.current-menu-parent > a,
    .nav-menu-main > ul > li.current-menu-ancestor > a {
        color: #000;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    .nav-menu-main > ul ul li.current_page_parent > a,
    .nav-menu-main > ul ul li.current_page_ancestor > a,
    .nav-menu-main > ul ul li.current-menu-parent > a,
    .nav-menu-main > ul ul li.current-menu-ancestor > a {
        color: #464646;
    }

    .nav-menu-main > ul ul li.current_page_parent > a:hover,
    .nav-menu-main > ul ul li.current_page_ancestor > a:hover,
    .nav-menu-main > ul ul li.current-menu-parent > a:hover,
    .nav-menu-main > ul ul li.current-menu-ancestor > a:hover {
        color: #000;
    }

    .nav-menu-main ul li.current_page_item > a,.nav-menu-main ul li.current-menu-item > a {
        color: #636363;
    }

    .nav-menu-main ul.ait-megamenu > li.menu-item-has-children > a:after {
        display: none;
    }

    .nav-menu-main ul.ait-megamenu > li > ul {
        display: block;
        overflow: visible;
        opacity: 1;
        height: 0;
    }

    .nav-menu-main ul.ait-megamenu > li:hover > ul {
        -moz-transition: none;
        -webkit-transition: none;
        transition: none;
        height: auto;
    }

    .nav-menu-main ul.ait-megamenu > li > ul li:not(.menu-item-column) > ul.sub-menu {
        visibility: hidden;
        opacity: 0;
    }

    .nav-menu-main ul.ait-megamenu > li > ul li:not(.menu-item-column):hover > ul.sub-menu {
        visibility: visible;
        opacity: 1;
        -moz-transition: all 0.3s ease 0s;
        -webkit-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s;
    }

    .nav-menu-main ul#menu-main-menu > li > ul li:not(.menu-item-column) > ul.sub-menu {
        visibility: visible;
        opacity: 1;
        -moz-transition: all 0.5s ease 0s;
        -webkit-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s;
    }

    .nav-menu-main ul.ait-megamenu > li > ul li:not(.menu-item-column) > ul.sub-menu {
        visibility: visible;
        opacity: 1;
        -moz-transition: all 0.5s ease 0s;
        -webkit-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s;
    }

    .main-nav-wrap .nav-menu-main { text-align: center; }
    .menu-item-has-columns > ul > li > ul > li { display: block; }
    .menu-item-ait-row > ul li,.menu-item-column-label { width: 290px !important; }
    .menu-item-ait-row > ul > li > ul li:last-child a { border-bottom: 1px solid #dddcda !important;}
    .nav-menu-main > ul > li.sub-menu-center-position > ul,.nav-menu-main > ul > li > ul {
        border: 0 none;
        left: auto !important;
        margin-left: 0 !important;
    }

    .menu-container { z-index: 300;}
    .main-nav-wrap .separator.first { display: none; }
    .main-nav-wrap .separator.separator-1 { display: none; }
    .main-nav-wrap .separator.separator-2 { display: none; }
    .main-nav-wrap .separator.separator-3 { display: none; }
    .main-nav-wrap .separator.separator-4 { display: none; }
    .main-nav-wrap .separator.separator-5 { display: none; }
    .main-nav-wrap .separator.separator-6 { display: none; }
    .nav-menu-main > ul > li {
        width: 100%;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .nav-menu-main ul.sub-menu {
        border: 0 none;
        height: auto !important;
    }
}