How to show the 'normal' (Desktop) menu on a horizontal tablet display (Perth Th

Witch CSS-code should I add to the custom-CSS to display the ‘normal’ (desktop) menu in a horizontal version on a tablet (iPad)?

Hello there,

You can add the following CSS code into your site’s additional CSS option under Appearance > Customize > Additional CSS.


@media only screen and (min-width:768px) and (max-width:1024px) {
  
  .main-navigation {
    display: block;
    width: 50%;
  }

  main-navigation ul.menu{
    float: right;
  }

  .mobile-nav{
    display: none;
  }

  .main-navigation li::after {
    width: 0;
    height: 2px;
    background-color: #315B9D;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: width 0.3s;
    transition: width 0.3s;
  }

  .main-navigation li:hover::after {
    width: 100%;
  }  
  
}

Regards,
Kharis

Great. Thanks!

You’re welcome and best wishes!

With CSS there is now a ‘normal’ menu on the tablet visible (landscape-view). That is great. But now I must ‘dubbel-click’ on a navigation-item (on the tablet) to go to another page (by desktop this is a single click)… Is there a fix for this issue?

Please try to disable hover event on touch device by doing the following steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box

if ( matchMedia( 'only screen and (max-width: 1024px)' ).matches ) {
  $('.main-navigation').unbind('mouseenter mouseleave');
}

  1. Update

Regards,
Kharis

Hello Kharis,

I followed your steps… but it provides no improvement…

Do you have another solution?

Greetings Tjeerd

http://www.tjeerdengel.nl/java.jpg