Reponsive navbar issues using media queries

Question

As you can see, on different screen sizes my logo is either way out of place or the menu is overlapping with the logo.

I've tried adding different media queries into css but it seems that even if I have different media queries for different rules(eg on small phone the logo size should have a width of 100px and on an iphone of 150) it doesen't quite work as intended. My question is:

Is there a way I can create separate rules of display (for phone logo and menu list should have specific dimensions and on tablets another etc)

here is what i tried so far:

@media(max-width:320px) {
    .navbar-brand{
        height:110px;
        width:80px;
    }
    }
@media(max-width:480px) {
    .navbar-brand{
        height:70px;
        width:220px;
    }
    }

and so on

Answer 1

Here is What You Can do. Most Easiest Way i Can Tell. Add These 3 lines of code to your IMG.

    position: absolute;
    top: 0;
    left: 0;

After Adding These 3 lines of code Your Site Looks like This:-

in 768 Resolution Case. add new 'class or id' to navigation.Decrease The 'Width' and use 'Position' .You Will Get Your Design in the Way You Want. Hope This Will Help You