Menu not appearing in ipad (bootstrap)

HTML & CSS
1

My site built on bootstrap. When the nav collapses the toggle button doesn’t appear on an ipad - http://mobiletest.me/ipad_mini_emulator/#u=http://gloucesterweddingphotographer.com/

2

It doesn’t appear because the iPads screen is too big. Simple as that. You have the hamburger icon appear only on 767px and below.

3

Do I need to increase my breakpoint beyond 767px?

4

Hmm scratch that. I thought the menu was appearing by default. Give me a moment. 767 is the correct pixel value you should have. There’s something else going on. Apologies.

5

No bother its head wrecking - I thought ios issue but it works fine on an iphone.

6

I’d validate your dan-morris CSS file. Take care of that first. FYI, !important is done BEFORE any semi-colon. Let’s start there. Validate your file. The bootstraps are also pretty invalid but nothing major. So just do your own file.

7

The menu button is being pulled off screen on iPad by this rule (line 820, dan-morris.css):

@media only screen and (max-width : 770px) {
    .navbar-toggle {
        margin-top: -80px;
        !important
    }
}

If you just remove it, the problem goes away. That said, if it is native Bootcrap code, you aren’t meant to meddle with that, so perhaps you should override it with your own code … although the !important makes that rather difficult.

1 Like
8

Thanks all - @ralphm I added this in as the ‘hamburger’ icon was all over the place but I need it for Ipads so i’ll have to think of another hack… RWD is hard at times!!!
For android devices the icon is now too far down the page - http://mobiletest.me/google_nexus_7_emulator/#u=http://gloucesterweddingphotographer.com/

9

Well remove that margin and we can work towards WHY it is displaying poorly from there :slight_smile:

10

Perhaps try to position it in a more bulletproof way. I just added this (last 3 lines) at line 697 and it works better, though I can only test on iPad:

.navbar-toggle {
        display: block;
	position: absolute;
	right: 0;
	top: 0;
    }
11

Thanks but it keeps the toggle icon on even when the full nav is visible.

12

OK, instead of that, try adding this to the bottom of dan-morris.css:

@media (max-width: 768px) {
    .navbar-toggle {
      display: block;
      position: absolute;
      right: 0;
      top: 0;	
      float: none;
    }
}
13

Needs to be top: -70px; for devices except ios… the problem seems to be the logo.

14

With the menu button set to position: absolute, it shouldn’t be affected by other elements.

15

Don’t give any specific device settings. Make something universal and let US figure out what is causing the hiccups please. Ralph is right though.

16

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