[Resolved] Mobile not displaying sub-menu

Home Forums Support [Resolved] Mobile not displaying sub-menu

Home Forums Support Mobile not displaying sub-menu

  • This topic has 8 replies, 2 voices, and was last updated 7 years ago by Leo.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #291022
    Dave

    Hey guys, my mobile menu is not showing the submenus. On one site I have (dev.northwestfiretraining.com) I have the submenus showing the way I want. I want them to display the exact same way on the site I’m working on now (dev1.igniswebdesign.com) but I can’t find the options or the CSS to make it work. Help?

    #291024
    Leo
    Staff
    Customer Support

    Hi Dave,

    Little confused here…looks like the dropdown arrow is missing all together on both sites?
    I don’t see any CSS to remove them?

    If so can you try #1 on this page? https://docs.generatepress.com/article/debugging-tips/

    Let me know.

    #291052
    Dave

    There is css to remove them, its:

    .main-navigation ul ul {
          width: 260px;
    }
    .menu-item-has-children .dropdown-menu-toggle {
        display: none;
    }
    #291053
    Dave

    I don’t want the arrows on the desktop site but I do want them on the mobile site. I had the same setup to the first website example I gave for the fire dept – not sure why its not working….

    #291054
    Leo
    Staff
    Customer Support

    Can you try targeting that to desktop only like this?

    @media (min-width:769px) {
        .main-navigation ul ul {
            width: 260px;
        }
        .menu-item-has-children .dropdown-menu-toggle {
            display: none;
        }
    }
    #291055
    Dave

    Didn’t work. Here is all the CSS I have in Custom CSS:

    @media (max-width: 1023px) {
    #top-header-schedule {
         float: right !important;
    }
    #top-header-schedule-icon {
    	 display: none !important;
    }
    #top-header-email-icon {
    	 display: none !important;
    }
    #top-header-email {
    	 display: none !important;
    }
    table, th, td {
       background-color: #ffffff !important;
    }
    #header-social {
       display: none;
    }
    #header-address {
       display: none;
    }
    .generate-combined-page-header { 
          display: none;
    }
    }
    table, th, td {
       border: 0px;
    }
    .page-header-image.grid-container {
          max-width: 100%;
          margin-top: 0;
    }
    .page-header-image img { 
          width: 100%;
    }
    .generate-combined-page-header { 
          padding-bottom: 360px;
    }
    #top-header-social {
        display: inline-block;  
        background: #0d1823;
        color: #3f3f3f;
        padding: 2px;
        font-size: 12px;
        float: right;
        height: 100%;
        overflow: hidden;
        white-space: nowrap;
    }
    #top-header-phone {
        display: inline-block;  
        background: #0d1823;
        color: #ffffff;
        padding: 2px;
        font-size: 12px;
        text-transform: uppercase;
        font-family: 'Gotham A','Gotham B',sans-serif;
        font-weight: 400;
        font-style: normal;
        letter-spacing: 1px;
        float: right;
        height: 100%;
        overflow: hidden;
        white-space: nowrap;
    }
    @media (min-width:769px) {
        .main-navigation ul ul {
            width: 260px;
        }
        .menu-item-has-children .dropdown-menu-toggle {
            display: none;
        }
    }
    .main-navigation .main-nav ul li.menu-item-has-children > a {
        padding-right: 20px;
    }
    .main-navigation .main-nav ul ul li a {
          font-size: 14px;
      font-weight: 400;
      text-transform: none;
    }
    img.padded {
       margin-bottom: 10px;
    }
    .contact-form-container {
       padding-left: 15px;
       padding-right: 15px;
       padding-top: 1px;
       padding-bottom: 5px;
       width: 80%;
       float: left;
    }
    #header-phone {
        color: #ffffff;  
        font-size: 1.5em;
        text-transform: uppercase;
        font-family: 'Gotham A','Gotham B',sans-serif;
        font-weight: 400;
        font-style: normal;
        letter-spacing: 1px;
        text-align: right;
        padding-bottom: 5px;
    }
    #header-social {
       text-align: right;
       padding-top: 3px;
    }
    .header-schedule {
       text-align: right;
       padding-top: 3px;
    
    }
    #ignis {
      margin-top: 10px; 
      font-size: 11px;
    }
    #ignis a:link, a:hover, a:visited, a:active {
      color: #ffffff !important;
    }
    .custom-section-header {
       width: 100%;
       background-color: #329fcf;
       margin-bottom: 20px;
       padding-left: 5px;
       padding-top: 2px;
       padding-bottom: 2px;
       font-weight: 500;
       text-transform: uppercase;
       font-size: 18px;
       color: #ffffff;
    }
    .custom-page-header {
       width: 100%;
       background-color: #329fcf;
       padding-left: 5px;
       padding-top: 2px;
       padding-bottom: 2px;
       font-weight: 500;
       text-transform: uppercase;
       font-size: 24px;
       color: #ffffff;
    }
    #291057
    Leo
    Staff
    Customer Support

    Wait I think it’s something to do with the menu structure. Do you have the same menu selected for your main navigation and slideout navigation?

    The site that’s working I see the classes as menu-item-xx, the site that’s not working I see it as page-item-xx.

    #291076
    Dave

    Geez how did I miss that. Thanks as always man…

    #291212
    Leo
    Staff
    Customer Support

    You’re welcome 🙂

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.