Difficulties with Mobile Responsiveness of Navigation Bar on Homepage

Support
#1

Hello,

I am having difficulties with the mobile responsiveness associated with the navigation bar on my website’s homepage. The website in question is http://grandcayman.capital. I have tried investigating the issue using existing threads on the support forum, and have noticed that there are three potential causes for this:

  1. An incompatibility issue between the latest versions of Cornerstone and the X Theme. I checked my site and confirmed that both have been updated to the latest versions, and the problem still remains.
  2. A plugin issue. I have tested this and couldn’t determine which one, if any, may be causing the problem.
  3. A problem with custom code within my child theme. This may very well be causing the issue, as I specifically recall adding custom CSS code to my child theme to alter exactly when the navigation bar shifts from the standard nav bar to the mobile nav bar.

To more clearly describe the problem, I noticed that I am experiencing it in multiple browsers and on both my iPhone, my iPad, and my Mac Mini with a wide-screen monitor. The problem is that when the mobile nav bar – the expandable and collapsable navigation bar controlled by the call to action icon consisting of three horizontal bars – engages, the menu automatically expands down onto the screen before I click the mobile icon, and when I click on the icon to collapse the menu back in, it won’t collapse. Please see the image below to visually understand what my homepage looks like when I reduce the browser size to a certain width where the problem initiates.

Please let me know what I need to do to eliminate this issue, as it’s really degrading the user experience of the site. Thanks so much for your help!

Hamburger menu don't work on iPad landscape mode
#2

Hi there,

It seems to be cause by the custom code you have added to change the display of the mobile style menu.

Please date this block

@media (max-width: 1210px) {
.masthead-stacked .x-btn-navbar {
display: inline-block;
}

.x-nav-wrap.desktop {
display: none;
}

.x-nav-wrap.mobile {
display: block;
}
.x-nav-wrap.mobile.collapse {
display: none;
}

.x-nav-wrap.mobile.collapse.in {
display: block !important;
}
}

.x-navbar .desktop .x-nav > li > a {
    font-size: 14px;
}

to


@media (max-width: 1210px) {
    .masthead-stacked .x-navbar {
        text-align: center;
    }
    
    .masthead-stacked .x-btn-navbar {
        display: inline-block;
    }

    .x-nav-wrap.mobile.x-collapsed,
    .x-nav-wrap.desktop {
        display: none;
    }

    .x-nav-wrap.mobile.x-collapse.in, 
    .x-nav-wrap.mobile {
        display: block !important;
    }

}

Hope this helps.

#3

Thank you, that did help, but unfortunately, when I try clicking on the collapsing icon with the three horizontal lines in order to hide the menu bar, it isn’t working. Do I need to add in some additional code to make that work?

Thanks!

#4

Hello There,

Sorry if it didn’t quite work for you. To resolve this, please update the code again and use this instead:

@media (max-width: 1324px) {
  .masthead-stacked .x-btn-navbar {
    display: inline-block;
  }

  .x-nav-wrap.desktop {
    display: none;
  }

  .x-nav-wrap.mobile.collapse.in,
  .x-nav-wrap.mobile {
    display: block !important;
  }

  .x-nav-wrap.mobile.collapse,
  .x-nav-wrap.mobile.x-collapsed {
    display: none !important;
  }

}

Please let us know if this works out for you.

#5

Hello,

That worked like a charm, thank you very much! I just have one final tweak to make – could you please tell me the exact dimensions I need to make the mobile nav bar kick in at the perfect time based on my current links in my navigation bar?

http://grandcayman.capital

I am trying to avoid the situation that you see in the attached image. I thought the required screen width was 1324 pixels, but apparently this isn’t the case and the problem is still persisting. Thanks so much!

#6

Hi There,

I did check your page from 1324px to 1949px but I did not get that issue, please clear your browser’s cache.

Thanks,

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.