Docs

[tiv1]

Hi! We are really enjoying working with this theme, thanks much.

One problem though – the Primary Menu of the website we are developing looks great on desktop browsers, but it is not displaying properly on ipads.

On the home page, if the ipad is held landscape/horizontally, the menu items are dropping below the header area and unto the first Section which is a video file via Revolution Slider. Incidentally, the video is also not displaying/playing on the ipad.

The menu displays as drop down when the ipad is held vertically – and that is fine.

BUT when navigating to other pages, the drop down menu items are not visible or hidden behind the page contents. How can we ensure they appear in front and are not transparent.

Site url is: aisc.tiv1.com
WordPress version: 4.5.3
X Theme version: 4.6.0
Cornerstone version: 1.3.0

Many thanks for your help.

Hovig

PS – We have ensured the browsers (Safari) on the ipads are updated.

[Lely]

Hello Hovig,

Thanks for writing in! This particular situation is simply a matter of reworking your content to properly fit the physical limitations presented by the theme (this is a consideration that must be taken into account with all themes and designs). It is the same principal applied to filling up a room with furniture—there is only so much that can fit into a given space. The following should be considered in these situations:

• Logo Size – longer logos will conflict with navigation items as you size your site down. If you are noticing a conflict, you may need to implement some CSS to size down your logo as viewports get smaller.
• Shorter Names – you should always shoot to have your top-level navigation links be as simple as possible. For example, if your link is “Learn About My Company,” Try using “About” instead. It conveys the same idea and will save you a ton of real estate.
• Rearrange – sometimes we want to put all of our links in the top-level navigation, but not all pages are created equally. Pages of lesser importance that pertain to a parent link might work well as a sub-menu instead.
• Less Links – even on more “complex” websites with lots of pages, there are always ways to combine information together to make things simpler, which also ensures that your user doesn’t have to click around for every granular piece of information. For example, you might have two top-level links called “About” and “Contact,” which could possibly be combined into one. This eliminates the need for extra links and makes things much simpler for your users to navigate. Less is more in information architecture.
• Appearance – fortunately X features plenty of options for adjusting the appearance of elements throughout your site, and the navbar is one of the more flexible elements. Try using a smaller font size if possible to save on a little real estate.

We can also try adjust logo size and nav menu link spacing by adding the following custom CSS on Appearance > Customize > Custom > Edit Global CSS

@media (min-width:980px) and (max-width:1160px){
.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    padding-left: 10px;
    padding-right: 10px;
}
a.x-brand.img img {
    width: 240px;
 
}
}

Hope this helps.

[tiv1]

Thanks for your reply.

The code you sent actually fixed the bulk of the issue we were having in the ipads.

One more problem though: in the subpages on ipads, the primary menu switches to drop-down mode (which is fine) but it is transparent. You only notice it is there when you click/hover on it. Is there a way to make it visible?

[Joao]

Hi There,

Please add the following code to Appereance > Customizer > Custom > CSS

@media(max-width:979px){

li .menu-item {
    background: #476481;
}
}

Hope it helps

Joao

[tiv1]

This reply has been marked as private.

[Rupok]

Hi there,

You can try the below CSS :

@media only screen and (max-width: 979px) {
.esolarea {
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 9999;
}

.site {
  margin-top: 50px !important;
}
}

Hope this helps.

[tiv1]

This reply has been marked as private.

[Nabeel A]

Hi there.

Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

@media screen and (min-width:1024px) and (max-width:1024px) {
	.x-nav-wrap.desktop {
		display: none;
	}
	.x-btn-navbar, .x-btn-navbar.collapsed {
		font-size: 24px;
		display: block;
		width: auto;
		float: right;
	}
}

And then add the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

jQuery(document).ready(function($){
	$('.x-btn-navbar').click(function(){
		if($(".x-nav-wrap.mobile").is(':visible')){
			$('.x-nav-wrap.mobile').css("display", "none");
		}
		else{
			$('.x-nav-wrap.mobile').css("display", "block");
		}
	});
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[Rahul]

Hey There,

Thanks for the kind words!

Please add following code under Custom > JavaScript in the Customizer:

jQuery(document).ready(function($) {
  var $window = $(window),
      ipadMenu = $('.touch .x-nav-wrap.desktop'),
      i = 0;

  ipadMenu.addClass('for-ipad');

  $('.x-nav-wrap.desktop.for-ipad .x-nav > li.menu-item-has-children').each(function() {
    var $this = $(this);
    $this.children('.sub-menu').addClass('sm-' + i);
    $('<span class="x-sub-toggle" data-toggle="collapse" data-target=".sub-menu.sm-' + i + '"><i class="x-icon x-icon-angle-double-down"></i></span>').appendTo($this.find('span'));
    
    i++;
  });

  $('.x-nav-wrap.desktop.for-ipad .x-sub-toggle').click(function(e) {
    e.preventDefault();
  });

});

And following under Custom > CSS in the Customizer:

.x-nav-wrap.desktop.for-ipad li span:after {
  display: none !important;
  visibility: hidden !important;
}

.x-nav-wrap.desktop.for-ipad li span span {
  position: static;
}

Hope this helps. 🙂

Thank you.

[tiv1]

Thanks guys. I got 2 replies – one from Nabeel and another from Rahul.

Tried Nabeel’s code and it works. Many many thanks.

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts