Help Making Nav Bar and Header Responsive

ON my blog i have a responsive theme in place, but my Secondary nav bar and my Header Image don't scale very well for mobile devices.

http://bit.ly/KLqOAa

Here's the CSS i'm using: Thanks for your help

/** reposition header above main wrap css
---------------------------------------------- */
#header {margin-bottom: -19px;
}
#nav {
line-height: 123%;
height: 31px;
position:relative;
left:16%;
max-width: 445px;
width: 100%;
-webkit-border-radius: 0px 0px 25px 7px;
border-radius: 0px 0px 37px 7px;
font-family: Helvetica, sans-serif;
font-size: 14px;

}

.landing #nav {
max-width: 480px;

}

.landing div#wrap div#header div.wrap div#title-area p#title a {
overflow: visible;
}

  • Patrick

    Hi there @david

    I hope you are well today!

    The following will ensure the menu has a minimum width of 390px on smaller screens so it doesn't get cut off, and pop it to the left side on those screens.

    As for the header image, it is a fixed-width image used as a background to the header div. So the easiest thing to do is to simply shift it over on smaller devices.

    #nav {width:auto; min-width:390px;}
    
    @media only screen and (max-width: 480px) {
    #nav {left:0;}
    #header {background:url("http://livingaha.com/wp-content/uploads/LA-CLYL-small-1000x11.png") no-repeat scroll -35px 0 rgba(0, 0, 0, 0) !important;}
    }

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.