066keeley014barribeau692
New Member
I have the following website which I've been building as part of my graduate work (http://www.ecu.edu/english/tpc/tpcintern/) and it seems to be working pretty well except that the top-most navigation section (the menu bar and the small icons which represent social networks). The CSS used is below:\[code\]#navigation { font-family: 'Lato', sans-serif; font-size: 1.3em; font-style: normal; float: left; margin: .5em 0 0 .5em; width: 70%; height: 2em; position: relative; padding: .5em 0; text-transform: uppercase; font-size: 1em; background-color: #592a8a;}#navigation ul { text-align: center; padding: 0; margin: 0; list-style: none;}#navigation li { font-weight: bold; display: inline; list-style: none; display: block; float: left; width: 11em; height: 2em; text-align: center; padding: .5em 0 0 0;}#navigation li:first-child { border-left: 0;}#navigation li:last-child { border-right: 0;}#navigation li a { color: #fff; text-decoration: none;}#navigation li a:hover { color: #fff; border: 0; text-decoration: underline;}#social ul { text-align: center; padding: 0; margin: 0; list-style: none; width: 100%;}#social li { position: relative; top: -1.5em; left: 1em; list-style: none; display: block; float: left; width: 4em; height: 3em; text-align: center; padding: 2em 1em 0 0; margin: 0;}#social li:first-child { border-left: 0;}#social li:last-child { border-right: 0;}\[/code\]The rest of the site seems to be pretty fluid but I can't seem to figure out the menu bar part. It just breaks when the screen size gets too small.