How to make menu resizable without deforming it? - html

Question

So I've created menu on my website, but when I resize windows it is going into other divs in same line. I tried various things but I didn't had any luck. My nav for menu is in another div for header with 2 more divs, for left, and right. I also pasted CSS of those stuff down there, they have class .icons and .logo, and main holder with .menuHolder.
Code
#primary_nav_wrap {
margin: 0.85% 0% 0% 26%;
width: 60%;
padding: 10px;
position: absolute;
min-width: 772px;
}
#primary_nav_wrap ul {
list-style: none;
position: relative;
float: left;
margin: 0;
padding: 0
}
#primary_nav_wrap ul a {
display: block;
color: #333;
text-decoration: none;
font-weight: 700;
font-size: 12px;
line-height: 32px;
padding: 0 15px;
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif
}
#primary_nav_wrap ul li {
position: relative;
float: left;
margin: 0;
padding: 0
}
#primary_nav_wrap ul li:hover {
background: #ddd;
}
#primary_nav_wrap ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
padding: 0
}
#primary_nav_wrap ul ul li {
float: none;
width: 200px
}
#primary_nav_wrap ul ul a {
line-height: 120%;
padding: 10px 15px
}
#primary_nav_wrap ul ul ul {
top: 0;
left: 100%
}
#primary_nav_wrap ul li:hover > ul {
display: block
}
.icons {
float: right;
margin-top: 1.3%;
margin-right: 1.57%;
position: apsolute;
min-width: 53px;
}
.logo {
float: left;
position: apsolute;
/* min-width */
}
.menuHolder {
background-color: #fff;
width: 100%;
text-align: center;
margin: 0px auto;
padding: 0;
border-style: solid;
border-color: #CC0000;
border-width: 1px 0px 2px 0px;
height: 83px;
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item">Index
</li>
<li>Blahblah
<ul>
<li>Blahblah2
</li>
<li>Blahblah3
</li>
<li>Blahblah4
</li>
</ul>
</li>
<li>Blahblah5
</li>
<li>Blahblah6
</li>
<li>Vaša pitanja i odgovori
<ul>
<li>Blahblah7
</li>
<li>Blahblah8
</li>
</ul>
</li>
<li>Blahblah9
</li>
<li>Blahblah10
</li>
<li>Blahblah11
</li>
</ul>
</nav>

Answer 1

if you want to adjust to the width of the window on window size change you have to use SASS, LESS and bootstarp. when you resize the window all that css needs to be rendered again so you would need to literally write a compiler for css and part of the bootstrap manually! therefore using bootstrap and media query would be easier and they are easy to learn.
It also adds value to you as a programmer.

Answer 2

Here's a nav I use on my web page. I set up a side bar to place my menu's in. It stays the same size whenever I resize my page. It might be a starting place for you.
nav {
position: fixed;
left: 0;
top: 0;
bottom: 0;
background: #E5E4E2;
width:275px;
padding: 10px;
}