-1

I am trying to make a menu that has images instead of text. The 9 menu items break a line when the browser window shrinks. I want them to stay in a horizontal row and stay inside of my wrapper shrinking down in size.

Here is what I have:

<div class="wrapper">
    <div class="nav" role="navigation">
            <ul>
                <li><img src="http://www.ksl.dev/wp-content/themes/ksl/img/ksl_news.png" alt="Logo" class="logo-img"/></li>
                <li><img src="http://www.ksl.dev/wp-content/themes/ksl/img/ksl_news.png" alt="Logo" class="logo-img"/></li>
                <li><img src="http://www.ksl.dev/wp-content/themes/ksl/img/ksl_news.png" alt="Logo" class="logo-img"/></li>
                <li><img src="http://www.ksl.dev/wp-content/themes/ksl/img/ksl_news.png" alt="Logo" class="logo-img"/></li>
                <li><img src="http://www.ksl.dev/wp-content/themes/ksl/img/ksl_news.png" alt="Logo" class="logo-img"/></li>
                <li><img src="http://www.ksl.dev/wp-content/themes/ksl/img/ksl_news.png" alt="Logo" class="logo-img"/></li>
                <li><img src="http://www.ksl.dev/wp-content/themes/ksl/img/ksl_news.png" alt="Logo" class="logo-img"/></li>
                <li><img src="http://www.ksl.dev/wp-content/themes/ksl/img/ksl_news.png" alt="Logo" class="logo-img"/></li>
                <li><img src="http://www.ksl.dev/wp-content/themes/ksl/img/ksl_news.png" alt="Logo" class="logo-img"/></li>
            </ul>
    </div>
</div>

.nav {
    float:left;
    display:none;
}
/* I have a logo I'll be floating next to the nav */
.nav ul {
    float:left;
    width:100%;
    height:100%;
}
.nav ul li img {
    display: block;
    height: auto;
    max-width: 100%;
}
user2684452
  • 701
  • 2
  • 14
  • 31

1 Answers1

0
img {
max-width: 100%;
height: auto;
width: auto; }

Try this Also, take a look at the previous questions link1 link2

Community
  • 1
  • 1
John Doe
  • 62
  • 11
  • Thanks for your response but that didn't make a difference. Also those two links don't help clear up any confusion relevant to my specific situation as they tackle using background images and the body. – user2684452 Feb 23 '15 at 03:50