Responsive break-points issue

Dazzling
1

The site is Bolus website using child-theme.

The issue is, the break-points on responsiveness are not behaving correctly on mobile devices specifically (was first reported to me with ipad). See emulator I used to see this too Emulator. The nav section covers more real estate at those screen sizes.

I think this is an isolated issue with this site partly due to the nav items manipulated with css to accommodate the search box (a plugin “bop search box” suggested on one of the other forum posts by a moderator I think it was, if it’s relevant). All works nicely, but when it comes to responsiveness, the three bar mobile menu button should appear earlier (or higher break-point).

Can you assist please?

Thank you. Great theme though!

2

I’ve checked the style.css file but I’m not coming right on shifting the break-point.

Can someone at least direct me on where I should be looking please, and I’ll attempt it?

3

Hi @drazeni,

I hope you are well today and thank you for your question.

I am not sure i understood your question correctly and what you are referring as break-point so could you please share the screenshot of the issue and describe it a bit more in detail so that i can help you to resolve it?

Kind Regards,
Movin

4

Hi Movin, thanks for responding firstly.

I’ve attached a screenshot of when I reduced my browser width (emulating an ipad screen width) and you’ll see that the nav bar just takes up too much screen real estate and also causing the nav bar to block out some of the slider.

So to eliminate that, I thought the best way was to increase the break-point (@media) so that the three-tier mobile nav button appears earlier, before the nav drops down like in the screenshot. I hope this makes sense. Unless you have an alternate solution.

Thanks.

5

See attached screenshot of an example of the result I’m aiming for (at a higher @media css break-point) to suite tablets such as ipad.

If you have an ipad/tablet and you look at the site on it, you can also see what I mean (which is the first screenshot I posted above). Smaller mobile phones are fine, because the nav collapses to the 3-tier nav button, which is the same effect I want with tablet size screens.

6

Hi @drazeni,

You can achieve it by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Apperance -> Theme Options -> Other -> Custom CSS


@media screen and (max-width: 1000px) {
   body .navbar-toggle{
       display: block;   
       float: right;
}
body .navbar-collapse.collapsing{
  margin-left: -15px;
  margin-right: -15px;
}
   body .navbar-collapse.collapse {
     display: none !important;
    margin-right: -15px;
  height: auto!important;
  padding-bottom: 0;
  overflow: visible!important;
    margin-left: -15px;
}
 body .navbar-collapse.in {
display: block !important;
   
 }

    body .navbar-collapse .navbar-nav>li{
          float: none !important;
    }
body .navbar-collapse .navbar-nav>li a {
      line-height: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
}
body .nav.navbar-nav{
  float: left;
  margin: 0;
  clear: both;
}
body .navbar-header{
  float: none;
}
body li.pull-right{
  margin-top: 15px;
  clear: both !important;
}
}

Best Regards,
Movin

7

Movin, thank you very much! It seems to have worked. I had to however increase the break-point to 1024px to accommodate ipad size screen in landscape.

Movin for king! haha Thanks again!

8

You are always welcome here :slight_smile: