Resizing nav menu PNGs on screen resize - html

Question

I have a nav bar made up of png icons. When resizing a page or displaying on other windows, the icons do not move so get cut off. I cannot find a way to resize the icons on different screens and make the icons white on hover? I know as they are .png’s I may have to create all of the icons in white aswell?
Anyway you can see it live at http://www.ssangar.com/
Here is my code for the nav:
http://cdpn.io/msjzi
Thanks in advance!

Answer 1

I'm not quite sure if I understand your question 100%, but just as Racil put it, you want to create a css, and set it to a percentage or with pixels...
If you want to add some transformations, I use this code on my website:
nav li a:hover, nav li a.current {
color: #0099CC;
-o-transition: background 0.3s linear 0s, color 0.3s linear 0s;
-webkit-transition: background 0.3s linear 0s, color 0.3s linear 0s;
-ms-transition: background 0.3s linear 0s, color 0.3s linear 0s;
-moz-transition: background 0.3s linear 0s, color 0.3s linear 0s;
transition: background 0.3s linear 0s, color 0.3s linear 0s;}
The reasoning behind all the different transitions is for the all the old browsers that do not accept the transition code.
*Note: You will need to supply more nav info in your css code, the above is to only make it have a transition effect..*

Answer 2

Depending on what you're trying to achieve, instead of creating another set of icons in white, you probably can use opacity alpha layer. Check this tutorial. Here are the basics:
.myMenuItem:hover
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
As for the resizing, you can simply set the size to percentage:
.myMenuItem
{
width: 30%;
height: 20%;
}
You can also use transition or transform to add some effects:
transform: scale(.5);
transition:width 0.5s ease;