static horizontal navigation bar in bootstrap overlaps content area

Problem

I am new to bootstrap.I have a logo image(instead of project name) and a horizontal navigation bar on top of my page.Logo image is on the left side.When browser window is reduced navigation bar shrinks. I have 2 problems:

(a)The menu that comes as drop down(when window size is reduced) overlaps the content area (b)Menu comes below the logo image.The logo image is about 160px.(I think i may have to reduce the logo image size when window size is reduced).Can anyone tel me how to reduce image size or any other method to solve this!!

Problem courtesy of: Maria Rose

Solution

If reducing the image size in steps is going to solve your problem, then you could use media queries in your CSS to achieve this. For example-

@media all and (max-width: 480px) {
/* Reduce image size */
}

For a detailed description of media queries, check http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ or http://webdesignerwall.com/tutorials/css3-media-queries

Solution courtesy of: Varun

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.