menu disappears in mobile width?

  • Tom

    (@tomkepler)


    8 years, 5 months ago

    Hi — I’m having trouble with the primary menu disappearing when at mobile width (1067 and under). I don’t think I’ve done anything with my child theme that would cause this. It’s a beautiful theme, but I’m struggling to figure out what’s going on.

    https://mcl.tomkepler.com

    That’s the development version of the site. Here’s the style.css content:

    /*
    Theme Name: Morristown Centennial Library Child Theme
    Theme URI: https://tomkepler.com/
    Description: A child theme, based on the Experon theme
    Author: Tom Kepler
    Author URI: https://tomkepler.com
    Template: experon
    Version: 1.0.0
    */

    body {
    font-family: ‘Libre Baskerville’, serif;
    }

    h1, h2, h3, h4, h5 {
    font-family: ‘Roboto’, sans-serif;
    }

    h2.site-description {

    }

    .catalog-button,
    .online-library-button,
    .listen-up-vermont,
    .universal-class-libraries {
    min-height: 40px !important;
    width: 100% !important;
    padding: 0px !important;
    padding-top: 18px !important;
    }

    .listen-up-vermont {
    padding-bottom: 18px !important;
    }

    /* HEADER
    —————————————————————————————-*/

    #header {
    background-image: url(/wp-content/uploads/2016/10/MCL-logo-250h.jpg);
    background-repeat: no-repeat;
    background-position: center left;
    }

    .site-title {
    font-family: ‘Libre Baskerville’, serif;
    font-weight: normal !important;
    color: #333399 !important;
    }

    .site-description {
    font-family: ‘Libre Baskerville’, serif;
    font-weight: normal !important;
    color: #333399 !important;
    font-variant: small-caps;
    letter-spacing: 1px;
    font-size: 150% !important;
    }

    /* WIDGETS
    —————————————————————————————-*/
    .textwidget {
    padding-bottom: 1em;
    }

    /* HOME PAGE
    —————————————————————————————-*/
    #home-widget-1,
    #home-widget-2,
    #home-widget-3 {
    display: block;
    float: left;
    overflow: hidden;
    min-height: 300px;
    width: 30%;
    margin: 12px;

    }

    #home-widget-2 div {
    border-bottom: 1px solid #ccc;
    }

    #sample-calendar {
    background-color: #90acd0;
    padding: 9px;

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;

    }

    #sample-calendar h4 {
    padding-bottom: 3px;
    border-bottom: 1px solid #666;
    }

    /* NAVIGATION
    —————————————————————————————-*/

    #menu-main-menu {
    font-family: ‘Roboto’, sans-serif;
    }

    #header-nav {
    visibility: hidden;
    }

    /* MEDIA QUERIES
    —————————————————————————————-*/

    @media (max-width: 1024px) {
    #home-widget-1,
    #home-widget-2,
    #home-widget-3 {
    display: block;
    clear: both;
    width: 100%;
    }

    }

    @media (max-width: 768px) {
    #header {
    display: block;
    height: auto !important;
    max-height: auto !important;
    overflow: hidden;
    clear: both;
    width: 100%;
    }

    }

    You can see where I tried to fix it in the media queries, but even if I set those to big pixel values, the menu doesn’t show up (I thought maybe it was just getting eaten up by the height of the header).

    If you have any thoughts about this, I’d love to hear them. Thanks so much for a great theme!

    Tom

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi,

    this happend because of these code: https://screencast.com/t/tQeHEASYY

    which is in style-responsive.css file.

    If you want to override this code, you should paste this code:

    @media only screen and (max-width: 768px){
    #header-links {
    display: inline-block !important;
    }
    }

    Best Regards

    Thread Starter Tom

    (@tomkepler)

    redstar90 — thanks for the very fast response! I’ll go fiddle with it and get it to work.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘menu disappears in mobile width?’ is closed to new replies.