troubleshooting Question

Bootstrap Yii navigation overlaps logo when shrinking browser just before it switches to the next smaller responsive size

Avatar of MostHated
MostHatedFlag for United States of America asked on
CSSBootstrapWeb FrameworksHTMLResponsive Web
8 Comments3 Solutions269 ViewsLast Modified:
Hello all,
    I am having an issue with one of our new websites we have made. I have experience with PHP / HTML / MySQL, but this was from many years ago before responsive web / bootstrap and when development frameworks were just getting started, and my knowledge of CSS is fairly limited. Our site is made using the YII framework and a bootstrap theme. I know enough to make some basic edits to information, and even took something a 3rd party did to our site and emulated it to make a new page for a form that users can submit. I am not quite sure where or how to edit the site for the issue that I am having though.

    Looking at the "responsive.css" I found that you can edit the threshold in pixels of where it will switch from one "screen size preset" (for lack of knowing the actual term) to another with the following.

@media (min-width: 992px) and (max-width: 1199px)

Though I was told that editing those presets could / would mess with how it could end up looking on tablets or other typical mobile screen sizes, so my question is, what and where do I edit to fix the issue in the below image?

(Image is a gif, so you will probably have to click it to view the animation)
Example of navigation / image overlap
As you can see, when I shrink the browser, there is overlap of the "Shop All" button with the main logo before the site changes layouts. What is the best way to fix this? Is there a way to set the navigation to only move so far to the left to avoid that, or do I edit the point in which it changes to the next layout, to happen just before the overlap occurs?

Thanks all!
Prasadh Baapaat
Web Designer & Developer

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 3 Answers and 8 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 3 Answers and 8 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros