mpactMEDIA mpactMEDIA - 2 months ago 5
PHP Question

CSS Bootstrap Responsive Menu Discrepancy

I am developing a site for a local legal firm and have run across an odd CSS problem.
The collapsed responsive menu is displayed two different ways. Using Screenfly from Quirktools I noticed two devices have menu CSS problems.

The first and correct way is found here
THIS HAS BEEN FIXED
That link is for devices with a screen resolution of 603px x 966px.

The second and incorrect way is found here
THIS HAS BEEN FIXED
THIS HAS BEEN FIXED
The first link targets devices with a screen resolution of 800px x 1280px
The second targets devices with a screen resolution of 768px x 1024px

The next size up a 10" netbook is also fine and can be found here
THIS HAS BEEN FIXED
This one targets devices with a screen resolution of 1024px x 600px

The site in question is
THIS HAS BEEN FIXED

Does anyone know what would cause this or how to fix it?

Any help would be greatly appreciated. I haven't worked with Bootstrap before and it can be a bit confusing.

Best,
Tim

Answer

You have a float:right on .header-contact you layout breaks at 650px

So add this media query

@media (max-width: 650px) {
  .header-contact{
  float:left;
  }
}

The next nav-bar design breaks because you are toggling your nav-bar at 818px and the color applied to the nav-bar is by this query.

@media (max-width: 767px) {

.menu-nav ul {border:none;}
.navbar-collapse{background:#353f00;}

}

So anything screen above 767px there will be a problem till 818px.

Change the query to 818px

 @media (max-width: 818px) {  
    .menu-nav ul {border:none;}
    .navbar-collapse{background:#353f00;}

    }
Comments