Mobile nav not clickable

Support
#1

Hello

We were having issues with our main navigation kicking down content in smaller screens so we added the following code to our CSS to prevent this issue:

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

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

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

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

This is working great to switch to the mobile nav in a smaller browser window - however the navbar menu is now not clickable in some sizes.

#2

Hello @erinfogg,

Thanks for asking. :slight_smile:

I checked the website on my end and mobile menu seems to be working fine. I have recorded a screencast that you can take a look. Please try clearing cache and see how it goes.

Thanks.

#3

Thanks @Prasant - if you actually make the screen size any size between 1200px wide and 980px the nav bar will not drop down.
Do you mind taking a look at it again?

Thanks!

#4

Hi there,

Please change your custom code to this instead:

@media (max-width: 1200px) {

  .masthead-inline .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;
  }

}

Hope this helps.

#5

Thanks @Jade - we tried this code but now when the page is expanded beyond 1200 px the navbar disappears entirely - we would like it to just switch to the main navigation (text nav) when above a 1200 px screen.

#6

Hi there,

My apologies, please change min-width: 1200px to max-width: 1200px.

Hope this helps.

#7

That worked! Thank you so much!!

#8

Spoke too soon!

The mobile navbar is now being pushed all the way flush left with our logo upon scaling the browser window. We would like it to float right. I tried adding a float: right !important; tag but wasn’t able to get it right.

Any help is appreciated! Screenshot of where the navbar goes (next to logo) and where we want it to go - float right.

#9

Hi again,

I checked your site in smaller screens and I see the menu on the right side (see screenshot)

This could be just a cache issue, try clearing your browser’s cache and check the site again.

Cheers!

#10

Thanks @Nabeel - it looks fine when the screen is at a mobile size, but the navbar flushes left when the screen is between 1200 and 980 px

#11

We flushed the cache and cleared our own cache and no luck. The mobile nav is still pushing left between 1200 and 980 px screen width.

#12

HI There,

The only way to do this is to minimize the font size or gap between the menu item.
The having its own responsive breakpoints for the different device. If you override the behavior with custom CSS it might affect device view.

I would suggest you to please decrease the font size and gap, to manage the responsiveness in the given view.

Thanks

#13

Had exactly the same problem as erinfogg at the same media breakpoints this evening.

Within the @media(max-width: 1200px) CSS section I added

.x-btn-navbar {
margin-left: 80%;
}

Then within an @media (max-width: 980px) CSS section

.x-btn-navbar {
margin-left: 0;
}

Seemed to work for me on different screen sizes. It’s not perfect when dynamically resizing a window but does seem to work here.

#14

Hey @ErinFogg,

Please have the code updated and use this one instead:

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

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

@alphadeltaecho:
You do not need to add any margin to the left side. Just make use of this code:

 .masthead-inline .x-btn-navbar {
    display: inline-block;
    float: right;
  }

Please let us know if this works out for you.

1 Like
#15

@Prasant

I’m having the same problem with my site. Once it gets below a 1000px screen width the nav bar hamburger stops functioning. It does not register touch selection on the iPhone and is not responsive on my PC. Please note this only affects the navbar on the homepage, the navbar on all other pages is working correctly. Please advise. Thanks

#16

Hi @LaurynDCF,

Would you mind starting a new thread? Then please provide the login credentials in the secure note as your site is currently behind a coming soon page.

Then please link this thread to your new thread as reference. It’s getting long and harder to track :slight_smile:

Thanks!

#17

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