Resizing nav menu PNGs on screen resize

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;