Menu on smaller screens

  • Hi everyone

    I’m using Quest on this website:

    https://happywifelaundromat.com

    and I’m having trouble making the menu display properly on smaller screens. It seems to be permanently visible and over the main slider (Masterslider), I think this is a result of me attempting to make the logo image bigger and trying to centre it (which hasn’t worked). What I need it to do is not be visible on smaller screens and show the menu button which when pressed displays the menu clearly over the slider.

    Any help much appreciated, thanks

Viewing 2 replies - 1 through 2 (of 2 total)
  • Theme Author pacethemes

    (@pacethemes)

    Hello,

    Sorry about the delayed response, the main issue here is incorrect CSS syntax in your child theme style.css file, below is the corrected version, replace the child theme CSS styles with below.

    Remove the height property you have set for the menu and set it from Appearance > Customize > Layout > Header > “Header Height” and “Main Menu Height”. If you don’t see this option, please update to latest version of Quest. Also please checkout the “Page Builder by PaceThemes” plugin as it provides bette UI and more features/functionality for the Quest Theme

    /*
Theme Name: quest-child
Version: 1.0
Description: A child theme of Quest
Template: quest
*/

@import url("../quest/style.css");

@media (max-width: 900px) {
    #AnythingPopup_BoxContainer1 {
        width: 100% !important;
        height:auto !important;
        position: absolute !important;
        margin-right: auto !important;
        margin-left: auto!important;
        right: 0px!important;
        left: 0px!important;
        top: 40%;
        margin-top:20%;
    }

    #AnythingPopup_BoxContainer2 {
        width: 100% !important;
        height:auto !important;
        position: absolute !important;
        margin-right: auto !important;
        margin-left: auto!important;
        right: 0px!important;
        left: 0px!important;
        top: 40%;
        margin-top:20%;
    }

    #AnythingPopup_BoxContainer3 {
        width: 100% !important;
        height:auto !important;
        position: absolute !important;
        margin-right: auto !important;
        margin-left: auto!important;
        right: 0px!important;
        left: 0px!important;
        top: 40%;
        margin-top:20%;
    }

    #AnythingPopup_BoxContainer4 {
        width: 100% !important;
        height:auto !important;
        position: absolute !important;
        margin-right: auto !important;
        margin-left: auto!important;
        right: 0px!important;
        left: 0px!important;
        top: 40%;
        margin-top:20%;
    }

    #AnythingPopup_BoxContainer5 {
        width: 100% !important;
        height:auto !important;
        position: absolute !important;
        margin-right: auto !important;
        margin-left: auto!important;
        right: 0px!important;
        left: 0px!important;
        top: 40%;
        margin-top:20%;
    }

    #AnythingPopup_BoxContainer6 {
        width: 100% !important;
        height:auto !important;
        position: absolute !important;
        margin-right: auto !important;
        margin-left: auto!important;
        right: 0px!important;
        left: 0px!important;
        top: 40%;
        margin-top:20%;
    }

    #AnythingPopup_BoxContainer7 {
        width: 100% !important;
        height:auto !important;
        position: absolute !important;
        margin-right: auto !important;
        margin-left: auto!important;
        right: 0px!important;
        left: 0px!important;
        top: 40%;
        margin-top:20%;
    }

    #AnythingPopup_BoxContainer8 {
        width: 100% !important;
        height:auto !important;
        position: absolute !important;
        margin-right: auto !important;
        margin-left: auto!important;
        right: 0px!important;
        left: 0px!important;
        top: 40%;
        margin-top:20%;
    }

    #AnythingPopup_BoxContainer9 {
        width: 100% !important;
        height:auto !important;
        position: absolute !important;
        margin-right: auto !important;
        margin-left: auto!important;
        right: 0px!important;
        left: 0px!important;
        top: 40%;
        margin-top:20%;
    }

    #AnythingPopup_BoxContainer10 {
        width: 100% !important;
        height:auto !important;
        position: absolute !important;
        margin-right: auto !important;
        margin-left: auto!important;
        right: 0px!important;
        left: 0px!important;
        top: 40%;
        margin-top:20%;
    }
}

@media (max-width: 1200px) {
    .navbar-collapse.collapse {
        display: block !important;
        height: auto !important;
        padding-bottom: 0;
        overflow: visible !important;
        visibility: visible !important;
    }

    .main-navigation .navbar-collapse {
        border-top: none;
        padding-right: 0;
    }

    .navbar-collapse.collapse {
        display: block !important;
        height: auto !important;
        padding-bottom: 0;
        overflow: visible !important;
        visibility: visible !important;
    }

    .navbar-collapse {
        width: auto;
        border-top: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    .navbar-collapse {
        padding-right: 15px;
        padding-left: 15px;
        overflow-x: visible;
        -webkit-overflow-scrolling: touch;
        border-top: 1px solid transparent;
        -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
    }

    .collapse {
        display: none;
        visibility: hidden;
    }

    *, *::after, *::before {
         box-sizing: border-box; 
    }

    *, *::after, *::before, input[type="checkbox"], input[type="radio"] {
        /* -webkit-box-sizing: border-box; */
        -moz-box-sizing: border-box;
    }

    .site-branding, .main-navigation {
         text-align: center; 
    }

    .main-navigation {
         text-align: center; 
    }

    .main-header, .main-header a {
        color: #333;
    }

    body, .tooltip {
        font: 16px 'Englebert';
        line-height: 1.5em;
        font-weight: normal;
        font-style: normal;
        text-transform: none;
        letter-spacing: 0px;
        word-spacing: 0px;
    }

    body {
        color: #0000ff;
    }

    body {
        line-height: 1.5em;
        font: 13px "Open Sans", "Helvetica", "Arial", "sans-serif";
        color: #6a6767;
    }

    body {
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
        font-size: 14px;
        line-height: 1.42857143;
        color: #333;
    }

    html {
        font-size: 10px;
    }

    html {
        font-family: sans-serif;
        -webkit-text-size-adjust: 100%;
    }

    .main-header, .main-header a {
         height: 200px;  !important
    }
}
    Theme Author pacethemes

    (@pacethemes)

    Hello,

    Sorry about the delayed response, the main issue here is incorrect CSS syntax in your child theme style.css file, below is the corrected version, replace the child theme CSS styles with below.

    Remove the height property you have set for the menu and set it from Appearance > Customize > Layout > Header > “Header Height” and “Main Menu Height”. If you don’t see this option, please update to latest version of Quest. Also please checkout the “Page Builder by PaceThemes” plugin as it provides bette UI and more features/functionality for the Quest Theme

    Updated CSS – https://pastebin.com/Xf1bqUNL

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Menu on smaller screens’ is closed to new replies.