We help IT Professionals succeed at work.

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

261 Views
Last Modified: 2016-08-19
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)

Open in new window


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!
Comment
Watch Question

Prasadh BaapaatWeb Designer & Developer
CERTIFIED EXPERT
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION
MostHatedIT Manager

Author

Commented:
Thanks for the reply Prasadh, the site is as follows : http://bryantparkbelts.com. I tried to adjust the media query pixel, but I could not make it work correctly, it just ended up making things out of wack a bit, such as, the text for smaller for the navigation before the break actually happened that would cause the nav to go below the logo.

Are you saying that I can / should add an additional media query in there?
Prasadh BaapaatWeb Designer & Developer
CERTIFIED EXPERT

Commented:
Ok, now I will check the site and get back to you... pls give me some time.
Web Designer & Developer
CERTIFIED EXPERT
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION
MostHatedIT Manager

Author

Commented:
Thank you for the great reply, I tried to add what you had mentioned, but unfortunately it did not seem to resolve the issue. One thing I did notice though when I was looking at the developer console of chrome, the div around the logo was smaller than the actual size of the image width.

When I changed that by adding style="width:200px:" to the div just outside of the div id=logo, it fixed where it would overlap, but now the menu for some reason is staying too far to the left and not moving over toward the middle when making the screen large again.

Edit, I just tried doing "col-md-10 col-md-offset-1 collapse navbar-collapse navbar-cat-collapse" and I believe that might have fixed it! Let me try it out again. It seems to be a bit too far to the right now, lol. I can not seem to win.
Prasadh BaapaatWeb Designer & Developer
CERTIFIED EXPERT
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION
MostHatedIT Manager

Author

Commented:
Ok swell, looks like I have it just the way I like it! Thank you so much for your help!
Prasadh BaapaatWeb Designer & Developer
CERTIFIED EXPERT

Commented:
Great :)