CODEWITHSUNDEEP
csstwitter-bootstrapnavigation
C Targett
C Targett

Reputation: 1

Twitter Bootstrap Nav bar

http://www.ontargettdesign.com

Hi,

I am having problem with the navigation bar and the logo when the webpage is resized to ipad size:

[IMG]http://i60.tinypic.com/4r95qo.png[/IMG]

How can I code it to be a narrower height, I feel I have tried everything!

Any help would be very much appreciated.

Thanks in advance

Upvotes: 0

Views: 65

Answers (1)

AndrewH
AndrewH

Reputation: 370

Your Media Queries are clipping the image. This is because the div you have is smaller than the background image being used. If you remove the "width" & height" the logo will display properly. To view this. Make you browser smaller to see the clipping occur (Because of @media). Right click on the logo and "inspect element". On the right or bottom it will show you the css that is applied to this image. You can toggle the css to see how the code effects your image.

either add background-size:contain; to both of the follow or remove the width and height.

@media (max-width: 979px) and (min-width: 769px)
.navbar-brand {
    height: 32px;
    width: 132px;
}

&

@media (max-width: 768px)
.navbar-brand {
    height: 32px;
    width: 132px;
}

To change make the navbar height the same across all media widths you will still have to mess with the media widths. Your standard height is "height: 76px;".

The first CSS is for the smallest possible screen

@media (max-width: 768px)
.navbar {
   height: 76px; /* add this */
}

This is the second smallest screen (for tablets). You will not to get rid of the clear:both that is sending the navigation to the second line

@media (max-width: 979px) and (min-width: 769px)
.navbar-collapse {
   float: none;
   clear: both; /* DELETE THIS */
   height: 100px; /* You can change this to 76px if you want to be consistent */
}

Upvotes: 1

Related Questions