Switching menu to a tab picture when screen is too small - html

Question

So right now I have a working setup so that when the nav is bigger than the screen then a picture slider down works out. However, the problem is that the nav does not minisize soon enough as it goes over the logo. I want it to be more sensitive to take the logo size into account as well.
Right now this is how I'm achieving this.
HERE IS THE https://jsfiddle.net/q2ozq1q2/3/
/* primary navigation
--------------------------------------------------------------------- */
#nav-wrap ul, #nav-wrap li, #nav-wrap a {
margin: 0;
padding: 0;
border: none;
outline: none;
}
/* nav-wrap */
#nav-wrap {
position: relative;
font: 22px raleway-bold, sans-serif;
float: right;
margin-top: 36px;
margin-right: 20px;
z-index: 99999;
}
/* hide toggle button */
#nav-wrap > a.mobile-btn {
display: none;
border-radius: 3px;
}
ul#nav {
min-height: 48px;
width: auto;
/* left align the menu */
text-align: left;
}
ul#nav li {
position: relative;
list-style: none;
height: 48px;
display: inline-block;
}
/* Links */
ul#nav li a {
/* 8px padding top + 8px padding bottom + 32px line-height = 48px */
display: inline-block;
padding: 8px 11px;
line-height: 32px;
text-decoration: none;
text-align: left;
color: #14C9CF;
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
ul#nav li a:active { background-color: transparent !important; }
ul#nav li:hover > a,
ul#nav li.current a { color: #fff; }
/* adds down arrow */
ul#nav span:after {
width: 0;
height: 0px;
border: 4px solid transparent;
border-bottom: none;
border-top-color: #8a8383;
content: '';
vertical-align: middle;
display: inline-block;
position: relative;
right: 5px;
}
/* Sub Menu
----------------------------------------------------- */
ul#nav ul {
position: absolute;
top: 100%;
left: 0;
background: #1f2024;
min-width: 100%;
border-radius: 0 0 3px 3px;
/* for transition effects */
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
/* Third level sub menu
ul#nav ul ul {
position: absolute;
top: 0;
left: 100%;
border-radius: 0 3px 3px 3px;
}
*/
ul#nav ul li {
padding: 0;
display: block;
text-align: left;
/* for transition effects */
height: 0;
overflow: hidden;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
/*On Hover */
ul#nav li:hover > ul { opacity: 1; filter: alpha(opacity=100); }
ul#nav li:hover > ul li {
height: 42px;
overflow: visible;
border-bottom: 1px solid #26272C;
}
ul#nav li:hover > ul li:last-child { border: none; }
/* Sub Menu Anchor links */
ul#nav ul li a {
padding: 6px 15px;
margin: 0;
white-space: nowrap;
font-size: 13px;
}
You can see that it achieves it by this:
/* hide toggle button */
#nav-wrap > a.mobile-btn {
display: none;
border-radius: 3px;
}
But it does not use the the logo to know exactly when it starts or stops. So the nav will overlay onto the logo. Is there a way to account for the logo?
EDIT
https://jsfiddle.net/q2ozq1q2/3/

Answer 1

If I understand you correctly, you can change the width on the media-query to around 990px like so: (on line 289 in the fiddle)
#media only screen and (max-width: 990px) {

Answer 2

Hey u can resize both image and navigation bar when viewed on smaller screen :
Use following css as example:
img {
max-width:250px;
max-height:250px;
}
#nav-wrap ul#nav {
position:absolute;
width:100%;
}
ul#nav ul li a{
word-break:break-all;
width:100%;
}

Answer 3

You should add a class for img tag -
header .logo a {
display: block;
margin: 0;
padding: 0;
border: none;
outline: none;
}
header .logo a img{
width: 210px;
height: 34px;
}