Docs

[kateanita]

Hello, my main menu drop down is not working on an ipad running iOS 10.1.1.

I read through the other threads about this but cannot figure it out.

Here is the website: http://restorationgames.com/

Everything is newest version.

Here is my custom CSS:

/* Call Brandon and Gin fonts  */
@font-face {
    font-family: 'Brandon-Text';
    src: url('/wp-content/fonts/BrandonText-Regular.eot');
    src: url('/wp-content/fonts/BrandonText-Regular.eot#iefix') format('embedded-opentype'),
         url('/wp-content/fonts/BrandonText-Regular.woff') format('woff'),
         url('/wp-content/fonts/BrandonText-Regular.ttf') format('truetype'),
         url('/wp-content/fonts/BrandonText-Regular.svg') format('svg');
  font-weight: 400;
  font-style: normal;
}
      
@font-face {
    font-family: 'Brandon-Text';  
    src: url('/wp-content/fonts/BrandonText-Bold.eot');
    src: url('/wp-content/fonts/BrandonText-Bold.eot#iefix') format('embedded-opentype'),
         url('/wp-content/fonts/BrandonText-Bold.woff') format('woff'),
         url('/wp-content/fonts/BrandonText-Bold.ttf') format('truetype'),
         url('/wp-content/fonts/BrandonText-Bold.svg') format('svg');
  font-weight: 700;
  font-style: normal;
}

@font-face {
    font-family: 'Brandon-Text';  
    src: url('/wp-content/fonts/BrandonText-RegularItalic.eot');
    src: url('/wp-content/fonts/BrandonText-RegularItalic.eot#iefix') format('embedded-opentype'),
         url('/wp-content/fonts/BrandonText-RegularItalic.woff') format('woff'),
         url('/wp-content/fonts/BrandonText-RegularItalic.ttf') format('truetype'),
         url('/wp-content/fonts/BrandonText-RegularItalic.svg') format('svg');
  font-weight: 400;
  font-style: italic;
}

@font-face {
    font-family: 'Gin Round';
    src: url('/wp-content/fonts/Gin-Round.eot') format('embedded-opentype'),
         url('/wp-content/fonts/Gin-Round.woff') format('woff'),
         url('/wp-content/fonts/Gin-Round.ttf') format('truetype'),
         url('/wp-content/fonts/Gin-Round.svg') format('svg');
}

/* global styles */
p {
  font-family: "Brandon-Text";
  font-size: 1.4em;
  font-weight: 300 !important;
  color: #004e7a;
  margin: 0 0 1em;
}

h1 {
  font-family: "Brandon-Text" !important;
  font-weight: bold !important;
  font-size: 3em !important;
}

h2 {
  font-family: "Gin Round";
  font-size: 1.25em;
  color: #b12227;
}

/* style subheaders on team page */
p.italicsub {
  font-family: "Brandon-Text";
  font-size: .75em;
  font-style: italic;
  text-transform: capitalize;
}
p.italicsub-white {
  font-family: "Brandon-Text";
  font-size: .75em;
  font-style: italic;
  text-transform: capitalize;
  color: #ffffff;
}

p.intro {
  font-family: "Brandon-Text";
  font-size: 1.8em !important;
  font-weight: bold !important;
  text-transform: none;
  color: #b1c236 !important;
  line-height: 1.2;
}

li {
  color: #004e7a !important;
} 

/* style top bar with tagline */
.x-topbar { 
  max-height: 20px;
  font-family: "Brandon-Text" !important;
  font-weight: bold !important;
  letter-spacing: 5px;
  font-size: 1.1em;
}

.x-navbar .x-nav-wrap .x-nav > li > a {
  font-family: "Brandon-Text" !important;
  font-weight: bold;  
}

/* add background to nav bar  */
.x-logobar {
  background-image: url(/wp-content/uploads/2016/12/headerbg-03.jpg);
  background-repeat: no-repeat;
  background-position: right center; 
  background-size: 2800px 154px;
}

/* remove underline on navigation with active links */
.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
    box-shadow: none;
}

/* remove lines around navigation   */
.x-navbar .desktop .x-nav>li:first-child>a {
    border-left: none !important;
    border-right: none !important;
}
.x-navbar .desktop .x-nav>li>a {
    border: none !important;
}
.x-navbar .sub-menu {
  background-color: #144473;
  color: #adbfd4;
  font-family: "Brandon-Text";
  font-size: 1.2em;
}

/* remove border at bottom of nav */
.x-navbar {
  border-bottom: 2px solid #dcd3c9;;
  border-top: medium none;
  background-color: #144473;
  border-top: none;
}

/* remove line underneath logo bar in header  */
.x-logobar {
   border-bottom: none; !important;  
}

/* style buttons in sidebar  */
.vc_btn3.vc_btn3-color-juicy-pink, .vc_btn3.vc_btn3-color-juicy-pink.vc_btn3-style-flat {
  background-color: #b12227;
}
.vc_btn3.vc_btn3-shape-rounded {
  border-radius: 0px;
  width: 100%;
}

/*increase width of subscribe field in sidebar */
.x-subscribe-form {
  margin-left: 0px;
  margin-right: 0px;
  max-width: 400px !important;
}

/* style it deserves another turn form in sidebar */
.wpcf7 .wpcf7-form textarea {
  height: 100px;
  width: 90%;
  margin-right: 5px;
  font-size: 1em;
}
.wpcf7 .wpcf7-form [type="submit"] {
  width: 100%;
}

/* Games page button styling  */
.vc_btn3.vc_btn3-color-danger, .vc_btn3.vc_btn3-color-danger.vc_btn3-style-flat {
  background-color: #b12227;
  font-size: 1.2em;
  display: block !important;
  width: 300px !important;
  height: 50px;
  padding: 10px;
} 
.vc_btn3.vc_btn3-color-danger, .vc_btn3.vc_btn3-color-danger.vc_btn3-style-flat:hover {
 background-color: rgb(123, 21, 24);
}

/*-----------------BEGIN Media Query for min-width tablet--------------- */
@media only screen and (max-width: 767px) {
/* enlarge top tagline area on tablet and mobile  */
.x-topbar { 
  max-height: 67px;
  font-size: .8em;
  letter-spacing: 2px;  
}

p.p-info {
  padding: 0px !important;
}
 
/* fix h1 title on team page for mobile  */  
.page-id-23 .h-custom-headline {
  font-size: 2em !important;
  }
  
/* fix margin on team page for mobile  */  
.page-id-23 .x-container.wpb_row {
 margin-left: 5px !important;
}
.page-id-23 img {
    max-width: 90%;
  } 
  
}
  
  /* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 554px) 
and (max-device-width : 768px) 
and (orientation : landscape) {
.x-topbar { 
  max-height: 20px;
  font-size: 1em;
}
}

Thank you!

[Paul R]

Hi,

Upon checking, It seems to work fine on my end.

Can you try our demo site and see if it’s doing the same thing(dropdown not working) in your end.

http://demo.theme.co/ethos-1/

Thanks

[kateanita]

Thanks for trying it out – did you try it on an actual ipad or in chrome developer? It has been working for me on chrome developer and in older versions of ipads. Do you see anything that might be causing conflict in my CSS? Thanks again.

[Paul R]

Hi,

I checked on the actual ipad and I can see the sub-menu is not working.

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[kateanita]

This reply has been marked as private.

[Rad]

Hi there,

It’s because the parent menu (games) has a link, and when you tap it, it will simply link or load to that page. Try changing the parent menu to #. There is no hover functionality on iPad, hence, you need to tap it.

Thanks!

[kateanita]

Thanks again for looking into this – but it works fine on mobile – you click on the arrow and it shows the submenu. Why would it work ok on mobile (iPhone) and not on iPad?

[Rad]

Hi there,

Hmm, are you referring to menu appearing in portrait mode or landscape mode? In iPhone, the mobile menu will appear regardless of orientation.

But in iPad, the mobile menu will appear in portrait mode while desktop menu in landscape mode. And desktop menu’s arrow has no functionality since it’s activated on hover and not on click.

Perhaps, you wish to display mobile menu on iPad’s landscape mode too?

Thanks!

[kateanita]

Hi – I’m referring to it in portrait mode when the mobile hamburger menu appears.

Everything works on iPhone. You click on the mobile menu, you get the dropdown, and you can click on the arrows on the right side to get the submenus for “Games” and “About.” But on the iPad mobile menu (portrait), when you click on it, the arrows on the right are not working. You just go to the main parent level page. This is a functionality issue and you did say earlier it appeared to not be working on iPad.

I don’t want to use the mobile menu for iPad on landscape mode since that is where the issue is. Perhaps a work around would be to reduce the breakpoint and have the regular menu for ipad instead of the mobile menu?

The issue is only regarding the mobile menu portrait mode on iPad. Any advice/help would be greatly appreciated. Thanks.

[Jack]

Hi there,

Thanks for the clarification, to use the regular menu in portrait view on the iPad please try the following custom CSS under customizer > Custom > CSS.

@media (min-width: 768px) {
  .x-nav-wrap.desktop,
  .x-nav-wrap.desktop {
    display: block !important;
  }

  .x-nav-wrap.mobile,
  .x-nav-wrap.mobile,
  .x-btn-navbar {
    display: none !important;
  }
}

Thank you!

[Author]

Posts