Mobile not displaying sub-menu

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.

There is css to remove them, its:

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

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....

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;
    }
}

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;
}

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.

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

You're welcome :)