Solved

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

Posted on 2016-08-18
8
72 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!
0
Comment
Question by:MostHated
  • 5
  • 3
8 Comments
 
LVL 9

Assisted Solution

by:Prasadh Baapaat
Prasadh Baapaat earned 500 total points
ID: 41761240
Yes you can fix this with setting up your own MEDIA QUERIES as they are called ... (@media (min-width: 992px) is a media query

1) now you will have to use some easy tools to check what is the range of pixels when the overlap happens.

2) set a media query to address it.

It would be very good if you can post the actual site link so I can take a look at it and give appropriate solution.

if not then you will have to use Chrome browser and in it there is a built in tool which shows the code + screen size. it is called the "inspect" tool.

open site in Chrome and then right click and select "inspect" which is last option in menu.

the site will look like the screenshot and then you can see at what exact pixels the overlapping starts as you resize the browser window.

inspect tool chrome
then you set media query accordingly to affect That particular range of screen size.

let me know if you were able to get it right.

thanks,
Prasadh
0
 
LVL 1

Author Comment

by:MostHated
ID: 41762428
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?
0
 
LVL 9

Expert Comment

by:Prasadh Baapaat
ID: 41762520
Ok, now I will check the site and get back to you... pls give me some time.
0
 
LVL 9

Accepted Solution

by:
Prasadh Baapaat earned 500 total points
ID: 41762659
I checked your site, and in the header there are 2 divs..> #main-header & #main-menu

INSIDE the #main-menu, the div #logo is placed inside a 2 column div (col-md-2)

and then there is the navbar in another div... but it does not have any column specification ... so it occupies the whole row.

so now here it is a tricky situation applying the media query... BTW the overlap happens between width or 1260px and 990px

I suggest if we remove the logo OUTSIDE the navbar by giving the navbar a column width of 10 columns like:

<div class="col-md-10 collapse navbar-collapse navbar-cat-collapse">

Open in new window


note that I have just added "col-md-10"

can you try this by making a test page? if yes, then lets go ahead and check the outcome.

thanks,
Prasadh
0
Scale it in WD Gold

With up to ten times the workload capacity of desktop drives, WD Gold hard drives employ advanced technology to deliver among the best in reliability, capacity, power efficiency and performance.

 
LVL 1

Author Comment

by:MostHated
ID: 41762743
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.
0
 
LVL 9

Assisted Solution

by:Prasadh Baapaat
Prasadh Baapaat earned 500 total points
ID: 41762753
That is because the menu has a property of "float: left" like in code below:

.navbar-nav {
    float: left;
    margin: 0;
}

Open in new window


try removing that float and lets see what happens. the code is in Bootstrap, so we will have to OVERRIDE it...

Paste this code in a CSS file which loads AFTER bootstrap

.navbar-nav {
    float: none !important;
    margin: 0;
}

Open in new window


keep me posted...
0
 
LVL 1

Author Comment

by:MostHated
ID: 41762775
Ok swell, looks like I have it just the way I like it! Thank you so much for your help!
0
 
LVL 9

Expert Comment

by:Prasadh Baapaat
ID: 41762810
Great :)
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
html coding on my Tumblr blog 1 34
iframe detection of parent window scale 20 60
simplest php form 3 63
Tags from access to excel 3 28
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now